# 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](/en/docs/apps/theming) and the **hands-on step** in [03 · Theme and brand](/en/docs/tutorial/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 the `theme 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](/en/docs/tutorial/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.

{% callout type="info" %}
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](/en/docs/tutorial/03-theme-and-brand).
{% /callout %}

---

Next: the versions that coordinate these packages, in [Versions and channels](/en/docs/reference/versions-and-channels).