| name | aurora-design-system |
| description | Design System Ntizar Aurora v6.1 Constellation — CSS puro, 12 packs opt-in, namespaced .nz, liquid glass interactivo, escenas Three.js reutilizables, azul monocromo (sin mezcla azul→naranja), OKLCH, agent-ready con CDN público. Derivado de Ntizar-Aurora. |
| version | 6.1.0 |
| tags | ["css","design-system","aurora","liquid-glass","ntizar"] |
Aurora Design System — Patrón Ntizar CSS
Descripción
Design System CSS puro sin dependencias, sin build step, namespaced bajo .nz. 1 archivo core + 10 packs opt-in. 5 skins de marca. Liquid glass real con OKLCH. CDN público en jsDelivr.
Origen
Derivado del repositorio Ntizar-Aurora v5.1.
Arquitectura
ntizar.css -> core (siempre)
ntizar.themes.css -> 5 skins (aurora · sunset · midnight · ocean · citrus)
ntizar.data.css -> KPIs, dashboards, progress, meter, skeleton, avatar, timeline
ntizar.charts.css -> contenedores para Chart.js/Apex/D3, sparkline + donut CSS-only
ntizar.maps.css -> Leaflet/Mapbox/MapLibre con look Ntizar
ntizar.viz.css -> stages para three.js, fondos aurora, orbs, glow ring
ntizar.motion.css -> reveal, glow-pulse, aurora-pan, shimmer, marquee, typing, hover-lift
ntizar.forms.css -> switch, custom check/radio, range, OTP, file drop, stepper, search
ntizar.ui.css -> modal, drawer, tabs, accordion, dropdown, toast, tooltip, command-bar
ntizar.patterns.css -> app-shell, hero, pricing, features, faq, footer, auth-shell, empty/error
ntizar.next.css -> v5: liquid glass real, OKLCH, multi-axis theming, mesh, forced-colors, skin AAA
ntizar.three.css -> v6: contenedores .nz-three para escenas Three.js (hero/md/sm/glass-frame/interactive)
ntizar.ai.css -> v6.2: primitivas AI-native (loader, thinking, stream, approval, toolchips, taskrow, chat, promptbar, recommend, contextcard, difftable, recordtable, filtertable, sidenav, command, flow, insight, codeblock diff, finetune, selection). Estilo Núcleo limpio, monocromo azul, light por defecto.
three-scenes.js -> v6: librería ES de escenas (icosaedro · grafo · particulas · anillos), fallback sin WebGL
aurora-live.js -> v6: specular del liquid glass que sigue al cursor (.nz-glass-liquid-live)
Quick Start
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.next.css">
<body class="nz"
data-nz-theme="light"
data-nz-skin="aurora"
data-nz-shape="default"
data-nz-density="comfortable"
data-nz-motion="standard"
data-nz-color-system="oklch">
...
</body>
Reglas de Oro
- Todo lo público vive bajo
.nz — no hay clases globales sueltas
- Todos los valores son tokens
--nz-* — nunca hardcodes un hex o un 16px
- Sin
!important fuera de utilidades
- BEM para componentes:
.nz-card__body--featured
- Si no aparece en
gallery.html, no existe — la galería es la única fuente de verdad de la API pública
Uso con IA Agents (crucial para ahorrar tokens)
NO pegar el CSS en el prompt (170 KB ≈ 50.000 tokens).
SÍ hacer:
- Dar al agent solo
AGENTS.md + INDEX.md (~20 KB / ~5.000 tokens)
- Linkar el CSS vía CDN en el HTML generado
- Decir al agent: "Generate HTML only. The CSS is already linked. Use Aurora classes from INDEX.md."
Drop-in Files para AI Tooling
AGENTS.md — estándar abierto para agents (OpenAI, Sourcegraph, Anthropic).github/copilot-instructions.md — auto-loaded por GitHub Copilot- Para Claude Code: copiar
AGENTS.md a CLAUDE.md
- Para Cursor:
.cursor/rules/aurora.mdc
Default Usage Policy (Agente — obligatorio)
Aurora es el sistema de diseño por defecto para artefactos visuales generados por el agente. No se usan CSS custom sueltos, ni estilos inline generales, ni otros frameworks.
⚠️ EXCEPCIÓN — Design systems corporativos de equipo (2026-06-25)
Cuando un equipo pide un CSS compartido para unificar el estilo de sus herramientas, NO usar Aurora. En su lugar, crear un design system propio alineado con la marca corporativa del equipo.
Señales de que NO es Aurora:
- "Queremos un CSS que usen todos del equipo"
- "Que se parezca al intranet de la empresa"
- "Colores de [Empresa]"
- Hay un manual de marca oficial con colores propios
Flujo correcto: Usar design-system-scaffold para crear un design system desde cero con los colores oficiales de la marca. Ver también references/design-system-corporativo-workflow.md para el Kaizen de Ineco y cómo convertir proyectos existentes.
Ejemplo real: Equipo Kaizen de Ineco. David pidió un CSS compartido con colores de Ineco. Se creó kaizen-design-system con colores oficiales del manual de marca (#1A4488, #CB1823), NO con Aurora.
Aurora es para: dashboards personales, apps creativas, landings, proyectos donde el estilo visual es flexible.
Design system propio es para: equipos corporativos, empresas con marca definida, herramientas internas que deben ser coherentes con la identidad corporativa.
⚠️ EXCEPCIÓN — Presentaciones corporativas / consulting (2026-06-20)
David rechazó Aurora explícitamente para presentaciones de caso de negocio / propuestas internas. Pidió "fondo blanco", "elegante", "no parezca hecho por IA". Aurora (mesh, glass, orbs, gradientes) se percibe como "tech/startup" y no como "consulting corporativo".
Cuándo NO usar Aurora:
- Presentaciones de caso de negocio (Kaizen, propuestas)
- Informes ejecutivos para stakeholders externos
- Roadmaps y planes de inversión
- Cualquier cosa con estética McKinsey/BCG
Cuándo SÍ usar Aurora:
- Dashboards interactivos
- Apps personales
- Landing pages creativas
- El usuario pide glass, mesh, dark, aurora explícitamente
Estilo alternativo: Ver popular-web-designs/references/consulting-corporate-style.md para el patrón de fondo blanco, tipografía Inter, tablas limpias, KPI tiles, sin glass/mesh/orbs.
Reglas de branding para todo artefacto HTML generado
- CDN obligatorio — siempre linkar ntizar.css + ntizar.next.css + packs necesarios desde CDN. Nunca CSS embebido o archivos locales.
- Skin por defecto: aurora — data-nz-skin=aurora (azul #2563eb + naranja #f97316 + liquid glass). Ver ERROR CRÍTICO #10 para el fix del violeta.
- Theme por defecto: light —
data-nz-theme="light". David prefiere fondos claros: son más elegantes, mejor legibles y más profesionales. Dark solo si el usuario lo pide explícitamente.
- Mobile-first OBLIGATORIO — toda landing/artefacto debe ser mobile-first, NO desktop-first. Base: 1 columna (≤600px), tablet: 2 columnas (601–900px), desktop: 3+ columnas (901px+). NO usar @media (max-width) como estrategia principal. Responsive no es opcional.
- Touch targets mínimo 44px — en móvil, todos los botones, links, inputs, tabs deben tener min-height: 44px (accesibilidad táctil).
- Atribucion exacta — el footer DEBE poner EXACTAMENTE:
Hecho con ❤️ por David Antizar. El ❤️ es el emoji de corazón (U+2764), NO (L). Sin variaciones. Sin "Analisis por". Sin "via Mastermind Agent". Sin "via Mastermind". Literal exacto con emoji.
- David Antizar es el autor, Mastermind el agente ejecutor. Esto aplica a HTML, posts, informes, notas. Nunca al reves.
- Sin ingles — todo en castellano: etiquetas, contenido, titulos, atributos
⚠️ ESTILO "AURORA LIMPIO" — Diseño moderno, no IA (2026-06-22)
Señal del usuario: David rechazó el primer HTML demo. Dijo: "el fondo no me gusta nada", "los números son demasiado grandes", "no es suficientemente liquid glass", "todo debería ser más responsive", "mucho más moderno y elegante en blanco naranja y azul sin gradientes raros ni cards típicos de IA".
Lo que NO es Aurora limpio:
- ❌ Fondo gradiente naranja/azul que cubre toda la pantalla
- ❌ Orbs decorativos flotantes intrusivos
- ❌ Mesh aurora animado intrusivo
- ❌ Números gigantes (KPIs de 2.5rem+)
- ❌ Cards típicas de IA con gradientes llamativos
- ❌ Desktop-first con media queries al final
Lo que SÍ es Aurora limpio (estilo iOS 26 / Apple):
- ✅ Fondo blanco limpio (
#ffffff) con solo toques sutiles de color
- ✅ Liquid glass REAL con 4 capas:
- Base translúcida con gradiente sutil (rgba 255,255,255,0.72 → 0.62)
backdrop-filter: blur(24px) saturate(180%)- Dual inset shadow (luz arriba + profundidad abajo)
- Borde cromático con
::before (specular highlight) y ::after (chromatic edge)
- ✅ Números compactos — KPIs de 1.1–1.25rem, no 2.5rem+
- ✅ Mobile-first — base 1 col, tablet 2 col, desktop 3 col
- ✅ Botones estilo iOS — brand (azul), accent (naranja), glass, ghost
- ✅ Badges pill — colores sutiles, no saturados
- ✅ Progress bars finas — 4px de alto, no gruesas
- ✅ Sin gradientes radiales intrusivos — solo un toque sutil de color en el fondo
Implementación del liquid glass real (4 capas):
.glass-panel {
position: relative;
background: linear-gradient(135deg,
rgba(255,255,255,0.72) 0%,
rgba(241,245,249,0.55) 50%,
rgba(255,255,255,0.62) 100%);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,0.9),
inset 0 -1px 0 0 rgba(0,0,0,0.04),
0 8px 32px rgba(0,0,0,0.06),
0 2px 8px rgba(0,0,0,0.03);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 16px;
overflow: hidden;
}
.glass-panel::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%,
rgba(255,255,255,0.08) 40%,
transparent 60%);
pointer-events: none; z-index: 1;
}
.glass-panel::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35),
inset 0 0 20px rgba(37,99,235,0.03),
inset 0 0 40px rgba(249,115,22,0.02);
pointer-events: none; z-index: 1;
}
Ejemplo de referencia: Ver demo-aurora-fix.html en el repo Ntizar-Aurora.
Verificacion pre-entrega (OBLIGATORIA)
Antes de dar por terminado cualquier artefacto HTML, verificar:
- Footer dice EXACTAMENTE:
Hecho con ❤️ por David Antizar (emoji real, NO (L))
- Sin "Analisis", sin "via Mastermind Agent", sin "via", sin variantes
- body class="nz" presente
- data-nz-skin="aurora" presente
- data-nz-theme="light" (no dark por defecto)
- CDN links correctos y funcionales
- Mobile-first presente — base 1 col, tablet 2 col, desktop 3+ col. NO desktop-first con max-width
- Touch targets 44px en móvil para botones, links, inputs, tabs
- Glass-liquid REAL — 4 capas (base, backdrop-filter, dual inset shadow, borde cromático)
- Números compactos — KPIs ≤1.25rem
- Fondo blanco limpio — sin gradientes intrusivos, sin orbs flotantes
- Sin CSS custom >30 lineas
- Sin hex hardcodes (usar var(--nz-*))
Vinculación con skills pipeline
Los skills de pipeline (ej: pdf-to-artifacts-david-antizar) consumen Aurora pero NO duplican su configuración. Deben referenciar este skill como pre-requisito y solo añadir lo específico de su flujo.
Workflow para Agentes (CRÍTICO)
Pasos obligatorios cuando se pida "usa Aurora" o se genere HTML visual:
- CARGAR INDEX.md del repo Ntizar-Aurora — es la fuente de verdad de la API de clases
- USAR SOLO componentes listados en INDEX.md
- CSS custom máximo 30 líneas — solo para lo específico del artefacto
- NUNCA hardcodear hex — siempre
var(--nz-*)
- SIEMPRE
body class="nz" data-nz-skin="aurora"
⚠️ ERROR CRÍTICO #1 — CSS custom en vez de Aurora (2026-06-03)
Los agentes tienden a intentar recrear el look de Aurora con CSS custom en vez de usar los componentes reales. Esto produce HTMLs que "dicen" Aurora pero no lo usan.
Síntomas de fallo:
- Más de 50 líneas de CSS custom
<style>
- Clases inventadas (
.step, .arrow, .decision, etc.)
- Hex hardcodes (
#0f172a, #2563eb, #f97316)
- Sin
body class="nz"
- Sin
data-nz-skin="aurora"
- Sin
nz-card, nz-glass, nz-badge, etc.
Causa raíz: No cargar INDEX.md ni CHEATSHEET.md como referencia.
Solución: Cargar INDEX.md (fuente de verdad) y CHEATSHEET.md (resumen rápido) ANTES de generar cualquier HTML. Usar SOLO componentes listados.
⚠️ ERROR CRÍTICO #2 — "Aurora flat" en vez de glass-liquid (2026-06-11)
Incluso cuando el agent SÍ usa clases Aurora, tiende a elegir las variantes planas/básicas (nz-card, nz-btn--primary) en vez de las glass-liquid que dan el look premium. David lo describió como "puro croissant" — funcional pero sin alma.
Síntomas de fallo:
nz-card sin variante glass → card blanca plana, sin profundidadnz-btn--primary en vez de nz-btn--glass-liquid-brand → botón genérico- Sin
nz-aurora-mesh--animated → fondo blanco sin vida
- Sin
nz-orb → nada de decoración atmosférica
- Sin
nz-anim-fade-in → todo aparece de golpe sin transición
- Sin
nz-hover-lift → cards sin interacción visual
- Sin
u-nz-text-brand en el titular → título sin acento (NOTA: nz-gradient-text NO existe, nunca la uses)
nz-kpi sin --accent → tiles planosnz-chart sin --glass → gráficos en cajas blancasnz-surface sin --glass* → superficies opacas
Causa raíz: El agent elige la primera variante que encuentra en el CHEATSHEET en vez de la variante visualmente rica. Falta una guía de "qué variante usar según el contexto visual".
Solución: Para dashboards, apps, landings y cualquier artefacto visual → SIEMPRE preferir las variantes glass-liquid y animadas. Ver tabla rápida abajo.
⚠️ PREFERENCE — Glass borders como "look de IA" (2026-06-20)
Señal del usuario: David rechazó explícitamente cards con bordes glass-liquid visibles (la línea decorativa superior de nz-card--glass-liquid). Dijo: "La línea esa en las cards, no me gusta nada. Parece hecho por IA."
Matiz importante: David NO rechaza glass en general. Le gustan las cards con profundidad, sombra sutil y backdrop-filter. Lo que rechaza es el borde decorativo superior (la línea glass brillante que algunos templates ponen arriba de la card). Es un patrón que se ha vuelto icónico de diseños "AI-generated" (lo mismo ocurre con gradientes neón exagerados, mesh backgrounds con muchas orbs, y horizontal lines decoratives).
Regla práctica:
- ✅
backdrop-filter: blur() + sombra sutil + bg semitransparente = elegante
- ❌ Bordes glass visibles arriba de la card = "parece hecho por IA"
- ✅ Usar
nz-card--glass-liquid pero sin la línea decorativa de borde superior si el contexto es presentación ejecutiva o algo que se entrega a stakeholders
- ❌ Evitar horizontal lines decorativas entre secciones en presentaciones (David las rechazó directamente)
- ❌ Evitar elementos que se repitan en cada card (badges decorativos, líneas de color repetitivas) — David los asocia con "AI aesthetic"
Contexto: En presentaciones Kaizen/Ineco (v1.0→v2.0→v3.0), la evolución fue: dark mode con glass borders (rechazado) → light mode Aurora con glass borders (rechazado) → light mode Aurora sin glass borders visibles (aceptado con entusiasmo). El factor decisivo fue QUITAR las líneas glass decorativas, no el tema ni los componentes.
Aplicación general: Cuando el output es para un stakeholder externo (presentación empresa, informe cliente, landing profesional) → glass sutil sin bordes decorativos. Cuando es interno (dashboard propio, app personal) → glass-liquid completo con borders está OK.
⚠️ ERROR CRÍTICO #3 — Usar Aurora al 40% (2026-06-13)
El agent usa los componentes básicos de Aurora (cards glass, botones glass, mesh) pero ignora 20+ componentes disponibles que dan el look disruptivo y profesional.
Síntomas de fallo:
