Aurora v5.1 · Constellation

Un solo showcase para core, packs y contrato público.

gallery.html pasa a ser la entrada única: foundations visuales, componentes base, 10 packs vivos (incl. next con liquid glass real, OKLCH y multi-axis), reglas de uso y reference API sin saltar entre demos duplicadas.

core 10 packs opcionales

Ver foundations Reglas de uso Abrir índice

CSS only Sin build 6 skins Light + Dark + AAA A11y · Reduced motion

Foundations

Tokens, layers, naming y theming leídos desde CSSOM, no capturas estáticas.

Core

Objects, buttons, cards, badges, feedback, fields, code y tablas.

Packs

Themes, data, charts, maps, viz, motion, forms, ui y patterns en vivo.

Reference

Reglas de uso y API pública consolidada en el mismo archivo.

Qué resuelve este refactor

Había dos demos con solapamiento parcial: una enseñaba el core y otra los packs. La parte mala era operativa, no estética: navegación rota, reference API separada y contenido duplicado.

Ahora hay una sola URL enlazable por anchors tipo gallery.html#pack-charts, con un patrón repetible para que añadir un pack nuevo sea pegar otra sección .gx-showcase sin reordenar nada.

HTML mínimo de adopción completa

<link rel="stylesheet" href="ntizar.css">
<link rel="stylesheet" href="ntizar.themes.css">
<link rel="stylesheet" href="ntizar.data.css">
<link rel="stylesheet" href="ntizar.charts.css">
<link rel="stylesheet" href="ntizar.maps.css">
<link rel="stylesheet" href="ntizar.viz.css">
<link rel="stylesheet" href="ntizar.motion.css">
<link rel="stylesheet" href="ntizar.forms.css">
<link rel="stylesheet" href="ntizar.ui.css">
<link rel="stylesheet" href="ntizar.patterns.css">

<body class="nz" data-nz-theme="light" data-nz-skin="aurora">
  ...
</body>

Core · objects

Subgrid para layouts anidados

Cuando una grid dentro de otra necesita compartir columnas con la grid padre, usa .nz-grid--subgrid. Los items internos se alinean perfectamente con las columnas externas.

ntizar.css

span 1

Celda que ocupa 1 columna del padre

span 2

Celda que ocupa 2 columnas del padre

hijo A

hijo B

hijo C

span 1

Celda que ocupa 1 columna del padre

API del bloque

Claves: .nz-grid--subgrid (grid padre con columnas auto-fit), .nz-grid--subgrid--2 (item ocupa 2 columnas), .nz-grid--subgrid--3 (item ocupa 3 columnas). Los grids anidados heredan grid-template-columns: subgrid del padre.

HTML del bloque

<div class="nz-grid nz-grid--subgrid" style="grid-template-columns: repeat(3, 1fr);">
  <div class="nz-surface">1 col</div>
  <div class="nz-surface nz-grid--subgrid--2">
    2 cols + subgrid anidado
    <div class="nz-grid nz-grid--subgrid" style="grid-template-columns: repeat(3, 1fr);">
      <div>hijo A</div>
      <div>hijo B</div>
      <div>hijo C</div>
    </div>
  </div>
  <div class="nz-surface">1 col</div>
</div>

Foundations · color

Tokens de color y superficie renderizados desde runtime

No hay swatches hardcodeados. El bloque lee los tokens activos del body.nz, así que cambiar theme o skin actualiza el catálogo al vuelo.

ntizar.css

API del bloque

Este bloque visualiza familias clave de --nz-color-*, más superficies y gradientes que condicionan el look completo: brand, accent, slate, glass y aurora.

Si un proyecto ya tiene framework propio, esta suele ser la capa que sí conviene integrar aunque no cargues todos los componentes.

Snippet de tematización

