Designsystem 2026

Stilhandbuch

Editorial-Tech-Designsystem 2026: OKLCH-Farbtokens, fließende Typografie und Linien-Ikonografie.

OKLCH-Palette & Tokens

01 · OKLCH()

Warme Papieroberflächen im hellen Modus und tiefer Graphit im dunklen Modus mit einem einzigen Terrakotta-Kupfer-Akzent.

Acento Único (--accent)

Light:oklch(0.53 0.175 36)
Dark:oklch(0.72 0.16 40)

Superficies Modo Claro

--bg-base:oklch(0.985 0.003 85)
--bg-surface:oklch(0.996 0.002 85)

Superficies Modo Oscuro

--bg-base:oklch(0.13 0.006 260)
--bg-surface:oklch(0.165 0.007 260)

Fließende Typografie-Skala

02 · CLAMP() SCALE
H1 — Hauptüberschrift

Albert Sans

clamp(2rem, 3vw + 0.85rem, 3.25rem)

H2 — Abschnittsüberschrift

Albert Sans

clamp(1.5rem, 2vw + 0.75rem, 2.25rem)

Technische / Tabellarische Metadaten

12:45:09

font-variant-numeric: tabular-nums

Komponenten & Oberflächen

03 · SURFACES

Schaltflächen

Klare Hierarchie zwischen einer primären Aktion und dezenten sekundären Aktionen.

Stack-Badges

AstroReactNext.jsTypeScriptTailwindCSS

Kompakte 1px-Badges für Technologien und Werkzeuge.

Linien-Ikonografie

04 · 1.75PX STROKE
arrow-up-right
cloud-sun
clock
graduation-cap
compass
code
layers
mail

Einheitliche Familie von Vektor-Liniensymbolen. Keine Emojis und keine 3D-Icons.