Ein Token ist ein Versprechen zwischen Design und Engineering. Lebt er nur in Figma, ist es kein System. Wir benennen nach Nutzung, nicht nach Dekoration — Spacing, Typo und Surface-Tokens mappen auf das, was shipped.
Handoff-Gesundheit (letztes Audit)
- 94% — Tokens im CSS genutzt (vs. Figma-Quelle)
- 12 — verwaiste Namen entfernt (ein Cleanup-PR)
- <1d — neuer Token bis main (Median)
Naming-Regeln, die wir erzwingen
| Ebene | Beispiel | Anti-Pattern |
|---|---|---|
| Primitive | --gray-500 | --almost-black |
| Semantic | --border | --line-soft-2 |
| Component | --header-bg | --navBlue |
Dieselben Namen shippen
// tokens.ts
export const space = {
1: "0.25rem",
2: "0.5rem",
3: "0.75rem",
4: "1rem",
6: "1.5rem",
8: "2rem",
} as const;
export const color = {
background: "var(--background)",
foreground: "var(--foreground)",
border: "var(--border)",
muted: "var(--muted-foreground)",
} as const;
// Figma plugin exports the same keys — no rename pass.
Docs gehören zum Produkt. Findet ein neues Teammitglied die Regel nicht, existiert sie nicht.
“Lebt es nur in Figma, ist es kein System.”