Home
DESIGN.mdStar on GitHub
Copied!

The product intelligence system for the AI era

Answer product questions in seconds — funnels, retention, and insights on your event data.

Colors
Primary
Purple
#7856FF
Brand, primary series
Purple Deep
#472BA0
Bar gradient end
Purple Light
#9074FF
Dark-mode brand
Ink
#15003F
Deep purple, dark page
Chart Spectrum
Coral
#FF7557
Dropoff
Yellow
#F9C85F
Series
Teal
#7FE1D8
Series
Green
#3BA974
Series, success
Surfaces — Dark (deep purple, real)
Page
#15003F
Dark background
Surface
#1E0B4D
Cards
Elevated
#2E1670
Raised
Blue
#72BEF4
Series
Surfaces — Light & Text
Page Light
#F7F5FF
Light background
Border
#E8E4F5
Dividers
Text
#1F2023
Primary text
Secondary
#6B6680
Muted text
Typography — DM Sans · JetBrains Mono
h1
Product analytics
40px700DM Sans
h2
Funnels & retention
27px600lh 1.1
h3
Conversion over time
20px600lh 1.3
body
Track how users move through your product and find exactly where they drop off — no SQL required.
15px400lh 1.6
mono
mixpanel.track("Signed Up", { plan })
13pxJetBrains Mono
Signature — Funnel
Signup → Upgrade funnel
— overall conversion · — entered
Components
Buttons
Search Events
Series
Purple Coral Teal Yellow
Segments
All users Mobile Web
Guardrails
DO
Lead with purple #7856FF; use the warm spectrum for segments/series
Give funnel steps both overall and step-to-step conversion %
Show dropoff explicitly (coral) between steps
Set counts, event names, and IDs in the mono stack
Keep the canvas light so chart colors carry meaning
DON'T
Don't reassign spectrum colors between segments within one view
Don't invent dark surfaces; anchor on the real deep purple #15003F
Don't use coral for anything but dropoff / negative
Don't set metric counts in a proportional font
Don't show a funnel step without its conversion rate