For developers

How to use the tokens and Tailwind classes in code.

Where things live

Design system folders
Folder	Contents
`src/design-system/tokens/`	Token sources in DTCG JSON: primitives, semantic (light and dark) and density.
`src/design-system/tokens/build/`	Generated CSS, Tailwind theme, tokens.json and the contrast report. Never edit by hand.
`src/design-system/components/`	Components. None built yet.
`src/app/design-system/`	These docs pages.

Commands

Token commands
Command	What it does
`npm run tokens`	Builds the tokens and checks contrast. Fails if a pair fails. Runs before every build.
`npm run tokens:palette`	Regenerates the color ramps from the brand accent.

Using tokens

Use the Tailwind classes in the ds namespace. Primitive colors have no classes, so components can only use semantic colors.

<div className="rounded-ds-lg border border-ds-border-secondary bg-ds-surface-1 p-ds-16">
  <h3 className="text-ds-16 font-ds-600 text-ds-content-primary">Title</h3>
  <p className="text-ds-14 text-ds-content-secondary">Supporting text</p>
</div>

Outside Tailwind, use the CSS variables, for example var(--ds-color-content-primary). The token table lists every variable.

Theme and density

Dark values apply when <html data-theme="dark"> is set. The site's theme toggle sets it. Compact density applies inside data-density="compact". Controls use control.height, so they change size with density.