Sistema de Diseño 2026

Guía de Estilo

Sistema de diseño editorial-tecnológico 2026: tokens en oklch(), escala tipográfica fluida e iconografía de línea.

Paleta y Tokens OKLCH

01 · OKLCH()

Superficies neutras cálidas en modo claro y grafito profundo en modo oscuro, acompañadas de un único acento terracota-cobre con contraste WCAG AA.

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)

Escala Tipográfica Fluida

02 · CLAMP() SCALE
H1 — Titular Principal Editorial

Albert Sans

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

H2 — Encabezado de Sección

Albert Sans

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

Metadato Técnico / Tabular

12:45:09

font-variant-numeric: tabular-nums

Componentes y Superficies

03 · SURFACES

Acciones y Botones

Jerarquía clara entre acción primaria única y acciones secundarias discretas con bordes de 1px.

Etiquetas de Stack

AstroReactNext.jsTypeScriptTailwindCSS

Etiquetas compactas de 1px sin ruido visual para tecnologías y herramientas.

Iconografía de Línea

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

Familia única de iconos vectoriales de línea (estilo Lucide) renderizados inline. Cero emojis y cero iconos 3D.