Home/Tokens

Tokens

The single source of truth, in raw form. Every variable in tokens.css — color, spacing, radius, type, motion, and shadow — listed with its value so you can wire it straight into a component without guessing.

CSS custom properties tokens.css Read the foundations for the why

Color — neutral scale

A cool, neutral gray ramp. Used directly when a raw swatch is needed.

Swatch	Token	Value
	--gray-50	#F7F8FA
	--gray-100	#F1F3F6
	--gray-200	#E5E8EE
	--gray-300	#D2D7E0
	--gray-400	#A6AEBD
	--gray-500	#767D8C
	--gray-600	#565C69
	--gray-700	#3D424D
	--gray-800	#262A33
	--gray-900	#16181D
	--gray-950	#0C0D11

Color — Corelith blue

The single saturated color in the system. Sampled from the logo; drives the primary action.

Swatch	Token	Value
	--brand-50	#EEF3FE
	--brand-100	#DCE5FD
	--brand-200	#B8CBFB
	--brand-300	#85A8F8
	--brand	#0B5DF0
	--brand-strong	#0944C2
	--brand-deeper	#08379C
	--brand-900	#0A2862
	--brand-soft	#E8EFFE

Color — semantic tones

Status meaning. Each tone ships a foreground, a soft background, and a border.

Token	Value	Use
--tone-info	--brand	Information, in-progress
--tone-success	#5E8E54	Completed, healthy
--tone-warn	#B07626	Needs attention
--tone-danger	#B83A2A	Errors, destructive
--tone-neutral	--text-muted	Idle, not started

Color — text & surface

Foreground and background aliases used everywhere instead of raw grays.

Swatch	Token	Value
	--text-strong	#16181D
	--text-body	#262A33
	--text-muted	#565C69
	--text-subtle	#8A91A0
	--canvas	#F7F8FA
	--surface	#FFFFFF
	--surface-muted	#F1F3F6
	--border	#E5E8EE
	--border-strong	#D2D7E0

Spacing

4px base, 8px rhythm. The bones of every layout.

Scale	Token	Value
	--space-px	1px
	--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
	--space-13	128px

Radius

Corner rounding. 8px is the default control radius.

Token	Value	Use
--radius-xs	4px	Tiny chips, code tags
--radius-sm	6px	Menu items
--radius-md	8px	Default control · buttons
--radius-lg	10px	Cards, inputs
--radius-xl	14px	Tonal hero cards
--radius-2xl	18px	Large panels
--radius-pill	9999px	Pills, badges, avatars

Type roles

One family — Atkinson Hyperlegible Next — weight does the work.

Token	Weight / size / line	Use
--type-display	700 56px/1.04	Hero headlines
--type-display-sm	600 32px/1.15	Section heroes
--type-page-title	600 22px/1.3	Page H1
--type-section-title	600 16px/1.4	Card / section titles
--type-body-lg	400 16px/1.55	Lede paragraphs
--type-body	400 14px/1.55	Default body
--type-body-sm	400 13px/1.5	Dense tables, captions
--type-label	500 14px/1.4	Form labels, buttons
--type-label-sm	500 13px/1.4	Compact labels
--type-caption	400 12px/1.45	Meta, helper text
--type-eyebrow	500 12px/1.3	Section eyebrows
--type-table-head	500 12px/1.3	Table headers
--type-mono	500 12px/1.5 mono	IDs, amounts, timestamps

Control sizes

Finger-friendly heights for inputs and buttons.

Token	Value	Use
--h-control-xs	24px	Inline chips
--h-control-sm	30px	Dense toolbars
--h-control-md	36px	Default control
--h-control-lg	44px	Touch targets, primary CTAs

Motion — durations

Quiet is correct. No celebratory motion.

Token	Value	Use
--dur-instant	80ms	Hover tint, press feedback
--dur-fast	140ms	Most UI transitions
--dur-base	200ms	Popovers, dropdowns
--dur-slow	320ms	Sheets, drawers
--dur-slower	480ms	Large surface entrance
--dur-page	640ms	Full-page transitions

Easings

Token	Value	Use
--ease-out	cubic-bezier(0.22, 1, 0.36, 1)	Default — things settling in
--ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	Reversible moves
--ease-spring	cubic-bezier(0.5, 1.8, 0.3, 1)	Playful, sparing
--ease-snap	cubic-bezier(0.7, 0, 0.3, 1)	Toggles, snaps

Shadows

Minimal. Borders do the work; shadow is earned only by floating surfaces.

Sample	Token	Use
	--shadow-none	Default on canvas
	--shadow-rest	Resting cards
	--shadow-hover	Hover lift
	--shadow-popover	Popovers, dropdowns
	--shadow-modal	Modals, sheets

Want the reasoning?

This page is the raw reference. For the why behind each scale, read Colors, Typography, Spacing & layout, Motion, and Elevation.