# Design system of matthiasfritsch.de

> Version 3.0.0. Dark only. One font family (Inter, with Geist Mono for values), one accent colour, everything built from tokens.

Open the "Let’s play" panel on the site to inspect any element and edit these tokens live.

## Principles

- Components only use tokens. No fixed colours, sizes, spaces or radii, so every token change reaches the whole page.
- Derived values (soft accent, spacing steps) are calculated from other tokens with `color-mix()` and `calc()`.
- Type sizes and layout follow the width of the page container, not the window, so the page stays readable when side panels are open.
- Motion comes from transitions.dev snippets, effects from libraries.dev. Both respect `prefers-reduced-motion`.

## Tokens

### Other

| Token | Value | Note |
|---|---|---|
| `--color-bg` | `#0f0d0c` |  |
| `--color-bg-sunken` | `#090807` |  |
| `--color-surface` | `#161414` |  |
| `--color-surface-raised` | `#201d1d` |  |
| `--color-border` | `#242222` |  |
| `--color-border-strong` | `#373534` |  |
| `--color-text` | `#f2f1f1` | Headlines, strong statements |
| `--color-text-muted` | `#acaaaa` | Body text |
| `--color-text-subtle` | `#767473` | Meta, Labels |

### Color

| Token | Value | Note |
|---|---|---|
| `--color-chrome` | `#060504` |  |
| `--color-accent` | `#ffab86` |  |
| `--color-on-accent` | `#0f0f0f` |  |
| `--color-accent-soft` | `color-mix(in oklab, var(--color-accent) 16%, transparent)` |  |
| `--color-highlight-from` | `#f6e1c4` |  |
| `--color-highlight-to` | `#e4f4dd` |  |
| `--color-stage` | `oklch(0.175 0.009 20)` |  |
| `--color-on-highlight` | `#0f0f0f` | Text auf dem hellen Highlight-Block, bleibt dunkel, auch wenn on-accent hell ist |
| `--color-laser` | `#514c4a` |  |
| `--color-inspect` | `oklch(0.66 0.17 248)` |  |
| `--color-inspect-soft` | `color-mix(in oklab, var(--color-inspect) 14%, transparent)` |  |
| `--color-measure` | `oklch(0.65 0.23 15)` |  |

### Font

| Token | Value | Note |
|---|---|---|
| `--font-sans` | `'Inter Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif` |  |
| `--font-serif` | `'Fraunces Variable', Charter, Georgia, serif` | Fließtext in Posts |
| `--font-mono` | `'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace` |  |

### Type scale

| Token | Value | Note |
|---|---|---|
| `--text-hero` | `clamp(2.25rem, 6.4cqi, 3.25rem)` | 52px |
| `--text-display` | `1.75rem` | 28px, numbers, contact |
| `--text-title` | `1.375rem` | 22px, section titles |
| `--text-lg` | `1.0625rem` | 17px, body text |
| `--text-prose` | `1.25rem` | 20px, Fließtext in Posts (Serif) |
| `--text-base` | `0.9375rem` | 15px, UI |
| `--text-sm` | `0.8125rem` | 13px, Meta |
| `--text-xs` | `0.75rem` | 12px, Labels |
| `--weight-regular` | `400` |  |
| `--weight-medium` | `510` |  |
| `--weight-semibold` | `590` |  |
| `--leading-hero` | `1.08` |  |
| `--leading-title` | `1.3` |  |
| `--leading-body` | `1.6` |  |
| `--leading-prose` | `1.7` |  |
| `--leading-ui` | `1.4` |  |
| `--tracking-hero` | `-0.03em` |  |
| `--tracking-title` | `-0.015em` |  |
| `--tracking-body` | `-0.006em` |  |

### Space

| Token | Value | Note |
|---|---|---|
| `--space-unit` | `4px` |  |
| `--space-1` | `calc(var(--space-unit) * 1)` |  |
| `--space-2` | `calc(var(--space-unit) * 2)` |  |
| `--space-3` | `calc(var(--space-unit) * 3)` |  |
| `--space-4` | `calc(var(--space-unit) * 4)` |  |
| `--space-5` | `calc(var(--space-unit) * 5)` |  |
| `--space-6` | `calc(var(--space-unit) * 6)` |  |
| `--space-8` | `calc(var(--space-unit) * 8)` |  |
| `--space-12` | `calc(var(--space-unit) * 12)` |  |
| `--space-16` | `calc(var(--space-unit) * 16)` |  |
| `--space-24` | `calc(var(--space-unit) * 24)` |  |
| `--space-32` | `calc(var(--space-unit) * 32)` |  |

### Radius

| Token | Value | Note |
|---|---|---|
| `--radius-xs` | `4px` | Kbd, small chips |
| `--radius-sm` | `6px` | Swatches, small inputs |
| `--radius-md` | `10px` | Bubbles, list items |
| `--radius-lg` | `14px` | Cards, panels, blocks |
| `--radius-control` | `999px` | Buttons, tabs, pills, inputs |

### Layout

| Token | Value | Note |
|---|---|---|
| `--width-text` | `720px` |  |
| `--width-wide` | `1120px` |  |
| `--gutter` | `clamp(20px, 5cqi, 24px)` |  |

### Motion

| Token | Value | Note |
|---|---|---|
| `--ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` |  |
| `--duration-fast` | `160ms` |  |
| `--duration-slow` | `700ms` |  |

## Components

| Component | Class | Notes |
|---|---|---|
| Button | `.btn .btn-primary .btn-ghost .btn-sm` | Height from `--space-unit`, radius `--radius-control` |
| Badge | `.pill` with `.count` | Case numbers |
| Chip | `.chip` | Suggestions in the agent |
| Kbd | `.kbd` | Shortcuts |
| Tabs | `.t-tabs .t-tab .t-tabs-pill` | transitions.dev "Tabs sliding" |
| Toggle | `.t-toggle` | transitions.dev "Toggle" |
| Input | `.field`, agent `.composer` | |
| Chat bubble | `.msg .bubble` | Bot avatar from libraries.dev/bots |
| Card | `.card .card-media` | Line illustration with accent, layers lift on hover |
| Highlight block | `.block .block--light .block--accent` | Linear-style numbers |
| List row | `.row` + `.list-item` | One hover for every clickable list item |
| Media row | `.talk` + `.list-item` | Talks and interviews |