2026 Design System

Style Guide

2026 editorial-tech design system: oklch() color tokens, fluid typographic scale, and single-family line iconography.

OKLCH Palette & Tokens

01 · OKLCH()

Warm editorial paper surfaces in light mode and deep architectural graphite in dark mode, paired with a single WCAG AA terracotta-copper accent.

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)

Fluid Typographic Scale

02 · CLAMP() SCALE
H1 — Primary Editorial Headline

Albert Sans

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

H2 — Section Heading

Albert Sans

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

Technical / Tabular Metadata

12:45:09

font-variant-numeric: tabular-nums

Components & Surfaces

03 · SURFACES

Actions & Buttons

Clear hierarchy between a single primary action and discreet 1px-bordered secondary actions.

Stack Badges

AstroReactNext.jsTypeScriptTailwindCSS

Compact 1px badges without visual clutter for technologies and tools.

Line Iconography

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

Single family of inline vector line icons. Zero emojis and zero 3D clip-art icons.