Styleguide

Design tokens and component reference. Edit globals.css to update these values across the app.

Colors

Backgrounds
bg
#0e0e14
Page background
surface
#16151e
Cards, panels
surface-raised
#1e1d28
Elevated elements
surface-hover
#262533
Hover state
surface-active
#2e2d3c
Active/pressed
Borders
border
#2c2b3a
Default borders
border-subtle
#211f2e
Internal dividers
Text
text-heading
#eae9f0
Headlines
text
#c8c7d4
Body text
text-muted
#85849a
Secondary
text-tertiary
#5a5970
Captions, labels
Accent
accent
#a78bfa
Primary accent
accent-muted
#8b72e0
Hover/active
Tiers (functional only)
t1
#6ee7a0
Tier 1
t2
#e0a860
Tier 2
t3
#77768a
Tier 3

Typography

Page title
Inter 700 / 22px / -0.03em
Target Account List
Section title
Inter 600 / 16px / -0.02em
Score Breakdown
Body
Inter 400 / 13px / -0.01em
Companies scored against ICP model v4.2
Secondary
Inter 400 / 13px
Netherlands · 12,400 employees · E-commerce
Caption
Inter 500 / 11px / 0.05em
ICP SCORE · COUNTRY · EMPLOYEES
Stat number
JetBrains Mono 600 / 24px
2,847
Inline number
JetBrains Mono 500 / 13px
87 · 12,400 · $21.4B
Code
JetBrains Mono 400 / 12px
--color-surface

Components

Tier Badges
T1T2T3Below
Buttons
Filter Chips
SaaS / Software ×Netherlands ×
Score Bars
87
61
42
Cards
Default Card
2,847
Active Card
186
Info Card
Netherlands

Design Principles

Color Restraint
Color is functional, not decorative. Tier dots and score bars only. Everything else is purple-gray monochrome.
Hierarchy Through Weight
Use text color and font weight to create hierarchy. Four levels: heading, body, secondary, tertiary.
Structure Felt, Not Seen
Subtle borders and surface elevation create structure. No heavy shadows. The purple glow adds warmth.