> ## Documentation Index
> Fetch the complete documentation index at: https://guide.oxom.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ODS Tokens

> Farben, Typografie, Spacing, Radii und Motion-Regeln.

Die Token-Wahrheit liegt in `apps/web/app/globals.css`. `apps/brand` zieht diese Werte als ODS-Referenz nach.

## Farben

ODS nutzt die warme Web-Palette als Quelle. Farbe wird sparsam und funktional eingesetzt.

| 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           |

## Opacity-Regeln

| 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%  |

## Typografie

| 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                |

## Spacing

| 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             |

## Radii

| 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     |

## Motion

ODS nutzt ruhige, kurze Bewegungen. Standard-Easing:

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
export const EASE = [0.22, 1, 0.36, 1] as const
```

Patterns:

| 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`         |

Animationen müssen `prefers-reduced-motion` respektieren.