Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Farben, Typografie, Spacing, Radii und Motion-Regeln.
apps/web/app/globals.css. apps/brand zieht diese Werte als ODS-Referenz nach.
| Token | Light | Dark | Verwendung |
|---|---|---|---|
background | hsl(30 33% 94%) | oklch(0.145 0 0) | Seitenhintergrund |
foreground | hsl(0 68% 6%) | oklch(0.985 0 0) | Headlines, primärer Text |
card | hsl(35 37% 90%) | oklch(0.205 0 0) | Panels, Popover |
muted | hsl(37 24% 85%) | oklch(0.269 0 0) | Sekundäre Flächen |
muted-foreground | hsl(0 20% 30%) | oklch(0.708 0 0) | Body-Text, Labels |
border | hsl(37 25% 82%) | oklch(1 0 0 / 10%) | Trennlinien |
primary | hsl(0 68% 6%) | oklch(0.87 0 0) | Buttons, Links |
accent | hsl(178 98% 39%) | oklch(0.371 0 0) | Hover-Zustände, Fokus |
electric | #E8634A | #E8634A | bewusster Akzent |
destructive | hsl(0 72% 51%) | oklch(0.704 0.191 22.216) | Fehlerzustände |
| Kontext | Klasse | Wert |
|---|---|---|
| Section-Divider | border-border/40 | 40% |
| Card-Rahmen | border-border/60 | 60% |
| Dekorative Linien | bg-border/80 | 80% |
| Header-Border | border-border/40 | 40% |
| Grid-Separator | bg-border/40 | 40% |
| Rolle | Größe | Gewicht | Einsatz |
|---|---|---|---|
| Logo | 11px | 600 | Monospace, uppercase |
| Label / Overline | 11px | 400 | Sektionen, Meta-Ebene |
| Meta / Zähler | 12px | 500 | Tabular-nums, Zähler |
| Body Small | 14px | 400 | Beschreibungen |
| Body | 16px / 18px | 400 | Fließtext |
| Headline 3 | 18px | 600 | kleine Titel |
| Headline 2 | 30px / 36px | 600 | Section-Headlines |
| Headline 1 | 36px / 48px / 56px | 600 | Hero only |
| Statement | 20px / 24px | 500 | Manifest-Sätze |
| Quote | 24px / 30px / 36px | 500 | Zitate |
| Wert | Label | Einsatz |
|---|---|---|
| 4px | 1 unit | kleinste Einheit |
| 8px | 2 units | gap-2 |
| 12px | 3 units | gap-3 |
| 16px | space-y-4 | Label zu Headline |
| 20px | space-y-5 | Body-Absätze, Mobile Padding |
| 24px | space-y-6 | Headline zu Body |
| 32px | Desktop Padding | Container |
| 40px | p-10 | Grid-Cell Padding |
| 48px | space-y-12 | große Abschnitte |
| 80px | py-20 | Hero Padding |
| 128px | py-32 | Desktop Sections |
| Name | Wert | Verwendung |
|---|---|---|
sm | 6px | kleine Elemente |
md | 8px | Standard-Controls |
lg | 10px | Basisradius |
xl | 14px | größere Flächen |
2xl | 18px | große Panels |
full | ∞ | Pills, Kreise |
export const EASE = [0.22, 1, 0.36, 1] as const
| Pattern | Dauer | Einsatz |
|---|---|---|
| Reveal | 550ms | Content beim Erscheinen |
| Hero Stagger | 500-550ms | gestaffelte Hero-Elemente |
| Header | 500ms | Mount-Animation |
| Image | 700ms | Bild-Intro |
| Zitat-Wechsel | 450ms | AnimatePresence |
prefers-reduced-motion respektieren.Was this page helpful?