Tokens

Tokens are the contract. Components never hardcode a colour, space, radius, shadow, font or duration — they reference one of these. A single per-product override re-skins everything. Each colour also ships as an -rgb channel triple so alpha tints stay themeable: rgb(var(--primary-rgb) / .12).

Colour — Dark Knight (canonical)

Token		Value
`--bg`		`#0a0a0a`
`--surface`		`#141414`
`--surface-2`		`#1e1e1e`
`--surface-3`		`#161616`
`--surface-sunken`		`#0c0c0c`
`--surface-active`		`#17171b`
`--skeleton`		`#262626`
`--line`		`rgba(255,255,255,0.08)`
`--line-strong`		`rgba(255,255,255,0.14)`
`--text`		`#f0f0f0`
`--text-2`		`#b3b3b3`
`--muted`		`#8c8c8c`
`--primary`		`#2dd4bf`
`--primary-bright`		`#5eead4`
`--on-primary`		`#04241f`
`--danger`		`#f43f5e`
`--warning`		`#ffa726`
`--info`		`#5aa9ff`
`--accent`		`#a98bff`
`--on-danger`		`#2a0c0c`
`--on-warning`		`#241200`
`--on-info`		`#04203f`
`--on-accent`		`#1e1340`

Colour — Désert Dunes (light)

Token		Value
`--bg`		`#fff6ef`
`--surface`		`#ffffff`
`--surface-2`		`#fbeee3`
`--surface-3`		`#ffffff`
`--surface-sunken`		`#f5ece2`
`--surface-active`		`#fff1ec`
`--skeleton`		`#eae5de`
`--line`		`rgba(11,15,26,0.08)`
`--line-strong`		`rgba(11,15,26,0.14)`
`--text`		`#0b0f1a`
`--text-2`		`#323848`
`--muted`		`#5b6475`
`--primary`		`#bf5038`
`--primary-bright`		`#a84731`
`--on-primary`		`#ffffff`
`--danger`		`#c12838`
`--warning`		`#905a08`
`--info`		`#2860cb`
`--accent`		`#684cd6`
`--on-danger`		`#ffffff`
`--on-warning`		`#ffffff`
`--on-info`		`#ffffff`
`--on-accent`		`#ffffff`

Spacing

Step	Value
`1`	`4px`
`2`	`8px`
`3`	`12px`
`4`	`16px`
`5`	`24px`
`6`	`32px`
`7`	`48px`
`8`	`56px`
`9`	`64px`
`10`	`80px`
`1_5`	`6px`
`2_5`	`10px`
`3_5`	`14px`
`4_5`	`20px`
`5_5`	`28px`
`6_5`	`40px`

Radius

Token	Value
`sm`	`6px`
`base`	`8px`
`lg`	`12px`
`pill`	`99px`

Shadow

Token	Value
`sm`	`0 2px 6px -3px rgba(0,0,0,0.35)`
`base`	`0 6px 18px -10px rgba(0,0,0,0.4)`
`lg`	`0 12px 30px -16px rgba(0,0,0,0.45)`
`pop`	`0 16px 40px -12px rgba(0,0,0,0.7)`
`sheet`	`0 0 50px rgba(0,0,0,0.6)`

Type — families

Token	Value
`display`	`Figtree`
`body`	`DM Sans`
`mono`	`JetBrains Mono`

Type — scale (font-size)

Step	Value
`2xs`	`0.6875rem`
`xs`	`0.75rem`
`sm`	`0.8125rem`
`md`	`0.875rem`
`base`	`1rem`
`lg`	`1.125rem`
`xl`	`1.25rem`
`2xl`	`1.5rem`
`3xl`	`clamp(1.75rem,1.607rem + 0.714vw,2.25rem)`
`4xl`	`clamp(2.25rem,2.036rem + 1.071vw,3rem)`
`5xl`	`clamp(2.75rem,2.464rem + 1.429vw,3.75rem)`
`6xl`	`clamp(3.25rem,2.893rem + 1.786vw,4.5rem)`

Type — line-height

Token	Value
`none`	`1`
`tight`	`1.05`
`snug`	`1.3`
`normal`	`1.5`
`relaxed`	`1.7`

Type — tracking (letter-spacing)

Token	Value
`2xs`	`0.01em`
`xs`	`0.005em`
`sm`	`0.0025em`
`normal`	`0`
`tight`	`-0.01em`
`tighter`	`-0.02em`
`wide`	`0.06em`
`caps`	`0.12em`

Type — weight

Token	Value
`regular`	`400`
`medium`	`500`
`semibold`	`600`
`bold`	`700`
`black`	`800`

Type — measure

Token	Value
`base`	`65ch`
`narrow`	`48ch`
`wide`	`75ch`

Motion

Token	Value
`ease`	`cubic-bezier(0.22,1,0.36,1)`
`dur-1`	`120ms`
`dur-2`	`180ms`
`dur-3`	`250ms`

This page is generated from tokens/tokens.json. To change a value, edit the token there (and keep tokens/qazana.tokens.css in sync), then re-run npm run gen.