Semantische vs. rohe Farben
Ein rohes Farb-Token benennt die Farbe selbst: --blue-500, --gray-900. Ein semantisches Token benennt die Aufgabe, die die Farbe übernimmt: --primary, --background, --muted-foreground. Komponenten können dann die tatsächlichen Brand-Farben ignorieren. Ein Button, der mit bg-primary text-primary-foreground gestylt ist, funktioniert mit Salbeigrün, Hot Pink oder einem Dark Theme, weil die Rolle gleich bleibt, während sich ihr Wert ändert.
Dies ist das Modell, das shadcn/ui populär gemacht hat und auf dem Tailwind-Theming aufbaut. Mit semantischen Tokens kann sich ein Re-Theming einer App auf einen einzigen :root Block beschränken. Hardcodierte Klassen wie bg-gray-900 und text-white machen dieselbe Änderung zu einer Codebase-weiten Suche.
Die Foreground-Paarungsregel
Die meisten Basisrollen kommen mit einer gepaarten -foreground Rolle für Text oder Icons auf dieser Oberfläche: --primary / --primary-foreground, --card / --card-foreground, --muted / --muted-foreground. Nutze --primary-foreground auf --primary, anstatt zu hoffen, dass der Standard-Foreground genug Kontrast bietet. Jedes Paar muss dennoch in beiden Modi geprüft werden.
Die 28 Rollen, die ein vollständiges System benötigt
Eine minimale Drei-Farben-Palette lässt 25 Entscheidungen undefiniert: Hover-Zustände, gedämpfter Text, Borders, Focus-Ringe, Chart-Serien, Dark Mode. Ein vollständiges System benennt sie alle. Identity Forge Kits definieren diese 28 Rollen, gruppiert nach ihrer Funktion, für Light und Dark:
- Surfaces:
background/foreground,card/card-foreground,popover/popover-foreground. Die Seite, erhöhte Panels und schwebende Layer, jeweils mit ihrer lesbaren Textfarbe. - Brand & Emphasis:
primary/primary-foreground,secondary/secondary-foreground,accent/accent-foreground. Die Hauptaktion, die unterstützende Aktion und das Highlight. - Quiet & Neutral:
muted/muted-foreground. Dezente Hintergründe und sekundärer Text. - State:
destructive/destructive-foreground,success/success-foreground,warning/warning-foreground. Fehler, Bestätigungen und Warnungen. - Form & Focus:
border,input,ring. Trennlinien und Outlines, Formularfelder und der Fokus-Indikator. - Data:
chart-1,chart-2,chart-3,chart-4,chart-5. Fünf verschiedene, markenkonforme Serienfarben, damit Charts nicht auf eine generische Standardpalette zurückgreifen müssen.
Warum fünf Chart-Farben wichtig sind
Datenvisualisierung ist der Bereich, in dem unterdefinierte Systeme am sichtbarsten scheitern: ein Dashboard mit drei Brand-Farben und einem zufälligen Regenbogen für sein Balkendiagramm. Die Definition von chart-1 bis 5 im Vorfeld sorgt dafür, dass Grafiken in derselben visuellen Sprache wie der Rest der App bleiben.
Sieh dir die Rollen in einem echten Kit an
Unten siehst du das kostenlose ambient-sage Kit, das vollständig aus diesen Tokens gerendert wurde. Die Farbmuster-Reihe besteht aus --primary, --secondary, --accent und den fünf Chart-Rollen; der Button nutzt --primary mit --primary-foreground; die Oberflächen nutzen --background, --card und --muted. Nichts hier ist eine hardcodierte Farbe:
Ambient Sage
Live renderRendered from the kit's actual tokens, fonts, and treatments
Dashboard
Welcome back — here's how AmbientSage is performing today.
Active users
15.1k
+5%Trending up this month
vs. previous 30 days
MRR
$49.1k
+3%Strong recurring growth
Net of churn
Retention
89%
+2%Engagement above target
Rolling 28-day window
NPS
69
+3Meets growth projections
Survey · n=1,204
Total revenue
Last 12 months
$49.1k+18.2%
Recent sales
You closed 265 deals this month.
Alex Rivera
alex@ambientsage.com
Mira Okonkwo
mira@ambientsage.com
Jonas Feld
jonas@ambientsage.com
Sana Qureshi
sana@ambientsage.com
Theo Lindgren
theo@ambientsage.com
Recent transactions
View all| Customer | Status | Date | Amount |
|---|---|---|---|
AR Alex Rivera Founder & CEO | Paid | 2m ago | $1,999.00 |
MO Mira Okonkwo Head of Product | Pending | 1h ago | $39.00 |
JF Jonas Feld Design Lead | Processing | 3h ago | $299.00 |
SQ Sana Qureshi Engineering Lead | Paid | Yesterday | $99.00 |
TL Theo Lindgren Brand Director | Refunded | 2d ago | $2,400.00 |
Typography
Plus Jakarta Sans
Color system
28 semantic roles, light + dark
Agent outputs
DESIGN.md, CSS, Tailwind, shadcn
Hol dir ein vollständiges Token-Set
Du kannst alle 28 Rollen von Hand definieren, aber es ist mühsam, Light und Dark im Gleichgewicht und barrierefrei zu halten. Jedes Identity Forge Kit liefert sie vollständig in beiden Modi aus, exportierbar als CSS-Variablen, Tailwind v3/v4 @theme, als shadcn Registry Item oder DTCG/W3C JSON. Der schnellste Weg, ein vollständiges Set in ein shadcn/ui Projekt einzubinden:
npx shadcn add https://identityforge.io/r/ambient-sage.jsonDie Tokens sind zudem die andere Hälfte eines DESIGN.md: die Werte, auf die sich das geschriebene Briefing bezieht. Zusammen ist es das, was du einem Coding Agent gibst, damit dessen UI kohärent bleibt.
FAQ
Was sind semantische Farb-Tokens?
Farbvariablen, die nach ihrer Rolle statt nach ihrem Farbton benannt sind: `--primary`, `--background`, `--muted-foreground` anstelle von `--blue-500`. Komponenten werden gegen den Rollennamen gestylt, sodass das Wechseln von Themes oder der Wechsel in den Dark Mode niemals eine Bearbeitung der Komponenten erfordert.
Wie viele Farb-Tokens benötigt ein Design System?
Identity Forge verwendet 28 semantische Rollen: Oberflächen mit ihren Foregrounds, Brand- und Muted-Rollen, Statusfarben, Formularrollen und fünf Chart-Farben. Jede Rolle hat einen Light- und einen Dark-Wert.
Was ist die -foreground Konvention?
Die meisten Basisrollen werden mit einer `-foreground` Rolle gepaart für den Text oder die Icons, die auf dieser Oberfläche platziert werden: `--primary` mit `--primary-foreground`. Die Paarung garantiert lesbaren Kontrast in Light und Dark ohne Raten.
Wie exportiere ich ein vollständiges semantisches Token-Set?
Jedes Identity Forge Kit exportiert seine 28 Rollen (Light + Dark) als CSS-Variablen, Tailwind v3/v4 @theme, shadcn Registry Item oder DTCG/W3C JSON. Für shadcn/ui installiert `npx shadcn add https://identityforge.io/r/<slug>.json` sie direkt.