Tokens.

A token is a named decision. --primary is the name; #1b3644 is the value it happens to hold today. You type bg-primary, never bg-[#1b3644] — so the two navies below paint identically, but only one is a token. Name the role and a rebrand becomes one edit, dark mode follows for free, and a Figma variable maps straight to a class.

One token, end to end. A Figma variable becomes a value in semantic.css, a bridge in theme.css turns that value into a utility, you type the utility in JSX, and the pixel is painted. Two files do the work: semantic.css holds the values; theme.css is the @theme inline bridge — the half that actually makes the utility exist. Ship both, or components render unstyled.

A token is one definition with two values. The .dark class remaps the variables underneath; the spelling never changes — bg-background is bg-background in both modes. So you never branch on theme in markup: the token layer owns the switch. For a dark panel inside a light page, reach for the Surface component (bgColorVariants) — it remaps the foreground tokens too, so text stays legible.

Three steps, once per project. Map the @alix registry in components.json, install the tokens item, then import it after Tailwind. Only then add components — the theme utilities they use don't exist until the bridge is present. Alix Sans loads separately, via @font-face at weight 400 (the house weight); it is not a token.

{
  "registries": {
    "@alix": "https://your-registry.example.com/r/{name}.json"
  }
}

npx shadcn@latest add @alix/tokens

@import "tailwindcss";
@import "./tokens/index.css";

npx shadcn@latest add @alix/button @alix/textAndMediaBlock

The complete colour surface, by group. Every row: the CSS variable, the Tailwind utility you type, the resolved light and dark values, and its role. Reach for the role — background, muted-foreground, chart-1 — never a raw hex.

Hover, active, and subtle fills are derived with color-mix — a percentage of the base colour blended over the surface, so a control's states read as designed on any ground instead of bleeding through an alpha. Because color-mix resolves at use time, each recomputes correctly under .dark.

Two gradient grounds and the focus treatment. The gradients are custom @utility classes, not bg-* colours. The focus ring ships as one @utility so every control opts in with a single class — outline reset plus the visible ring, tokenised.

Alix Sans at weight 400 throughout — hierarchy comes from size and colour, never weight. Display headings are fixed utilities; the -r variants step down on mobile and back up at md (768px). The text scale is the reading scale. Two font stacks back it all.

One gap vocabulary drives Stack, Inline, and Grid — each named step maps to a Tailwind gap-* class you type. Page layout is deliberately responsive utility classes, not variables (the gutter and rhythm grow with the viewport at the breakpoints below). The container scale backs both content width and block min-height.

These names live in the Figma Style Guide as designer vocabulary — but they do NOT ship as CSS variables or utilities. The layout behaviour is expressed as the responsive classes in 0.9 instead. Documented here so the shared language is honest, without pretending a flat value ships.

The radius scale derives from a single --radius: 0px knob; every step clamps to a sharp 0 corner (only xl lifts to 4px, and rounded-full is reserved for where round carries meaning). Elevation is the exception too — six shadow steps, most surfaces sit on a hairline instead. See the Shape and Elevation chapters for the full argument.

The token layer only pays off if you go through it. Type the role, stay on the scale, and never let markup decide the theme.