Theme tokens
The quick reference for the token system: the families that make up the Design System and the CSS variables the theme engine writes from the manifest. This is the reference side of the topic — the concept lives in Design System and theming and the hands-on step in 03 · Theme and brand.
Read this page in two layers:
- (a) Fayz's official Design System — the reference artifact (
design/fayz-tokens.css) that defines the full taxonomy of the eight families. This is the target vocabulary. - (b) What the runtime applies today — the 3 manifest keys (
brand,radius,mode) and the CSS variables thetheme engine(@fayz-ai/saas) derives from them. This is the live subset.
(a) The eight families — official Design System
Canonical values from the Fayz Design System, as a reference taxonomy.
1 · Brand + tints
| Token | Value | Role |
|---|---|---|
ignite | #2FDD4B | Signature green — the brand hit. |
ignite-deep | #119A27 | Dark green — brand fields and blocks. |
ignite-soft | #DFFBE3 | Light tint — selection and hover halos. |
ignite-bg | #F2FDF4 | Pale tint — surface accents in light mode. |
2 · Neutral scale
| Token | Value | Token | Value | |
|---|---|---|---|---|
n-0 | #FFFFFF | n-500 | #8A8A82 | |
n-50 | #FAFAF8 | n-600 | #5C5C57 | |
n-100 | #F4F4F1 | n-700 | #3D3D3A | |
n-200 | #EAEAE5 | n-800 | #26262B | |
n-300 | #D9D9D2 | n-900 | #131816 | |
n-400 | #B8B8AF | n-1000 | #0B0F0E |
3 · Secondaries (use sparingly)
| Token | Value |
|---|---|
yellow | #F2DB0F |
cyan | #17C1EA |
coral | #FF6B5C |
magenta | #E81073 |
4 · Semantics per mode
| Role | Light | Dark |
|---|---|---|
| Background | paper #FAFAF8 | black #0B0F0E |
| Surface | paper-2 #F4F4F1 | n-900 #131816 |
| Border | rgba(11,15,14,0.06) | rgba(255,255,255,0.08) |
| Text | near-black | white |
| Muted text | n-600 | n-400 |
5 · Typography
| Token | Family | Use |
|---|---|---|
font-display | Outfit | Headings and hero. |
font-logo | Sora | Wordmark only. |
font-body | DM Sans | Body. |
font-mono | JetBrains Mono | Code. |
6 · Spacing
A 4px grid: 4 · 8 · 12 · 16 · 24 · 32 … — the mesh everything aligns to.
7 · Radius
| Token | Value | Token | Value | |
|---|---|---|---|---|
xs | 4px | lg | 22px | |
sm | 8px | xl | 32px | |
md | 14px | pill | 9999px |
8 · Elevation + motion
| Token | Value |
|---|---|
shadow-sm | 0 1px 3px rgba(11,15,14,.06)… |
shadow-md | 0 4px 12px rgba(11,15,14,.06)… |
shadow-lg | 0 12px 32px rgba(11,15,14,.08)… |
shadow-glow | green halo 0 0 0 4px rgba(47,221,75,.15)… |
ease-out | cubic-bezier(0.22, 1, 0.36, 1) |
dur-base | 240ms |
Ninth piece — glass + aurora. Named recipes, not loose colors: the frosted glass (rgba(255,255,255,0.55) + blur 24px in light mode) and the aurora (the green radial-gradient that bleeds behind the hero). Each one packs background, border, blur and glow into a single token.
(b) What the runtime applies today
In the manifest you declare three keys. The values and the personality of each are detailed in 03 · Theme and brand.
| Key | Values | Derives |
|---|---|---|
brand | blue violet green orange red pink teal | primary, ring, accent (hue −50°) and the optional sidebar. |
radius | none sm md lg full | buttons, cards, inputs and modals together. |
mode | light dark system | the color strategy. |
From there, the theme engine (createTheme / applyTheme, in @fayz-ai/saas) writes every value as a CSS variable on the document:
| CSS variable | Comes from |
|---|---|
--primary | the brand (primaryForeground white). |
--ring | the brand — focus ring. |
--accent | the brand with the hue rotated −50°. |
--sidebar, --sidebar-* | optional colored rail (border −12% lightness, active item −15%, icons hue 35% 82%). |
--button-radius | (along with --card-radius, --input-radius, --modal-radius) from the radius key. |
--font-family | from the curated base preset. |
--shadow-sm / --shadow-md / --shadow-lg | from the curated base preset. |
Everything that doesn't come from the brand — neutrals, surfaces, success/warning/destructive semantics, typography and shadows — comes from a curated base preset (the classic admin) that the brand slots into.
The eight families in (a) are the target taxonomy; the manifest exposes the subset in (b) today. Free HSL color, the 11 font families, the shadow levels and whole presets already exist in the engine, behind the platform runtime — exposing them in the manifest is the next step for the theme contract. Context in Beyond the 3 keys.
Next: the versions that coordinate these packages, in Versions and channels.