Styleguide

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

Colors

Backgrounds
bg
--color-bg
Page background
surface
--color-surface
Cards, panels
surface-raised
--color-surface-raised
Elevated elements
surface-hover
--color-surface-hover
Hover state
surface-active
--color-surface-active
Active/pressed
Borders
border
--color-border
Default borders
border-subtle
--color-border-subtle
Internal dividers
Text
text-heading
--color-text-heading
Headlines
text
--color-text
Body text
text-muted
--color-text-muted
Secondary
text-tertiary
--color-text-tertiary
Captions, labels
Accent
accent
--color-accent
Primary accent
accent-muted
--color-accent-muted
Hover/active
Tiers (functional only)
t1
--color-t1
Tier 1
t2
--color-t2
Tier 2
t3
--color-t3
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.