Design-System-Briefing — mseemann.io (Jekyll)

Für das umsetzende Team. Eine Seite. Bei jedem PR durchgehen.

Dieses Dokument ist die verbindliche Kurzfassung. Die volle Begründung steht in readme.md des Design Systems; die fertigen Dateien liegen in site-build/ (siehe site-build/README.md).

0 · Reihenfolge der Wahrheit

site-build/ → 1:1 ins Repo kopieren (gleiche Pfade). Das ist die Umsetzung, nicht nur Referenz.
css/main.scss → Block „TOKENS” → einzige Quelle für Farben, Type, Abstände. Nur hier ändern.
readme.md (Design System) → das Regelwerk für alles, was nicht im Code steht (Voice, Motion, Cards).
Original-Repo github.com/mseemann/mseemann.github.io → Section-Struktur, Liquid-Variablen, deutsche Copy.

1 · Tokens — die eine Hauptregel

Nur gegen semantische Tokens entwickeln, nie gegen Rohwerte. ✅ var(--accent), var(--surface-base), var(--text-body), var(--border-card), var(--hero-glow) ❌ keine Hex-Codes im Markup/SCSS, kein #5dd0df, kein rgba(255,255,255,.85) von Hand.
Neue Farbe nötig? Erst als Token oben in main.scss definieren, dann verwenden.
Beide Themes mitdenken: jedes Token ist doppelt definiert — dunkel in :root, hell in :root[data-theme="light"]. Wer ein Token hinzufügt, pflegt beide Werte.

2 · Theme / Umschalter

Hell/Dunkel läuft über ein Attribut: <html data-theme="light"> ↔ <html> (dunkel = Default).
No-Flash-Inline-Script im <head> und der Vanilla-Toggle in assets/js/theme.js bleiben — kein React, kein zusätzliches Framework einbauen.
Wahl wird in localStorage gemerkt, Überblendung 0,35 s. Nicht „optimieren” wegnehmen.

3 · Farbe (Marken-Kern)

Flächen = Navy-Ramp (dunkel) bzw. Paper-Ramp (hell). Teal ist der Akzent.
Bright Teal #5dd0df = Highlights (Zahlen, Links, Card-Titel). Deep Teal #1a6b78 = Aktionen (Buttons).
Teal→Violett-Gradient (--gradient-accent) nur als geclippter Text / dünne Akzente — nie als Flächen-Hintergrund.
Violett (#a78bfa) existiert ausschließlich als Gradient-Partner. Sonst nirgends.

4 · Typografie

Inter für alles Sichtbare (400–800). Headings schwer (700–800), eng (−0.02 bis −0.03em).
Eyebrow-Labels: UPPERCASE, 0.78rem, 600, letter-spacing +0.07em, in Teal — über jeder Section-H2.
Body luftig: ~0.95–1.15rem, line-height 1.7 (1.75 für Fließtext).
JetBrains Mono nur für Code/technische Labels. Self-hosted — kein Google-Fonts-<link> wieder einbauen.

5 · Layout & Spacing

Lesespalte max. 960px (640px für Lead-Copy). Das ist ein fokussierter One-Pager, kein breites Dashboard.
Vertikaler Section-Rhythmus 5rem (--section-v).
Grids: repeat(auto-fit, minmax(260–280px, 1fr)), ~1.25rem gap.

6 · Cards & Komponenten

Card = --surface-card-Fill + 1px Hairline --border-card + 10px Radius.
Teal-Accent-Edge ist das Erkennungsmerkmal: 3px oben (Services) bzw. 4px links (Agenturen/Investoren).
Radien: 6px Chips · 8px Buttons/Inputs · 10px Cards · 16px Feature-Panels · 50% Avatare. Keine Voll-Pills außer Mini-Chips.

7 · Motion & Hover

Card-Hover = −3px lift + Teal-Glow (--glow-teal) + Border → Teal. Über 0.15s.
Button-Hover = Teal dunkelt (#1a6b78→#135663) + −1px. 0.1–0.2s.
Schnell & subtil. Kein Bounce, keine Endlos-Loops, kein Parallax.

8 · Voice & Copy (genauso wichtig wie das Visuelle)

Sprache: Deutsch. Register: formelles „Sie”, niemals „du”.
Ich-Form (eine Person, keine Firma-„Wir”). Tonalität: pragmatisch, senior, ruhig — kein Hype, keine Buzzwords.
Keine Emojis. Nie. Das einzige wiederkehrende Glyph ist „→” — jeder Link/CTA endet darauf.
En-Dash „–” für Einschübe; „&” in Section-Namen („Artikel & Einblicke”).
Texte/Links als Liquid-Variablen lassen (https://medium.com/@mseemann.io usw.) — nicht hart kodieren.

Definition of Done (PR-Gate)

Mergen nur, wenn alle zutreffen: nur semantische Tokens · beide Themes gepflegt · 960px-Spalte · Eyebrow UPPERCASE +0.07em · Card mit Teal-Edge · Hover = Glow + −3px · kein Google-Fonts-Link · keine Emojis · jeder Link auf „→” · formelles „Sie” + Ich-Form · main.scss-Front-Matter (---) intakt.