Design systems deterministas con teoría del color

Un endpoint PHP sin dependencias que devuelve paleta verificada WCAG (AA/AAA con ajuste garantizado), tokens de 14 estilos UI, tipografía, chequeo de daltonismo, rampas 50–900, par claro/oscuro y exports para CSS, SCSS, Tailwind y W3C Design Tokens.

Esta página está vestida con la paleta DOCS-4173 servida por el propio API — armonía tetrádica, contraste AA garantizado. El botón de arriba pide otra y la aplica en vivo.

Inicio rápido

curl "https://tu-dominio/paleta.php?seed=VX-2741&estilo=glass&layout=bento"
curl "https://tu-dominio/paleta.php?mood=cafe&lote=12"          # 12 paletas mood café
curl "https://tu-dominio/paleta.php?marca=DB4361&imagen=1" -o p.png  # PNG anclado a tu marca

# Determinista: misma semilla + mismos parámetros = misma salida.
# Con semilla explícita la respuesta es cacheable (max-age=86400).

Parámetros

Todos opcionales. También se aceptan vía PATH (/paleta.php/seed/VX-2741/estilo/glass) por si una redirección recorta el query string; en excluir por PATH se aceptan guiones.

Parámetro	Valores	Default	Qué hace
`seed`	texto (máx. 64)	aleatoria	Semilla determinista del sistema completo.
`armonia`	`auto` monocromatica · analoga · complementaria · split · triadica · tetradica	`auto`	Esquema de hues derivados del hue base.
`registro`	`auto` profundo · claro · pastel · oscuro · desaturado · neobrutal	`auto`	Receta tonal. En auto se sortea solo entre los compatibles con el estilo.
`estilo`	`auto` + 14 estilos (minimal … doodle)	`auto`	Lenguaje visual: define los 14 tokens de superficie.
`layout`	classic · bento · auto	`classic`	Sugerencia de layout.
`modo`	uno · par	`uno`	Con `par` agrega `temas.claro`, `temas.oscuro` y `css_par`.
`nivel`	aa · aaa	`aa`	Objetivos de contraste. AAA: texto 4.5→7.0, UI 3.0→4.5.
`ajuste_aa`	1 · 0	`1`	Con 1 ajusta la luminosidad hasta cumplir; con 0 solo reporta.
`excluir`	hues CSV	—	2+ hues: hue base del hueco más ancho de la rueda; 1 hue: el opuesto.
`pretty`	1 · 0	`1`	Con 0, JSON compacto sin saltos de línea.
`mood`	pastel · vintage · neon · calido · frio · otono · invierno · primavera · verano · naturaleza · cafe · atardecer · mar · dorado	—	Hue base dentro del rango del mood; en auto también aplica su registro y limita los estilos a los compatibles.
`hue`	0–359	—	Fija el hue base manualmente.
`marca`	RRGGBB	—	Ancla el hue al color de marca. Prioridad: marca > hue > mood > excluir.
`lote`	2–24	—	N paletas ligeras (seed-1..N) en una petición; cuenta como 1 para el rate limit.
`imagen`	1	—	Tarjeta PNG 1200×630 del tema principal (requiere GD).

Respuesta

Campo	Contenido
`meta`	seed, armonía, registro, estilo, layout, modo, nivel, tema_principal, hue_base, hues, excluidos, nota, versión.
`colores`	12 roles HEX, incluidos los 4 `sobre_*`: texto con contraste garantizado encima de cada rol cromático.
`wcag`	Pares críticos con ratio y objetivo. Con `ajuste_aa=1`, todo par cumple.
`ajustes_aa`	Roles cuya luminosidad se movió para cumplir (antes/después).
`estilo`	Nombre, layout, registros recomendados y los 14 tokens (radius, sombras, blur, bordes, translucidez, gradiente, fondo decorado…).
`tipografia`	Pareja display + cuerpo (máx. 2 familias) con pesos, fallback y `google_fonts_url` lista.
`daltonismo`	Simulación de protanopia/deuteranopia/tritanopia del trío cromático y 9 pares con ΔE CIE76: ok ≥ 20, justo ≥ 10, riesgo < 10.
`rampas`	Escalas 50–900 para primario, secundario, acento y neutro.
`css_variables`	Bloque `:root` con colores + tokens + fuentes, listo para pegar.
`exports`	`scss`, `tailwind` (@theme v4) y `tokens_w3c` (color, rampa, fontFamily, dimension).
`temas` modo=par	Temas claro y oscuro completos, cada uno con su propia garantía de contraste.
`css_par` modo=par	`:root` claro + `[data-tema="oscuro"]` + `@media (prefers-color-scheme: dark)`.

Ejemplos

Aplicar el design system completo a una página con tres líneas de JavaScript:

const d = await (await fetch('paleta.php?seed=VX-2741&estilo=glass')).json();
document.head.appendChild(
  Object.assign(document.createElement('style'), { textContent: d.css_variables })
);
// Y la tipografía:
document.head.appendChild(Object.assign(document.createElement('link'),
  { rel: 'stylesheet', href: d.tipografia.google_fonts_url }));

Par claro/oscuro con objetivos AAA, compacto, desde PHP:

$url = 'https://tu-dominio/paleta.php?seed=VX-2741&modo=par&nivel=aaa&pretty=0';
$d   = json_decode(file_get_contents($url), true);
file_put_contents('tema.css', $d['css_par']);

Enlaces vivos a la demo: liquid + bento · neumo en par · doodle · AAA

Determinismo y garantías

Misma semilla + mismos parámetros = misma salida, dentro de cada versión. El orden de consumo del RNG está documentado: armonía → estilo → registro → layout → tipografía. modo, nivel y pretty no consumen RNG.
Contraste garantizado. El motor ajusta la luminosidad de los roles no-base hasta que cada par crítico cumple su objetivo AA o AAA. Los roles base (fondo, superficie) nunca se tocan.
Regresión dorada. Cada versión se valida contra un snapshot de 40 combinaciones de la anterior; los cambios son aditivos y están documentados en la cabecera de paleta.php.

Rate limit

60 peticiones por minuto por IP. Al exceder: HTTP 429 con cabecera Retry-After y cuerpo {ok:false, error:"rate_limit", mensaje, reintentar_en}. Detrás de Cloudflare, activar RL_CONFIA_CF en paleta.php para usar la IP real. La galería de la demo (14 peticiones) queda holgada dentro del límite.

Contrato formal

El documento openapi.json (OpenAPI 3.1) describe parámetros con enums, el esquema completo de la respuesta y el error 429 — listo para generadores de clientes, validadores o para conectar asistentes de IA.