BRAND IDENTITY
Design Tokens
A comprehensive guide to our visual identity, ensuring consistency across all touchpoints.
Token Architecture
The design token system is organized into four strictly separated layers. Each layer can only reference the layer directly below it — never skip layers. A single change in a lower layer propagates cleanly through every layer above it without requiring updates to component code.
Theming (light/dark mode, white-label brand swaps) happens exclusively at Layer 2 — Semantic. Components never see raw hex values. They read from semantic or component tokens, which resolve to the correct primitive for the active theme.
This architecture scales from a single product to an entire platform with multiple apps, dashboard variants, and brand configurations — all sharing the same primitive foundation.
Reference Direction
How values resolve at runtime. Your component reads a Component token, which points to a Semantic token, which resolves to a Primitive value. The Composite layer sits alongside as a convenience shortcut.
Your Code
L4 Component
L2 Semantic
L1 Primitive
L3 Composite — optional convenience layer that bundles multiple primitives into spreadable presets
// Example: How a button background resolves
Your code reads → component.button.md.bg
Which maps to → semantic.action.primary.bg (role: "primary action background")
Which points to → primitive.color.red.500 (raw value: #FC3638)
// To switch to dark mode: change semantic.action.primary.bg → red.400
// To rebrand to blue: change semantic.action.primary.bg → blue.500
// Component code changes: ZERO
// To rebrand to blue: change semantic.action.primary.bg → blue.500
// Component code changes: ZERO
Layer Deep-Dive
Each layer explained: what it holds, why it exists, and real token examples.
Primitive Color Scales
Core color palettes with 10 steps from 50 to 900. The 500 value is your original brand color and serves as the base for each scale.
primary
Brand (near-black)
secondary
Brand Red
red
Error / Danger
orange
Energy Orange
blue
Ocean Blue
purple
Lavanda
green
Success
amber
Warning
gray
Text & Borders
stone
Backgrounds
primary
50--color-primary-50
100--color-primary-50
200--color-primary-50
300--color-primary-50
400--color-primary-50
500--color-primary-50
600--color-primary-50
700--color-primary-50
800--color-primary-50
900--color-primary-50
secondary
50--color-secondary-50
100--color-secondary-50
200--color-secondary-50
300--color-secondary-50
400--color-secondary-50
500--color-secondary-50
600--color-secondary-50
700--color-secondary-50
800--color-secondary-50
900--color-secondary-50
red
50--color-red-50
100--color-red-50
200--color-red-50
300--color-red-50
400--color-red-50
500--color-red-50
600--color-red-50
700--color-red-50
800--color-red-50
900--color-red-50
orange
50--color-orange-50
100--color-orange-50
200--color-orange-50
300--color-orange-50
400--color-orange-50
500--color-orange-50
600--color-orange-50
700--color-orange-50
800--color-orange-50
900--color-orange-50
blue
50--color-blue-50
100--color-blue-50
200--color-blue-50
300--color-blue-50
400--color-blue-50
500--color-blue-50
600--color-blue-50
700--color-blue-50
800--color-blue-50
900--color-blue-50
purple
50--color-purple-50
100--color-purple-50
200--color-purple-50
300--color-purple-50
400--color-purple-50
500--color-purple-50
600--color-purple-50
700--color-purple-50
800--color-purple-50
900--color-purple-50
green
50--color-green-50
100--color-green-50
200--color-green-50
300--color-green-50
400--color-green-50
500--color-green-50
600--color-green-50
700--color-green-50
800--color-green-50
900--color-green-50
amber
50--color-amber-50
100--color-amber-50
200--color-amber-50
300--color-amber-50
400--color-amber-50
500--color-amber-50
600--color-amber-50
700--color-amber-50
800--color-amber-50
900--color-amber-50
gray
50--color-gray-50
100--color-gray-50
200--color-gray-50
300--color-gray-50
400--color-gray-50
500--color-gray-50
600--color-gray-50
700--color-gray-50
800--color-gray-50
900--color-gray-50
stone
50--color-stone-50
100--color-stone-50
200--color-stone-50
300--color-stone-50
400--color-stone-50
500--color-stone-50
600--color-stone-50
700--color-stone-50
800--color-stone-50
900--color-stone-50
Semantic Tokens
Purpose-driven tokens that reference primitive scales. Use these for consistent, maintainable styling. Each token maps to a primitive value.
Brand
Primary brand identity
red.*
brand.DEFAULT
brand.lighter
brand.light
brand.muted
brand.dark
brand.darker
brand.hover
brand.active
brand.subtle
Accent
Secondary emphasis
blue.*
accent.DEFAULT
accent.lighter
accent.light
accent.muted
accent.dark
accent.darker
accent.hover
accent.active
accent.subtle
Background
Surface colors
stone.*, gray.*
background.DEFAULT
background.primary
background.secondary
background.tertiary
background.elevated
background.muted
background.subtle
background.inverse
background.dark
Foreground
Text & icons
gray.*
foreground.DEFAULT
foreground.primary
foreground.secondary
foreground.muted
foreground.subtle
foreground.inverse
foreground.brand
foreground.accent
foreground.link
foreground.linkHover
Border
Dividers & outlines
gray.*
border.DEFAULT
border.primary
border.secondary
border.tertiary
border.hover
border.focus
border.focusBrand
border.focusAccent
border.muted
border.inverse
Ring
Focus indicators
blue.*, red.*
ring.DEFAULT
ring.brand
ring.accent
ring.success
ring.error
ring.offset
Status Colors
Feedback colors for success, warning, error, and info states. Each includes background, foreground, and accent variants.
Success
Positive actions & states
Success Message
This shows how the status colors work in context.
DEFAULT#10B981
lighter#ECFDF5
light#D1FAE5
muted#A7F3D0
dark#047857
darker#064E3B
fg#065F46
hover#059669
subtlergba(16, 185, …
Warning
Caution & attention
Warning Message
This shows how the status colors work in context.
DEFAULT#F59E0B
lighter#FFFBEB
light#FEF3C7
muted#FDE68A
dark#B45309
darker#78350F
fg#92400E
hover#D97706
subtlergba(245, 158,…
Error
Destructive & errors
Error Message
This shows how the status colors work in context.
DEFAULT#FC3638
lighter#FFF5F5
light#FFE3E3
muted#FFC9C9
dark#C92022
darker#821718
fg#A61B1D
hover#E5282A
subtlergba(252, 54, …
Info
Informational states
Info Message
This shows how the status colors work in context.
DEFAULT#3C53FF
lighter#F0F3FF
light#E0E6FF
muted#C7D0FF
dark#2534C4
darker#182278
fg#1E2A9E
hover#2F42E6
subtlergba(60, 83, 2…
Overlay Tokens
overlay.DEFAULT
rgba(17, 24, 39, 0.50)
overlay.light
rgba(17, 24, 39, 0.25)
overlay.medium
rgba(17, 24, 39, 0.50)
overlay.heavy
rgba(17, 24, 39, 0.75)
overlay.black
rgba(0, 0, 0, 0.80)
Gradient Tokens
Built from primitive color scales. Use gradients sparingly for emphasis, CTAs, and decorative elements.
Brand Gradients
powerRed
linear-gradient(135deg, #FC3638 0%, #E5282A 100%)
energyOrange
linear-gradient(135deg, #FF8E3C 0%, #E67320 100%)
lavanda
linear-gradient(135deg, #773CFF 0%, #6229E6 100%)
oceanBlue
linear-gradient(135deg, #3C53FF 0%, #2F42E6 100%)
Combination Gradients
sunset
aurora
fire
cosmic
Subtle & Dark Gradients
softRed
softBlue
darkBlue
night
Spacing Tokens
Named Spacing
xs
4px
sm
8px
md
12px
lg
16px
xl
20px
2xl
32px
3xl
48px
4xl
64px
Numeric Scale
0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
12
48px
14
56px
16
64px
20
80px
24
96px
32
128px
40
160px
48
192px
Border Radius Tokens
none
0px
xs
4px
sm
6px
md
8px
lg
12px
xl
16px
2xl
24px
3xl
32px
full
9999px
Shadow Tokens
Elevation Scale
none
xs
sm
md
lg
xl
2xl
inner
Colored Shadows
brand
0 4px 14px rgba(255, 142, 60, 0.25)
accent
0 4px 14px rgba(252, 54, 56, 0.25)
success
0 4px 14px rgba(16, 185, 129, 0.25)
error
0 4px 14px rgba(252, 54, 56, 0.25)
Typography Tokens
Font Sizes
xs11px
sm12px
base14px
md16px
lg18px
xl20px
2xl24px
3xl30px
4xl36px
5xl48px
6xl60px
Font Weights
thin100
light300
normal400
medium500
semibold600
bold700
extrabold800
black900
Line Heights
none1
tight1.15
snug1.25
normal1.5
relaxed1.625
loose2
Letter Spacing
tighter-0.05em
tight-0.025em
normal0em
wide0.025em
wider0.05em
widest0.1em
Font Families
Inter
sans
JetBrains Mono
mono
Motion & Layering
Transition Durations
Always respect prefers-reduced-motion for accessibility.
fastest50ms
fast100ms
normal150ms
slow200ms
slower300ms
slowest500ms
Z-Index Scale
hide-1
base0
dropdown100
sticky200
fixed300
overlay400
modal500
popover600
tooltip700
toast800
max9999