System · Tokens

La tabla viva

Espejo tipado de globals.css (fuente: src/lib/tokens.ts). Cada swatch se renderiza con su token real — si un valor cambia en el CSS sin pasar por aquí, esta página lo delata. Sistema lockeado por color.mdx (decision-log #44).

Color

Mundo papel — interior / superficie de trabajo (default)

Papel--color-paper · #FCFBF9Fondo de lectura / lienzo del interior

Nácar--color-nacre · #F7F6F3Card elevada (method cards, fichas)

Tinta--color-ink · #26231FTexto primario / dato de prueba

Tinta-sub--color-ink-sub · #5B5751Texto secundario, captions

Tinta-eyebrow--color-ink-eyebrow · #706B65Eyebrow/microcopy sobre papel (remediado AA)

Tinta-faint--color-ink-faint · #807C76Detalle no-textual

Perla--color-pearl · #E1DFDBHairline / borde / divisor

Mundo grafito — portada / umbral / chrome

Grafito--color-cover-background · #0E1012Campo de portada / contraportada / chrome

Panel--color-cover-raised · #2F3439Plano alzado (spread de postura)

Bruma--color-cover-foreground · #F1F4F6Texto claro sobre grafito

Luz--color-cover-foreground-strong · #F9FAFCWordmark / titular sobre grafito

Bruma-sub--color-cover-muted · #C1C5C9Secundario sobre grafito

Bruma-quieta--color-cover-eyebrow · #83868CEyebrow SOLO sobre Grafito base (5.22:1)

Bruma-quieta-panel--color-cover-eyebrow-panel · #9B9FA3Eyebrow sobre Panel (4.72:1 AA)

Hairline-grafito--color-cover-hairline · #2B2E32Hairline / borde no-textual sobre Grafito (chrome) — decorativo, exento de 1.4.11

Acento bronce — funcional, invariante

Bronce (display)--color-bronze · #927656Tick de verificado, estados grandes/UI (≥3:1)

Bronce-texto--color-bronze-text · #7F6343Links y estados en texto de cuerpo (5.39:1 AA)

Arena--color-sand · #D6C4A9Detalle cálido (foil, micro-detalle)

Matriz WCAG — pares medidos

Algoritmo WCAG 2.1 sobre los HEX exactos — no estimaciones. Piso AA 4.5:1 (texto normal) / 3:1 (grande y UI). Las filas que fallan en normal son, por regla, colores de display/UI — nunca de cuerpo.

Texto	Fondo	Ratio	Normal	Grande / UI
Tinta	Papel	15.12:1	AAA	AAA
Tinta	Nácar	14.47:1	AAA	AAA
Tinta	Perla	11.75:1	AAA	AAA
Tinta	Arena	9.18:1	AAA	AAA
Tinta-sub	Papel	6.94:1	AA	AAA
Tinta-eyebrow	Papel	5.10:1	AA	AAA
Bronce-texto	Papel	5.39:1	AA	AAA
Bronce (display)	Papel	4.10:1	— (no texto)	AA
Bronce (display)	Nácar	3.93:1	— (no texto)	AA
Bruma	Grafito	17.26:1	AAA	AAA
Luz	Grafito	18.25:1	AAA	AAA
Bruma	Panel	11.38:1	AAA	AAA
Luz	Panel	12.03:1	AAA	AAA
Bruma-sub	Panel	7.24:1	AAA	AAA
Bruma-sub	Grafito	10.98:1	AAA	AAA
Bronce-texto	Nácar	5.16:1	AA	AAA
Bruma-quieta	Grafito	5.22:1	AA	AAA
Bruma-quieta-panel	Panel	4.72:1	AA	AAA
Grafito	Papel	18.43:1	AAA	AAA

Tipografía

GT Sectra Display / Cormorant Garamond

Display / editorial

Söhne / Inter

Texto / UI

Söhne Mono / JetBrains Mono

Dato / prueba (dossier)

Committed retail sin licenciar — la compra es acción de Rodrigo; el sitio corre los fallbacks open. Nada renderizado en fallbacks es production-ready (typography.mdx).

Token	Valor	Uso
--text-xs	0.75rem (12px)	Eyebrow, microcopy, dato
--text-sm	0.875rem (14px)	Caption, tabla, nota legal
--text-base	1rem (16px)	Body / lectura larga
--text-lg	1.125rem (18px)	Body destacado, intro
--text-xl	1.375rem (22px)	H4 / subtítulo
--text-2xl	1.75rem (28px)	H3
--text-3xl	2.25rem (36px)	H2 (tracking −0.015em)
--text-4xl	3rem (48px)	H1 (tracking −0.02em)
--text-5xl	4rem (64px)	Hero tipográfico (el wordmark es vector)

Espacio · Radios · Tracking

Espacio (base 4)

--space-10.25rem

--space-20.5rem

--space-30.75rem

--space-41rem

--space-51.5rem

--space-62rem

--space-73rem

--space-84rem

--space-96rem

Radios

--radius-sm · 2px

--radius-md · 4px

--radius-lg · 6px

--radius-card · 4px

2–6px: la marca es sobria, no burbujeante.

Tracking

--tracking-micro · 0.16emEyebrow / microcopy UPPERCASE

--tracking-data · 0.02emDATA/proof — mono, lote/dosis/COA

--tracking-wordmark · 0.04emLockups de exploración (el wordmark es vector)

Motion

Token	Valor	Uso
--duration-instant	90ms	Plano de evidencia — la prueba APARECE (bloque de dato completo)
--duration-fast	120ms	Micro-feedback: hover, focus, link
--duration-base	200ms	Transición de UI: acordeón, tooltip, method card
--duration-slow	320ms	Entrada de sección, route transition, travesía de tapa
--ease-out-quart	cubic-bezier(0.25, 1, 0.5, 1)	Superficie default
--ease-out-quint	cubic-bezier(0.22, 1, 0.36, 1)	Superficie de mayor recorrido / travesías
--ease-proof	cubic-bezier(0.4, 0, 0.2, 1)	SOLO plano de evidencia — simétrica, sin overshoot

La prueba APARECE (instant + ease-proof, sin overshoot) y es visible desde el primer paint — progressive enhancement, nunca opacity:0 dependiente de JS (motion.mdx, Principio 5).