.mi-shell.nz {
  --nz-color-brand: #2563eb;
  --nz-color-accent: #f97316;
  --nz-gradient-aurora: linear-gradient(135deg, #2563eb 0%, #3b82f6 48%, #f97316 100%);
}

Foundations · type

Escala tipográfica y fuentes

La escala pública ya no vive solo en h1..h4; también existe como tokens y clases utilitarias .nz-text-h1..h4, .nz-text-sm y .nz-text-muted.

typography

API del bloque

--nz-font-sans, --nz-font-display y --nz-font-mono definen familias. La escala vive en --nz-text-xs..3xl.

La regla práctica: usa semántica HTML cuando exista; las clases tipográficas son para casos donde el HTML no refleja el rango visual que necesitas.

HTML del bloque

<div class="nz-stack nz-stack--sm">
  <span class="nz-text-h2">Título de módulo</span>
  <p class="nz-text-muted nz-text-sm">Contexto secundario</p>
</div>

Foundations · spacing

Spacing scale: de `--nz-space-1` a `--nz-space-8`

La separación vertical real del sistema sale de aquí: stack, grids, cards, panels y patterns usan la misma escala.

spacing

API del bloque

Antes de meter margin manual, prueba con .nz-stack y sus variantes. La mayoría del ritmo base ya está resuelto con esta escala.

HTML del bloque

<div class="nz-stack nz-stack--lg">
  <header class="nz-stack nz-stack--sm">...</header>
  <div class="nz-grid nz-grid--3">...</div>
</div>

Foundations · radius

Radius scale compartida entre core y utilities

Los radios están limitados a cinco niveles. Eso evita que cada pack invente su propia geometría.

radius

API del bloque

--nz-radius-sm/md/lg/xl/pill y sus utilities .u-nz-rounded-* son suficientes para casi todos los casos. Si necesitas uno nuevo, probablemente el problema sea de composición, no de radius.

Utility equivalentes

<div class="u-nz-rounded-lg">...</div>
<div class="u-nz-rounded-pill">...</div>

Foundations · shadows

Sombras de profundidad y de marca

Las sombras no son decorado genérico: algunas dan volumen y otras proyectan identidad de marca.

shadows

API del bloque

--nz-shadow-brand, --nz-shadow-accent y --nz-shadow-aurora son los que más rápido rompen la coherencia si los redefines sin cuidado.

Ejemplo de uso

<button class="nz-btn nz-btn--primary u-nz-glow">Acción</button>
<div class="nz-card u-nz-glow-aurora">Panel destacado</div>

Foundations · system

Layers, naming y contrato de extensibilidad

El sistema no escala por cantidad de clases sino por límites claros: tokens, base, objects, components y utilities.

SYSTEM

Layers

@layer ntizar.tokens, base, objects, components, utilities.

Naming

Objetos y componentes usan .nz-*. Utilidades usan .u-nz-*. Tokens usan --nz-*.

Regla clave

Si algo no aparece en gallery o en la API pública, no existe como contrato estable.

API del bloque

Cuando añadas un pack nuevo, todo el escaparate ya está listo: enlace en sidebar, una nueva section.gx-showcase, un bloque vivo y dos detalles.

Plantilla para un pack nuevo

<section class="gx-showcase gx-section-anchor" id="pack-foo" data-pack="foo" data-status="stable">
  <div class="gx-showcase__head">...</div>
  <div class="gx-showcase__live">...</div>
  <details>...API...</details>
  <details data-code>...snippet...</details>
</section>

Core · objects

Layout antes que componentes

El core empieza resolviendo estructura: container, section, stack, cluster, grid y surface. Si esto está bien, luego hacen falta menos helpers y menos componentes especiales.

ntizar.css

Container + section

El borde exterior de casi cualquier pantalla. Marca anchura y ritmo vertical sin inventar wrappers nuevos.

Stack + cluster

Stack apila; cluster resuelve filas con wrap. La mayoría de layouts de producto salen de esa pareja.

Grid + surface

Grid decide densidad. Surface decide peso visual. No mezcles ambas responsabilidades.

surface

Panel neutro para settings, filtros o sidebars.

glass

Más presencia visual sin caer en ruido si lo usas con intención.

glass-brand

La variante con ADN Ntizar más explícito para hero, dashboard principal o highlight.

API del bloque

Objects clave: .nz-container, .nz-section, .nz-stack, .nz-stack--sm, .nz-stack--md, .nz-stack--lg, .nz-cluster, .nz-cluster--between, .nz-grid, .nz-grid--2, .nz-grid--3, .nz-grid--aside y familia .nz-surface*.

HTML del bloque

<section class="nz-section">
  <div class="nz-container nz-stack nz-stack--lg">
    <header class="nz-stack nz-stack--sm">...</header>
    <div class="nz-grid nz-grid--3">
      <div class="nz-surface">A</div>
      <div class="nz-surface nz-surface--glass">B</div>
      <div class="nz-surface nz-surface--glass-brand">C</div>
    </div>
  </div>
</section>

Core · buttons

Botones: escala corta, responsabilidades claras

Si todo compite con el mismo peso visual, el problema no es de color sino de jerarquía. El set del core intenta evitar eso.

buttons

Regla de uso

Dentro de un bloque intenta no combinar más de un primary y un ghost. Si pones tres CTAs de primer nivel, ya no hay CTA principal.

API del bloque

Variantes públicas: .nz-btn--primary, --accent, --brand-mix, --glass, --glass-brand, --glass-accent, --secondary, --ghost, --danger, más tamaños --sm, --lg y ancho --block.

HTML del bloque

<div class="nz-cluster">
  <button class="nz-btn nz-btn--primary">Guardar</button>
  <button class="nz-btn nz-btn--ghost">Cancelar</button>
</div>

Core · botones

Botones con superficies tonales

Variantes que heredan las superficies tonales del sistema: soft (tinte suave), raised (elevada) y pressed (hundida). Cada color tiene sus 3 variantes.

botones

SOFT — tinte suave

RAISED — elevada

PRESSED — hundida

Regla de uso

Usa --tonal-*-soft para acciones secundarias y filtros. --tonal-*-raised para botones de acción visibles pero no primarios. --tonal-*-pressed para estado activo/seleccionado (ej: filtro activo).

API del bloque

Variantes públicas: .nz-btn--tonal-{color}-{variant} donde color es brand, accent, success, warning, danger y variant es soft, raised, pressed. Ejemplo: .nz-btn--tonal-brand-soft, .nz-btn--tonal-accent-raised, .nz-btn--tonal-danger-pressed.

HTML del bloque

<div class="nz-cluster">
  <button class="nz-btn nz-btn--tonal-brand-soft">Brand soft</button>
  <button class="nz-btn nz-btn--tonal-accent-raised">Accent raised</button>
  <button class="nz-btn nz-btn--tonal-danger-pressed">Danger pressed</button>
</div>

Core · cards

Cards y variantes glass

Card no es sinónimo de superficie. Úsala cuando el bloque tenga lectura propia, head/body/footer o necesidad clara de reuso.

cards

Buena para resultados, listados y módulos que necesitan sentirse activos.

Glass

La variante premium general. Úsala poco: si todo es glass, nada destaca.

Glass brand

Marca visible para showcase, dashboards principales o highlights con ADN Ntizar.

API del bloque

Variantes públicas: .nz-card, --soft, --interactive, --glass-soft, --glass, --glass-strong, --glass-brand, --glass-accent; partes __header, __title, __meta, __body, __footer.

HTML del bloque

<article class="nz-card nz-card--interactive">
  <div class="nz-card__header">...</div>
  <div class="nz-card__body">...</div>
  <div class="nz-card__footer">...</div>
</article>

Container Queries — redimensiona para ver la adaptación

Layout vertical compacto cuando el contenedor es menor de 400px. Padding reducido, gap ajustado.

Padding y gap intermedios. Layout vertical estándar con espaciado equilibrado.

Layout horizontal con imagen lateral. El primer hijo ocupa 40% del ancho, el resto se expande.

Core · badges

Badges para meta breve, no para explicar historias

Una o dos palabras. Si el mensaje requiere contexto, sube a callout o alert.

badges

Draft Core Alias brand Launch Glass Aurora Warm Stable Review Blocked

Neutral tag Brand tag Accent tag

API del bloque

.nz-badge--brand existe como alias de .nz-badge--primary. Es útil para docs o migraciones donde el naming “brand” sea más claro.

HTML del bloque

<span class="nz-badge nz-badge--primary nz-badge--no-dot">Stable</span>

Core · feedback

Alerts y callouts: estado del sistema vs guidance

La distinción importa. Alert informa sobre estado o resultado. Callout guía o contextualiza.

feedback

Info

Estado general cuando el sistema solo informa.

Success

Confirmación o resultado positivo.

Warning

Riesgo moderado todavía reversible.

Danger

Error o bloqueo real.

Tip

Contexto breve de docs, onboarding o IA.

Info alias

Alias suave de tip para equipos que ya usan naming informativo.

Warning

Advertencia de uso o decisión delicada.

Danger

Riesgo serio a nivel de guidance, no solo de estado.

API del bloque

Callouts públicos: .nz-callout--tip, .nz-callout--info, .nz-callout--warning, .nz-callout--danger. El naming antiguo --warn ya no es el canónico.

HTML del bloque

<div class="nz-alert nz-alert--warning">
  <div class="nz-alert__title">Atención</div>
  <div class="nz-alert__body">Revisa este paso antes de seguir.</div>
</div>

Core · fields

Fields básicos, label clásica y alias nuevo

El core cubre inputs simples. Los controles ricos viven en ntizar.forms.css, pero la base de formulario ya existe aquí.

forms básico

Nombre

Usa help para guidance normal.

Tipo

Notas Marca error solo cuando haya un problema concreto.

API del bloque

.nz-field__label existe como alias de .nz-label. El objetivo es coexistir con markup más encapsulado sin romper el contrato existente.

HTML del bloque

<label class="nz-field">
  <span class="nz-field__label">Email</span>
  <input class="nz-input" type="email">
</label>

Core · type + docs

Texto, código y tablas

El core incluye lo necesario para documentación operativa: tipografía utilitaria, codeblocks y tablas simples.

docs

.nz-text-h1 .nz-text-h2 .nz-text-h3 .nz-text-h4 Texto breve Texto muted

HTML Snippet corto documentado

<div class="nz-card">
  <div class="nz-card__title">Hola mundo</div>
</div>

Clase	Uso
`.nz-codeblock`	Bloques de código documentados.
`.nz-table`	Tabla simple para docs o admin.
`.nz-prose`	Ritmo interno de texto largo.

🪟 Tabla Glass sobre fondo colorido

Componente	Efecto	Backdrop
.nz-table--glass	Fondo semitransparente	blur(16px)
th (glass)	50% opacidad	blur(12px)
td (glass)	40% opacidad	blur(8px)
hover fila	Brand 8% overlay	blur(10px)

API del bloque

Clases nuevas en v4.2: .nz-text-h1..h4, .nz-text-sm, .nz-text-muted y .nz-stack--md. v5.0 añade además .nz-card--glass-liquid, .nz-aurora-mesh, .u-nz-text-auto y .u-nz-bg-mesh.

HTML del bloque

<div class="nz-codeblock">
  <div class="nz-codeblock__head">
    <span class="nz-codeblock__label">CSS</span>
  </div>
  <pre><code>.mi-shell { ... }</code></pre>
</div>

Pack · themes

Cinco skins, misma identidad

Cambiar data-nz-skin reescribe tokens de marca, gradientes, sombras y paleta de charts. El switcher está arriba en el sidebar para que afecte a toda la página.

ntizar.themes.css

brand

--nz-color-brand

accent

--nz-color-accent

aurora

--nz-gradient-aurora

API del bloque

Skins soportados: aurora, sunset, midnight, ocean y citrus. Se aplican con data-nz-skin en el root.

HTML del bloque

<body class="nz" data-nz-theme="light" data-nz-skin="midnight">
  ...
</body>

Pack · data

KPIs, progress, skeletons, avatares y timeline

El pack data no inventa lógica; solo da contenedores y estados visuales para interfaces cargadas de métricas.

ntizar.data.css

Meters

35%

62%

88%

Skeleton state

Donuts CSS

45%

72%

Equipo activo

A B C D +5

Diseño Producto Datos

Timeline

Hoy · 09:24

Aurora v5.0 · Constellation Disruptive
Ayer · 17:02

Pack charts añadido
Lun · 11:11

Skins · primer sprint

API del bloque

Clases útiles: .nz-kpi, .nz-data-card, .nz-progress, .nz-meter, .nz-skeleton, .nz-avatar, .nz-avatar-stack, .nz-timeline, .nz-tag.

HTML del bloque

<div class="nz-progress nz-progress--aurora">
  <div class="nz-progress__bar" style="width: 68%"></div>
</div>

Pack · charts

Dashboard real: Chart.js con paleta leída desde tokens

El valor del pack no es dibujar la serie, sino dar contenedores, legendas y paletas coherentes con el skin activo.

ntizar.charts.css

Overview · últimos 30 días

Live

Sesiones vs conversión

Comparativa diaria

Sesiones
Conversión

Distribución por canal

Donut con paleta del skin

Roadmap Q2

68%

Pulse semanal

Sparkline CSS

82%

+18.4% vs semana anterior

API del bloque

El JS lee --nz-chart-1..8, --nz-chart-grid y --nz-chart-axis. Cambiar el skin y volver a renderizar basta para alinear todos los gráficos.

Snippet Chart.js

const css = getComputedStyle(document.body);
const palette = Array.from({ length: 8 }, (_, i) =>
  css.getPropertyValue(`--nz-chart-${i + 1}`).trim()
);

Pack · maps

Leaflet con overlays glass y look Ntizar

El pack no decide el proveedor del mapa. Se limita a encuadre, overlays HUD, pins y popups consistentes.

ntizar.maps.css

Estaciones · Madrid

12 nodos activos

Leyenda

Estación principal
Estación activa

API del bloque

Clases clave: .nz-map, overlays __overlay--*, .nz-map__legend, .nz-map__pin y .nz-map__pin--accent. El mapa sigue siendo de la librería que elijas.

Snippet Leaflet

const map = L.map('m').setView([40.4168, -3.7038], 12);
L.marker([40.4168, -3.7038], {
  icon: L.divIcon({ className: 'nz-map__pin', iconSize: [22, 22] })
}).addTo(map);

Pack · viz

Stage para three.js con frame glass

El pack viz no sustituye al motor 3D. Solo resuelve el stage, overlays y lenguaje visual para canvas/WebGL.

ntizar.viz.css

Live WebGL

Aurora particle field

800 partículas, paleta sincronizada con el skin activo al arrancar.

API del bloque

Clases clave: .nz-stage, .nz-stage--hero, .nz-stage--glass-frame, .nz-stage__canvas y .nz-stage__hud.

Snippet three.js

<section class="nz-stage nz-stage--hero nz-stage--glass-frame">
  <canvas class="nz-stage__canvas" id="three"></canvas>
  <div class="nz-stage__hud">...</div>
</section>

Pack · motion

Animaciones reutilizables con respeto a reduced-motion

El pack añade motion opt-in. Si el layout no funciona en estático, la animación no lo arregla.

ntizar.motion.css

glow-pulse

Halo expansivo permanente.

float

Levitación sutil 5s.

shimmer

Brillo cíclico sobre superficie.

core themes data charts maps viz motion core themes data charts maps viz motion

Typing

Aurora arranca apps en segundos

API del bloque

El reveal on scroll necesita JS mínimo para añadir .is-visible. El resto son clases opt-in puramente CSS.

Snippet de reveal

const io = new IntersectionObserver(es =>
  es.forEach(e => e.isIntersecting && e.target.classList.add('is-visible')),
  { threshold: 0.12 }
);

Pack · forms

Formularios ricos, accesibles y listos para producto

El core cubre la base. Este pack añade controles complejos: segmented, switch, range, OTP, file drop, stepper e input groups.

ntizar.forms.css

API del bloque

Clases clave: .nz-switch, .nz-check, .nz-radio, .nz-range, .nz-otp, .nz-file, .nz-stepper, .nz-input-group, .nz-search y .nz-form-grid.

HTML del bloque

<label class="nz-switch">
  <input class="nz-switch__input" type="checkbox" checked>
  <span class="nz-switch__track"><span class="nz-switch__thumb"></span></span>
  <span>Recibir novedades</span>
</label>

Pack · ui

Componentes interactivos: modal, drawer, dropdown, toast, tabs…

El pack aporta estructura visual; el comportamiento sigue siendo JS mínimo del proyecto o del showcase.

ntizar.ui.css

Tabs

El sistema rinde un 24% mejor este mes. Buen trabajo.

Accordion

¿Qué es Constellation?

El sistema modular de Ntizar para construir cualquier proyecto.

¿Necesito React?

No. Es CSS puro. Funciona con cualquier stack.

¿Hay dark mode?

Sí, vía data-nz-theme="dark".

Overlays

Dropdown

Dropdown CSS-only: clic en el botón abre/cierra (checkbox + :has()). Hover también funciona.

Tooltip · Spinner · Chips

React Vue Svelte

Breadcrumbs · Pagination

Inicio
/
UI
/
Constellation

Command bar (cmd-K)

Una paleta de acciones inspirada en Linear / Raycast / VS Code.

⌘K

Acciones

Crear proyecto nuevo

Abrir dashboard

Cambiar skin

Recientes

Aurora landing

Mapa Madrid · IoT

API del bloque

El pack cubre modal, drawer, tabs, accordion, dropdown, toast, tooltip, breadcrumbs, segmented, chips, paginación, spinner, divider con label y command bar.

HTML del bloque

<dialog class="nz-modal">
  <div class="nz-modal__panel">...</div>
</dialog>

Pack · patterns

Patrones de página listos para componer

Este pack no reemplaza producto ni contenido. Solo acelera shells y secciones de alto nivel sin inventar CSS a mano cada vez.

ntizar.patterns.css

⚡

Sin build

Un <link> y a producir.

🎨

5 skins

Misma identidad, cinco personalidades.

📊

Charts ready

Chart.js / Apex / D3 con paleta sincronizada.

Starter

€0/mes

Hasta 3 proyectos
Comunidad
Skins básicos

Popular

Pro

€19/mes

Proyectos ilimitados
Todos los skins
Soporte prioritario
Componentes premium

Team

€49/mes

Roles y permisos
SSO / SAML
Auditoría
SLA 99.9%

¿Qué incluye Constellation?

Core (tokens, base, objects, components, utilities) + 10 packs opcionales: themes, data, charts, maps, viz, motion, forms, ui, patterns y next (v5).

¿Funciona con Tailwind / Bootstrap?

Sí. Todo está aislado bajo .nz. Convive sin colisionar.

¿Cómo cambio la marca?

Sobrescribe los tokens --nz-color-brand, --nz-color-accent y los --nz-gradient-* en tu CSS posterior.

📭

No hay proyectos todavía

Crea tu primer proyecto para empezar a iterar.

404

Página perdida en la constelación

Pero la identidad sigue intacta.

Volver al inicio

Constellation v5.0

Construye con identidad.
Sin fricción.

El sistema que escala contigo, manteniendo siempre la firma azul + naranja.

ACMELuminaNorthstarQuantaHelixVela

API del bloque

El pack cubre shells, hero, feature grid, pricing, faq, auth, empty/error, cta, logo cloud y banners. Son patrones, no un framework de páginas cerradas.

HTML del bloque

<div class="nz-app-shell">
  <aside class="nz-app-shell__sidebar">...</aside>
  <main class="nz-app-shell__main">...</main>
</div>

Patrones · Bento Grid

Bento Grid

Layout asimétrico inspirado en Apple, Linear y Figma. Celdas de diferentes tamaños que se adaptan al contenido.

patterns nuevo

Principal

Métricas en tiempo real

Grid asimétrico con celdas de diferentes tamaños. Esta celda ocupa 2 columnas y 2 filas.

2.4M

Sesiones hoy

Rendimiento

Uptime

99.9%

Análisis

Tráfico por canal

42%

Orgánico

31%

Social

27%

Directo

Estado

API

Operativo

Latencia

P95

42ms

API del bloque

.nz-bento-grid crea un grid de 4 columnas con filas mínimas de 140px. Las celdas usan modificadores para controlar el tamaño: --span-2 (2 cols), --span-3 (3 cols), --span-full (fila completa), --tall (2 filas), --wide (2 cols). Responsive: 2 cols a 900px, 1 col a 600px.

HTML del bloque

<div class="nz-bento-grid">
  <div class="nz-bento-grid__cell nz-bento-grid__cell--span-2 nz-bento-grid__cell--tall">
    <!-- Celda grande 2x2 -->
  </div>
  <div class="nz-bento-grid__cell nz-bento-grid__cell--tall">
    <!-- Celda alta 1x2 -->
  </div>
  <div class="nz-bento-grid__cell nz-bento-grid__cell--span-2">
    <!-- Celda ancha 2x1 -->
  </div>
</div>

Patrón · nav glass

Navegación glass con backdrop-blur

.nz-nav--glass crea una barra de navegación fija con efecto cristal: fondo semitransparente, backdrop-filter: blur(), borde inferior translúcido. Links con hover/active, CTA opcional, responsive en móvil.

ntizar.patterns.css opt-in

Contenido detrás del nav glass

Desplázate para ver cómo el nav mantiene el efecto glass sobre el contenido colorido.

Componentes

Botones, cards, badges, campos, alertas y más.

Patrones

App shell, hero, pricing, FAQ, footer y nav glass.

Zero JS

Todo CSS. Sin build, sin dependencias, sin npm.

API del bloque

.nz-nav--glass crea una barra de navegación sticky con efecto glass: backdrop-filter: blur(18px) saturate(1.3), fondo var(--nz-surface-glass), borde inferior var(--nz-border-glass).

Componentes hijos: .nz-nav--glass__brand (logo con gradiente accent), .nz-nav--glass__links (links con hover/active), .nz-nav--glass__cta (botón CTA). Responsive: en pantallas ≤700px los links pasan a una segunda fila.

HTML del bloque

<nav class="nz-nav--glass">
  <a class="nz-nav--glass__brand" href="#">
    MiApp<span class="nz-accent">.css</span>
  </a>
  <div class="nz-nav--glass__links">
    <a class="is-active" href="#">Inicio</a>
    <a href="#">Docs</a>
    <a href="#">Componentes</a>
  </div>
  <div class="nz-nav--glass__cta">
    <button class="nz-btn nz-btn--primary nz-btn--sm">Empezar</button>
  </div>
</nav>

Pack · next v5.0

Capa disruptiva: Liquid Glass real, OKLCH, multi-axis y mesh

ntizar.next.css es opt-in y aditivo. Añade lo que faltaba para que Aurora juegue en el campo de los design systems 2026 sin romper una sola línea del core. Prueba los toggles del sidebar (Shape · Density · Motion · Color system) y observa cómo este bloque y todo el showcase reaccionan en tiempo real.

ntizar.next.css opt-in a11y · forced-colors

.nz-aurora-mesh

Mesh-gradient animado, 0 KB de imágenes.

Cuatro radial-gradient en OKLCH apilados sobre --nz-mesh-1..4. Variantes: --animated respira, --glass añade veladura, --hero ocupa 80vh.

Specular highlight

Mueve el cursor por encima. --nz-mx/--nz-my se actualizan y el brillo sigue al puntero.

.nz-card--glass-liquid-brand

Chromatic edge

Borde de 1px con dispersión cyan→magenta sutil. Simula refracción de vidrio premium.

.nz-card--glass-liquid-accent

Dual inset shadow

Highlight superior + sombra interior inferior = vidrio con grosor real, no solo translúcido.

.nz-card--glass-liquid-aurora

Multi-axis theming

Cuatro ejes ortogonales que combinan libremente con data-nz-skin y data-nz-theme:

data-nz-shape — default · sharp · rounded · brutalist
data-nz-density — comfortable · compact · spacious
data-nz-motion — standard · springy · calm · none
data-nz-color-system — hex · oklch

Los toggles del sidebar reasignan el atributo en <body>. Toda la página se reescribe sin recargar.

Accesibilidad como feature

Tres añadidos clave:

Skin contrast — WCAG AAA, fondos planos, focus dual ring negro+amarillo. Usable de verdad para apps de salud o banca.
Forced-colors mode — overrides para Windows High Contrast. Mapeamos a Canvas, CanvasText, Highlight, Mark.
Auto-contrast — --nz-text-auto con light-dark(). Usa .u-nz-text-auto sobre cualquier surface.

Pulsa Skin · Contrast · AAA arriba para ver el modo accesible activo.

OKLCH color system

data-nz-color-system="oklch"

Escalas perceptualmente uniformes derivadas de --nz-hue-brand (245°) y --nz-hue-accent (47°). Cambia un único hue y toda la escala se recalcula con curva de luminosidad consistente.

API del bloque

Liquid Glass: .nz-card--glass-liquid, .nz-surface--glass-liquid, .nz-btn--glass-liquid + tinte --brand/--accent/--aurora.
Aurora Mesh: .nz-aurora-mesh + modificadores --animated, --glass, --hero. Utility .u-nz-bg-mesh.
Multi-axis: data-nz-shape, data-nz-density, data-nz-motion, data-nz-color-system en el root .nz.
Skin AAA: data-nz-skin="contrast".
Auto-contrast: --nz-text-auto y .u-nz-text-auto (basado en light-dark()).
Tokens nuevos: --nz-hue-brand, --nz-hue-accent, --nz-chroma, --nz-oklch-brand-50..900, --nz-oklch-accent-50..900, --nz-mesh-1..4, --nz-mx/--nz-my.

Forced-colors mode (@media (forced-colors: active)) y prefers-reduced-motion: reduce están cableados — los efectos se desactivan automáticamente en esos contextos.

HTML mínimo del bloque

<link rel="stylesheet" href="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">

  <section class="nz-aurora-mesh nz-aurora-mesh--animated nz-aurora-mesh--glass nz-aurora-mesh--hero">
    <h1>Hero con mesh animado</h1>
  </section>

  <article class="nz-card--glass-liquid nz-card--glass-liquid-aurora">
    <h2>Liquid Glass real</h2>
  </article>

</body>

<script>
// 5 líneas opcionales: specular highlight sigue al cursor
document.querySelectorAll('[data-liquid]').forEach(el => {
  el.addEventListener('pointermove', e => {
    const r = el.getBoundingClientRect();
    el.style.setProperty('--nz-mx', ((e.clientX - r.left) / r.width  * 100) + '%');
    el.style.setProperty('--nz-my', ((e.clientY - r.top ) / r.height * 100) + '%');
  });
});
</script>

Sistema tonal de superficies

Superficies con identidad de color

Cada color (brand, accent, success, danger, warning) tiene 4 variantes: soft (tinte suave), raised (elevada con borde), pressed (hundida con inset shadow), glass (backdrop-blur translúcido). Funciona en light y dark.

Brand

--brand-soft — tinte suave para highlights

--brand-raised — elevada con borde sutil

--brand-pressed — hundida (estado activo)

--brand-glass — backdrop-blur translúcido

Accent

--accent-soft — tinte suave

--accent-raised — elevada

--accent-pressed — hundida

--accent-glass — glass

Estados

--success-raised — panel de éxito elevado

--danger-soft — tinte de alerta

--warning-pressed — estado de atención

Tema dark

Brand

--brand-soft — tinte suave

--brand-raised — elevada

--brand-pressed — hundida

--brand-glass — glass

Accent

--accent-soft

--accent-raised

--accent-pressed

--accent-glass

Ver código

<!-- Soft: tinte muy suave -->
<div class="nz-surface nz-surface--brand-soft">...</div>

<!-- Raised: elevada con borde + sombra -->
<div class="nz-surface nz-surface--brand-raised">...</div>

<!-- Pressed: hundida con inset shadow -->
<div class="nz-surface nz-surface--brand-pressed">...</div>

<!-- Glass: backdrop-blur translúcido -->
<div class="nz-surface nz-surface--brand-glass">...</div>

<!-- Variantes: brand, accent, success, danger, warning -->
<div class="nz-surface nz-surface--success-raised">...</div>
<div class="nz-surface nz-surface--danger-soft">...</div>
<div class="nz-surface nz-surface--warning-pressed">...</div>
<div class="nz-surface nz-surface--warning-glass">...</div>

Reglas de uso

Antes del catálogo: las decisiones que no conviene saltarse

El sistema se entiende mejor desde sus decisiones de uso que desde la lista bruta de clases. Esto viene rescatado de la demo anterior porque era de lo poco que sí aportaba contexto real.

docs

Si un sistema visual existe pero no aparece al principio de la documentación, para terceros es casi invisible.

README para explicar contrato y adopción.
Gallery para enseñar qué usar, cuándo y cómo.
Referencia para cerrar la API pública sin ambigüedades.

Si el proyecto ya usa Tailwind, Bootstrap u otro sistema, Aurora no debe entrar entero por defecto.

Usa todo el core cuando la app nazca sobre Aurora.
Usa tokens o piezas concretas cuando la app ya tenga framework.
Usa glass con intención, no como textura automática en todas partes.

Orden correcto para leer esta página

Foundations, luego setup mental por capas, después componentes/packs, y solo al final la reference API.

1. Copia ntizar.css

Cuando: siempre que el proyecto nuevo quiera usar Aurora como base.

No lo hagas así: no mezcles la API nueva con clases legacy tipo .card o .btn.

2. Activa .nz

Cuando: en todo el body si la app nace con Aurora, o en un wrapper si quieres aislar una zona.

No lo hagas así: no esperes que Aurora estilice nada fuera de .nz.

3. Decide tema y tokens

Cuando: usa light por defecto; fuerza dark solo si el producto lo necesita.

No lo hagas así: no edites el core para recolorear la marca; sobreescribe tokens.

Opción	Úsala para	Evítala cuando
`.nz-surface`	Paneles neutros, filtros, grupos de información o sidebars.	Necesites contenido con header/body/footer reutilizable; ahí conviene `.nz-card`.
`.nz-surface--glass`	Bloques destacados, heroes, demos, zonas premium o una capa visual con más presencia.	La pantalla ya tenga demasiada textura o si todo se vuelve visualmente pesado.
`.nz-surface--glass-brand`	Paneles con ADN Ntizar más marcado: dashboards principales, heroes o estados activos.	Necesites una superficie neutra o documental.
`.nz-card`	Items de dashboard, resultados, summaries, módulos reutilizables.	Solo quieras agrupar contenido sin semántica de card; usa surface.
`.nz-card--interactive`	Cards clicables, listados o piezas que deben sentirse activas.	La card no sea interactiva; el hover extra añade ruido innecesario.
`.nz-btn--primary`	La acción principal del bloque o formulario.	Tengas varias acciones con el mismo peso; entonces usa secondary o ghost.
`.nz-btn--ghost`	Cancelar, atrás, cerrar o acciones auxiliares.	La acción deba competir visualmente con el CTA principal.
`.nz-btn--glass*`	Toolbars, acciones premium o contextos con glass sin perder legibilidad.	El CTA principal deba leerse inmediato a distancia; ahí gana primary o accent.
`.nz-alert--warning`	Riesgo moderado, aviso operacional o decisión que requiere atención.	No haya una consecuencia clara; en ese caso mejor callout o ayuda inline.
`.nz-callout--tip`	Explicaciones, notas de docs, onboarding o guidance de IA.	Necesites feedback de estado del sistema; para eso usa alert.

Reference API

Root y theme

Si una clase o token no está aquí, no cuenta como API pública estable del core.

API	Uso
`.nz`	Activa la base tipográfica, focus, selection y componentes dentro del wrapper.
`data-nz-theme="light"`	Fuerza el tema claro.
`data-nz-theme="dark"`	Fuerza el tema oscuro.
`data-nz-skin="aurora\|sunset\|midnight\|ocean\|citrus\|contrast"`	Aplica skin de identidad cuando cargaste `ntizar.themes.css` (los 5 primeros) o `ntizar.next.css` (`contrast`, WCAG AAA).
`data-nz-shape="default\|sharp\|rounded\|brutalist"`	v5. Curvatura global. `brutalist` usa sombras sólidas. Requiere `ntizar.next.css`.
`data-nz-density="comfortable\|compact\|spacious"`	v5. Escala de spacing y tamaño de tipo. Requiere `ntizar.next.css`.
`data-nz-motion="standard\|springy\|calm\|none"`	v5. Personalidad del motion (duración + easing). Requiere `ntizar.next.css`.
`data-nz-color-system="hex\|oklch"`	v5. Activa escalas OKLCH derivadas de `--nz-hue-brand`/`--nz-hue-accent`. Requiere `ntizar.next.css`.
`--nz-*`	Familia completa de tokens del sistema.

Reference API

Objects

Checklist de composición y layout.

Clase	Uso
`.nz-container`	Anchura base de página.
`.nz-container--narrow`	Docs, forms o contenido con lectura larga.
`.nz-container--wide`	Dashboards o pantallas más abiertas.
`.nz-section`	Ritmo vertical entre secciones principales.
`.nz-stack`	Apilado vertical por defecto.
`.nz-stack--sm`	Stack con menor separación.
`.nz-stack--md`	Stack con separación intermedia.
`.nz-stack--lg`	Stack con mayor separación.
`.nz-cluster`	Fila flexible con wrap.
`.nz-cluster--between`	Distribuye extremos y mantiene gap interno.
`.nz-grid`	Grid base.
`.nz-grid--2`	Dos columnas responsive.
`.nz-grid--3`	Tres columnas responsive.
`.nz-grid--aside`	Contenido principal más columna lateral.
`.nz-surface`	Panel neutro.
`.nz-surface--soft`	Panel secundario sin tanto peso.
`.nz-surface--raised`	Panel protagonista.
`.nz-surface--glass-soft`	Glass ligero para overlays suaves.
`.nz-surface--glass`	Glass estándar para paneles premium.
`.nz-surface--glass-strong`	Glass más intenso para heroes o foco visual fuerte.
`.nz-surface--glass-brand`	Glass con tinte de marca Aurora.
`.nz-surface--glass-accent`	Glass con sesgo naranja/acento.
`.nz-divider`	Separador horizontal.
`.nz-prose`	Ritmo interno para texto y contenido largo.

Reference API

Components

Botones, badges, cards, fields, feedback y documentación base.

Clase	Uso
`.nz-btn`	Base de botón o link accionable.
`.nz-btn--primary`	CTA principal.
`.nz-btn--accent`	CTA destacado alternativo.
`.nz-btn--brand-mix`	CTA de marca completa azul-naranja.
`.nz-btn--glass`	Acción secundaria con liquid glass neutro.
`.nz-btn--glass-brand`	Acción glass con sesgo azul/marca.
`.nz-btn--glass-accent`	Acción glass con sesgo acento.
`.nz-btn--secondary`	Acción importante pero no principal.
`.nz-btn--ghost`	Acción de baja prioridad.
`.nz-btn--danger`	Acción destructiva.
`.nz-btn--sm`	Botón compacto.
`.nz-btn--lg`	Botón grande.
`.nz-btn--block`	Botón a ancho completo.
`.nz-badge`	Meta o estado corto.
`.nz-badge--neutral`	Estado neutro.
`.nz-badge--primary`	Meta asociada a core o brand.
`.nz-badge--brand`	Alias de `.nz-badge--primary`.
`.nz-badge--accent`	Acento o lanzamiento.
`.nz-badge--glass`	Badge glass neutro.
`.nz-badge--glass-brand`	Badge glass con marca Aurora.
`.nz-badge--glass-accent`	Badge glass con tono cálido.
`.nz-badge--success`	Estado positivo.
`.nz-badge--warning`	Requiere atención.
`.nz-badge--danger`	Bloqueo o riesgo.
`.nz-badge--no-dot`	Badge sin indicador circular.
`.nz-card`	Contenedor reusable de información.
`.nz-card--soft`	Card más ligera.
`.nz-card--glass-soft`	Card glass suave.
`.nz-card--glass`	Card glass estándar.
`.nz-card--glass-strong`	Card glass más intensa.
`.nz-card--glass-brand`	Card glass con ADN Aurora.
`.nz-card--glass-accent`	Card glass con tono acento.
`.nz-card--interactive`	Card con hover y sensación clicable.
`.nz-card__header`	Cabecera de card.
`.nz-card__title`	Título de card.
`.nz-card__meta`	Meta secundaria de card.
`.nz-card__body`	Cuerpo principal.
`.nz-card__footer`	Pie con acciones o resumen.
`.nz-field`	Grupo de label, control y ayuda.
`.nz-label`	Etiqueta de control.
`.nz-field__label`	Alias de `.nz-label`.
`.nz-help`	Ayuda inline normal.
`.nz-help--error`	Ayuda inline de error.
`.nz-input`	Input de una línea.
`.nz-select`	Select nativo estilizado.
`.nz-textarea`	Textarea base.
`.nz-alert`	Feedback de estado general.
`.nz-alert--success`	Confirmación o estado positivo.
`.nz-alert--warning`	Riesgo moderado.
`.nz-alert--danger`	Error o bloqueo.
`.nz-alert__title`	Título del alert.
`.nz-alert__body`	Cuerpo del alert.
`.nz-callout`	Contexto, guidance o docs.
`.nz-callout--tip`	Consejo o explicación.
`.nz-callout--info`	Alias suave de `.nz-callout--tip`.
`.nz-callout--warning`	Advertencia de uso.
`.nz-callout--danger`	Riesgo serio a nivel de guidance.
`.nz-callout__title`	Título del callout.
`.nz-callout__body`	Cuerpo del callout.
`.nz-codeblock`	Snippet o bloque de código documentado.
`.nz-codeblock__head`	Cabecera del snippet.
`.nz-codeblock__label`	Etiqueta de lenguaje.
`.nz-codeblock__hint`	Texto auxiliar del snippet.
`.nz-table-wrap`	Contenedor con scroll de tabla.
`.nz-table`	Tabla simple para admin o docs.
`.nz-text-h1`	Clase tipográfica para titular de máximo rango.
`.nz-text-h2`	Clase tipográfica para subtítulo principal.
`.nz-text-h3`	Clase tipográfica para título intermedio.
`.nz-text-h4`	Clase tipográfica para título compacto.
`.nz-text-sm`	Texto breve o metadato compacto.
`.nz-text-muted`	Texto secundario atenuado.

Reference API

Utilities

Atómicas, pocas y deliberadas.

Clase	Uso
`.u-nz-text-muted`	Fuerza texto muted.
`.u-nz-text-strong`	Fuerza texto fuerte.
`.u-nz-text-brand`	Aplica color de marca.
`.u-nz-text-gradient`	Texto con gradiente de marca.
`.u-nz-text-gradient-brand`	Texto con gradiente azul principal.
`.u-nz-full-width`	Anchura completa.
`.u-nz-sr-only`	Texto solo para lectores de pantalla.
`.u-nz-text-mono`	Fuerza fuente monoespaciada.
`.u-nz-num`	Números tabulares.
`.u-nz-glow`	Aplica glow de marca.
`.u-nz-glow-accent`	Aplica glow acento.
`.u-nz-glow-aurora`	Aplica glow aurora.
`.u-nz-bg-brand`	Fondo brand con texto on-brand.
`.u-nz-bg-accent`	Fondo accent con texto on-brand.
`.u-nz-bg-aurora`	Fondo aurora con texto on-brand.
`.u-nz-rounded-sm/md/lg/xl/pill`	Radius utilitario.
`.u-nz-gap-1..5`	Gap utilitario.
`.u-nz-aspect-square/video/cinema`	Aspect-ratio rápido.
`.u-nz-hide-sm`	Oculta en pantallas pequeñas.
`.u-nz-show-sm-only`	Muestra solo en pantallas pequeñas.

Un solo showcase para core, packs y contrato público.

Subgrid para layouts anidados

Tokens de color y superficie renderizados desde runtime

Escala tipográfica y fuentes

Spacing scale: de --nz-space-1 a --nz-space-8

Radius scale compartida entre core y utilities

Sombras de profundidad y de marca

Layers, naming y contrato de extensibilidad

Layout antes que componentes

Botones: escala corta, responsabilidades claras

Botones con superficies tonales

SOFT — tinte suave

RAISED — elevada

PRESSED — hundida

Cards y variantes glass

Badges para meta breve, no para explicar historias

Alerts y callouts: estado del sistema vs guidance

Fields básicos, label clásica y alias nuevo

Texto, código y tablas

Cinco skins, misma identidad

KPIs, progress, skeletons, avatares y timeline

Dashboard real: Chart.js con paleta leída desde tokens

Overview · últimos 30 días

Leaflet con overlays glass y look Ntizar

Stage para three.js con frame glass

Aurora particle field

Animaciones reutilizables con respeto a reduced-motion

Formularios ricos, accesibles y listos para producto

Cuenta nueva

Stepper

Radio + check personalizados

Componentes interactivos: modal, drawer, dropdown, toast, tabs…

Tabs

Accordion

Overlays

Dropdown

Tooltip · Spinner · Chips

Breadcrumbs · Pagination

Command bar (cmd-K)

Patrones de página listos para componer

Sin build

5 skins

Charts ready

Starter

Pro

Team

¿Listo para construir con identidad?

Página perdida en la constelación

Bienvenido de nuevo

Construye con identidad.Sin fricción.

Bento Grid

Métricas en tiempo real

Uptime

Tráfico por canal

API

P95

Navegación glass con backdrop-blur

Contenido detrás del nav glass

Capa disruptiva: Liquid Glass real, OKLCH, multi-axis y mesh

Mesh-gradient animado, 0 KB de imágenes.

Specular highlight

Chromatic edge

Dual inset shadow

Multi-axis theming

Accesibilidad como feature

OKLCH color system

Superficies con identidad de color

Tema light

Brand

Accent

Estados

Tema dark

Brand

Accent

Antes del catálogo: las decisiones que no conviene saltarse

Root y theme

Objects

Components

Utilities

Spacing scale: de `--nz-space-1` a `--nz-space-8`

Construye con identidad.
Sin fricción.