foundations
Farbe
Schwarz, Weiß und ein Rot. Farbe trägt in Zeit keine Bedeutung außer einer: Rot ist der Akzent des Systems und bleibt Marke, Eyebrow und Fokus vorbehalten.
01 — Primitive
Fünf Werte
Die Primitive sind die einzigen Farbwerte im System. Alles andere referenziert sie.
02 — Semantik
Tokens statt Farben
Komponenten binden ausschließlich semantische Tokens. So bleibt der Kontext austauschbar: dieselbe Card funktioniert auf Weiß, Grau und Schwarz.
| Token | Wert | Verwendung |
|---|---|---|
| semantic/bg/light | #ffffff | Seitenhintergrund, Cards, Inputs |
| semantic/bg/subtle | #f5f5f5 | Alternierende Sektionen, Demo-Flächen |
| semantic/bg/dark | #000000 | Hero, Footer, Button-Bühne |
| semantic/bg/accent | #e5000f | Logo-Mark, Eyebrow-Strich, Grafik-Akzente |
| semantic/text/on-light | #000000 | Primärtext auf hellen Flächen |
| semantic/text/on-light-secondary | #6b6b6b | Fließtext, Beschreibungen, Meta |
| semantic/text/on-dark | #ffffff | Primärtext auf Schwarz |
| semantic/text/on-dark-secondary | #a3a3a3 | Sekundärtext auf Schwarz |
| semantic/text/accent | #e5000f | Eyebrows, aktiver Nav-Punkt |
| semantic/border/on-light | #e5e5e5 | Card-Rahmen, Trennlinien hell |
| semantic/border/on-dark | #404040 | Trennlinien auf Schwarz |
| semantic/border/strong | #000000 | Inputs, Badges, Chips |
03 — Regeln
Drei Regeln für Farbe
- Rot ist nie Fläche einer Interaktion. Kein roter Button, kein roter Fehlerrahmen. Rot zeigt, es fordert nicht.
- Zustände laufen über die Grauskala: Hover und Pressed verschieben Helligkeit, nicht den Farbton.
- Jede Farbe kommt aus einem Token. Hex-Werte stehen nur in dieser Tabelle, nie in einer Komponente.