Design System
/
Design Tokens
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) format. 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:
1
import
{
defineTheme
}
from
"rastack/tokens"
;
3
export
default
defineTheme
({
8
// → derived colour scales, semantic tokens, light + dark modes — all overridable
For full control, author tokens with defineTokens(...) and t.*, or as canonical DTCG JSON. rastack tokens compiles them to three outputs:
CSS custom properties + per-mode selector scopes
a typed theme tree + a TokenPath union
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.
Build with AI
Every page is available as clean Markdown for LLMs and coding agents. Point one at the files below to build on top of React API Stack.
React API Stack · alpha · built to scale to millions