Element · Foundations
Zwei Skalen, sechs Kernwerte.
Granit trägt. Nordoliv zeigt an. Paper statt Reinweiß, Nacht statt Tiefschwarz. Rollen sind Aliase, keine neuen Bunttöne. Saga ist Oliv-500 für Legacy.
Kern
Paper
paper
Granit
granit-500
Nacht
granit-950
Oliv hell
oliv-300
Oliv
oliv-500
Oliv tief
oliv-700
Granit
50
granit-50
100
granit-100
200
granit-200
300
granit-300
400
granit-400
500
granit-500
600
granit-600
700
granit-700
800
granit-800
900
granit-900
950
granit-950
Nordoliv
50
oliv-50
100
oliv-100
200
oliv-200
300
oliv-300
400
oliv-400
500
oliv-500
600
oliv-600
700
oliv-700
800
oliv-800
900
oliv-900
950
oliv-950
Rollen · Paper / Nacht
| Rolle | Paper | Nacht | Notiz |
|---|---|---|---|
| Hintergrund | paper | granit-950 | Die Fläche. Kein Reinweiß, kein Reinschwarz. |
| Fläche 2 | granit-50 | granit-900 | Sidebar, Karte. Ohne Schatten. |
| Text | granit-950 | paper | Primary. |
| Text secondary | granit-700 | paper/80 | Lead, Fließtext leiser. |
| Text muted | granit-500 | granit-500 | Label, Caption-Meta. |
| Kante | granit-200 | paper/10 | 1px. Divider, Tag, Input später. |
| Akzent | oliv-500 | oliv-300 | Zeigt an. Nie als Ruhefläche. |
Elevated gibt es nicht. Ohne Schatten ist Höhe nur z-index, nicht Fill.
Signal · Punkt oder Icon, kein Fill
Success
signal-success
Oliv-500. Punkt oder Icon, kein Fill.
Warning
signal-warning
Oliv-300. Punkt oder Icon.
Error
signal-error
Granit-800. Kein Rot.
Info
signal-info
Granit-500. Punkt oder Icon.
ASCII
| Variable | Wert | Rolle |
|---|---|---|
| --hero-bg | #1a1919 | Granit-950, Fläche |
| --hero-fg | #c2c095 | Oliv-300, Zeichen |
| --hero-glow | #8a8758 | Oliv-500, Planetensaum |
Utilities
| Klasse | Einsatz |
|---|---|
| bg-paper / bg-surface | Hintergrund Paper |
| bg-granit-950 / bg-nacht | Hintergrund Nacht |
| bg-granit-50 / bg-surface-2 | Zweite Fläche auf Paper |
| bg-granit-900 / bg-nacht-2 | Zweite Fläche auf Nacht |
| text-granit-950 / text-fg | Text Primary auf Paper |
| text-paper / text-fg-inverse | Text Inverse / auf Nacht |
| text-granit-500 / text-fg-muted | Text Muted, Label |
| text-oliv-500 / text-accent | Akzent, Proof, Signal Success |
| bg-signal-success | Indikator Erfolg (Punkt, Icon) |
| bg-signal-warning | Indikator Hinweis (Oliv-300) |
| bg-signal-error | Indikator Fehler (Granit-800) |
| bg-signal-info | Indikator Info (Granit-500) |
| text-saga / bg-saga | Alias von oliv-500, Legacy |
| border-granit-200 / border-border | Kante auf Paper |
| border-paper/20 | Kante auf Nacht |
| font-geist | Stimme |
| font-mono | Beleg, Label, Code |