Design Tokens

CSS custom properties reference

All components use these design tokens. Define them in :root for global use.

Colors

Token	Value	Usage
`--color-primary`	#1A4079	Primary brand
`--color-primary-dark`	#0B245A	Primary dark
`--color-primary-light`	#2E5FA3	Primary light
`--color-primary-subtle`	#E8EEF7	Primary subtle bg
`--color-secondary`	#11181C	Secondary
`--color-accent`	#E8A020	Accent
`--color-accent-dark`	#C07810	Accent dark
`--color-accent-light`	#FFF3D9	Accent light bg
`--color-text-primary`	#11181C	Primary text
`--color-text-secondary`	#475569	Secondary text
`--color-text-disabled`	#94A3B8	Disabled text
`--color-text-inverse`	#FFFFFF	Text on dark
`--color-border`	#E2E8F0	Borders
`--color-neutral-0`	#FFFFFF	White
`--color-neutral-50`	#F8FAFC	Light bg
`--color-neutral-100`	#F1F5F9	Light bg alt
`--color-neutral-200`	#E2E8F0	Border light
`--color-neutral-500`	#64748B	Muted
`--color-neutral-900`	#0F172A	Dark
`--color-success`	#16a34a	Success
`--color-error`	#DC2626	Error

Spacing

Token	Value
`--space-1`	4px
`--space-2`	8px
`--space-3`	12px
`--space-4`	16px
`--space-5`	20px
`--space-6`	24px
`--space-7`	32px
`--space-8`	40px
`--space-9`	48px
`--space-10`	64px
`--space-11`	80px
`--space-12`	96px

Radius

Token	Value
`--radius-sm`	4px
`--radius-md`	8px
`--radius-lg`	12px
`--radius-xl`	16px
`--radius-2xl`	24px
`--radius-full`	9999px

Shadows

Token	Value
`--shadow-sm`	0 1px 2px rgba(0,0,0,.06)
`--shadow-md`	0 4px 16px rgba(0,0,0,.10)
`--shadow-lg`	0 8px 32px rgba(0,0,0,.14)
`--shadow-xl`	0 16px 48px rgba(0,0,0,.18)
`--shadow-form`	0 20px 60px rgba(11,36,90,.25)

Typography

Token	Value
`--font`	'Onest', sans-serif