# Design Tokens

> The same author → compile → runtime pipeline that owns your data also owns your look.

React API Stack owns the **look** of your UI the same way it owns the data: a TypeScript-first source of truth, compiled to platform outputs, applied by a runtime that needs no per-component wiring. It is built on the industry-standard [W3C Design Tokens (DTCG)](https://tr.designtokens.org) format.

## The simple entry point

You don't need to know what a "token" is. State a few decisions in plain values and get a complete design system — colour scales, semantic tokens, and light and dark modes:

```ts title="tokens/theme.ts"
import { defineTheme } from "rastack/tokens";

export default defineTheme({
  brand: "#4F6BFF",
  radius: "medium",
  font: "Inter",
});
// → derived colour scales, semantic tokens, light + dark modes — all overridable
```

## Full control

For full control, author tokens with `defineTokens(...)` and `t.*`, or as canonical DTCG JSON. `rastack tokens` compiles them to three outputs:

| Output | Contents |
| --- | --- |
| `tokens.css` | CSS custom properties + per-mode selector scopes |
| `tokens.ts` | a typed `theme` tree + a `TokenPath` union |
| `tokens.rastack.json` | the resolved canonical DTCG document |

## Aliases resolve like foreign keys

Aliases (`ref("color.brand.500")`) resolve transitively and are preserved as `var(--…)` so mode overrides cascade. The resolver rejects dangling aliases and alias cycles — mirroring the FK and circular-dependency checks on the data side.

> **Tip:** Run `rastack design` (aka `ras design`) for a dependency-free studio that showcases the system and lets you inspect and edit token values live, saving back to the DTCG source.

---

_Source: [https://reactapistack.com/docs/design-tokens](https://reactapistack.com/docs/design-tokens) · Full docs as one file: [llms-full.txt](https://reactapistack.com/llms-full.txt)_