Saltar al contenido
Design system de Ntizar · monocromo light

CSS sin build que un modelo de IA no puede romper.

Aurora es una caja de componentes CSS puros —2.223 clases en 417 familias— con un lint que impide inventar clases y una estética monocroma: blanco para el dato, negro para el lienzo, color solo donde mide.

Clases verificadas2.223en 417 familias
Hojas CSS18sin build ni dependencias
Clases inventadas0el lint no las deja compilar
Marcas7monocromo light por defecto
Cómo funciona de verdad

Dos CSS, clases del censo y un sello. Nada más.

1 · Enlazas los CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Aurora@v10/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Aurora@v10/packs/p1-layout.css">

Servidos por jsDelivr, pineados al canal vivo @v10. Sin npm, sin build, sin JavaScript de runtime: cualquier servidor estático los sirve.

2 · Escribes clases del censo

<button class="nz-btn nz-btn--primary">Guardar</button>

Cada clase del censo lleva su demo viva en el catálogo y su ficha en components.json. Lo que no está en el censo, no existe: ni para ti ni para un modelo.

3 · Un sello antes de publicar

El lint auditar-uso.py —o el MCP de Aurora, dentro de tu agente— revisa el HTML antes de entregar: clases inventadas, packs que faltan, colores a mano, desbordes del móvil. 0 fallos o no está terminado.

¿Y si escribe un modelo?

OpenUI-lang: el modelo escribe un programa corto de 43 componentes, el parser valida tipos y aridad antes de tocar el DOM y el mismo lint sella el resultado. Mismo contrato, mitad de tokens.

Verlo en vivo
La estética

Monocromo: blanco, negro y color solo en los datos

La marca por defecto es monocromo light: lienzo blanco, dato en negro y el gris reservado para lo que se toca —botones, chips, bordes—. El color aparece dos veces y siempre con permiso: azul y naranja miden en los gráficos, y un punto de semáforo marca el estado sin convertir la página en un árbol de Navidad. Con data-nz-theme="dark" el lienzo pasa a negro puro y la señal se invierte.

blanco = dato negro = lienzo gris = affordancia azul/naranja = medida punto = estado
Pruébala:
Todas las 7 marcas
La señal en acción

Color donde mide, silencio donde no

Riesgo por vector
Barras de medida (azul)68 %
El dato que importa (naranja)76 %
Actividad · 7 días
Estado en punto, nunca en chip gordo
Crítico Vulnerable Seguro

Con la marca monocromo, estos puntos y las barras leen los tokens de señal; al cambiar de marca arriba, todo recolorea con el mismo gesto.

Todo lo que hay

Seis puertas, un mismo contrato

Catálogo

417 familias con markup real, tokens y demo viva. Se busca por necesidad, no por nombre de clase.

Abrir la base

Bloques

Recetas canónicas por tipo de página —login, panel, landing—, listas para copiar y ajustar.

Ver bloques

Marcas

7 presets con contraste AA y el generador OKLCH para la tuya en un minuto. Monocromo light por defecto.

Cambiar de marca

Iconos

338 símbolos numerados con sprite y ficha por icono. Nunca un emoji haciendo de icono.

Ver iconos

OpenUI

El lenguaje generativo con probador en vivo y plantillas por arquetipo: panel, informe, landing, ajustes, agente.

Abrir el probador

Producto de muestra

Una landing y una ficha reales bajo subruta, medidas en navegador: 18 comprobaciones que la CI repite.

Ver la muestra
Para agentes

Una línea y está dentro

MCP de Aurora claude mcp add aurora -- python scripts/mcp-aurora.py — censo vivo, lint de HTML y compilador de programas. Sin MCP: llms-full.txt y LLM.md.

Versionado con dos canales: el vivo @v10 recibe cada release sin tocar tus webs; el congelado v10.10.0 deja la entrega reproducible dentro de dos años. Detalle en CONTRATO.md.

Hecho con ❤️ por David Antizar