Roestify Design System
Dark Mode ist der primäre Design-Modus.
Fonts
| Verwendung | Font | Beispiel |
|---|---|---|
| Headlines, UI, Buttons | Inter Tight (font-sans) | text-2xl font-bold tracking-tight |
| Daten, Labels, Badges | IBM Plex Mono (font-mono) | font-mono text-xs |
Regel: Alles mit Zahlen (Temperaturen, Gewichte, IDs) → immer font-mono.
Farben
Backgrounds
| Token | Hex | Verwendung |
|---|---|---|
bg-void | #0A0A0A | Sidebar |
bg-base | #0F0F0F | Seitenhintergrund |
bg-surface | #161616 | Cards, Panels |
bg-surface-hover | #222222 | Hover-State |
Accent (Ember)
| Token | Hex | Verwendung |
|---|---|---|
text-ember | #E8713A | Primary Accent, CTAs |
text-ember-glow | #FF8C4C | Hover |
text-ember-dim | #B85A2E | Muted |
Text
| Token | Hex | Verwendung |
|---|---|---|
text-crema | #F2E6D4 | Primärtext (nie reines Weiß!) |
text-parchment | #C4B49A | Sekundärtext |
text-ash | #5C5C5C | Labels, Placeholder |
Komponenten-Regeln
Primary Button (Ghost-CTA)
<Button
variant="ghost"
className="border border-ember/[0.44] bg-gradient-to-b from-ember/[0.18] to-transparent text-ember hover:bg-ember hover:text-void"
/>
Wichtig
variant="ghost" ist Pflicht. Ohne es wird bg-primary angewandt, was text-ember unsichtbar macht.
Status Badges
<Badge className="font-mono text-[10px] uppercase bg-green-bean/[0.12] text-green-bean" />
Tabellen
- Keine Zebra-Streifen
border-bzwischen Zeilen- Header:
font-mono text-[9px] uppercase text-ash tracking-widest - Row hover:
hover:bg-accent