Ntizar Aurora · Galería v6.1

Fundamentos · ntizar.css

Tokens: la única fuente de verdad visual

Color, tipografía, espaciado, radios y sombras. Todo lo demás se compone a partir de aquí. Los valores mostrados son literales del CSS publicado.

Color y superficie

--nz-color-brand

#2563eb

--nz-color-accent

#f97316

--nz-surface-base

#ffffff

--nz-surface-soft

#f8fafc

--nz-surface-glass

rgba + blur

--nz-gradient-brand

azul profundo

--nz-gradient-aurora

monocromo azul

Aa

--nz-text-strong

#0f172a

Aa

--nz-text-default

#334155

Aa

--nz-text-muted

#64748b

Aa

--nz-text-on-brand

#ffffff

--nz-border-soft

#e2e8f0

Tipografía

Titular 3XL display

--nz-text-3xl · --nz-font-display

Encabezado 2XL

--nz-text-2xl

Subtítulo XL

--nz-text-xl

Texto cuerpo LG — la base legible del sistema.

--nz-text-lg · --nz-font-sans

Texto medio MD para párrafos densos.

--nz-text-md

Texto breve SM para metadatos.

--nz-text-sm

Etiqueta XS

--nz-text-xs

mono 0x2563eb

--nz-font-mono

Espaciado (de 0.25rem a 4rem)

--nz-space-1

.25r

--nz-space-2

.5r

--nz-space-3

.75r

--nz-space-4

1r

--nz-space-5

1.5r

--nz-space-6

2r

--nz-space-7

3r

--nz-space-8

4r

Radios — cinco niveles, ni uno más

--nz-radius-sm

--nz-radius-md

--nz-radius-lg

--nz-radius-xl

--nz-radius-pill

Sombras — volumen e identidad

--nz-shadow-sm

--nz-shadow-md

--nz-shadow-lg

--nz-shadow-brand

--nz-shadow-accent

--nz-shadow-aurora

Cómo consumir los tokens

/* Todo via variables — nunca hex sueltos en tu CSS */
:root {
  --nz-color-brand: #2563eb;
  --nz-color-accent: #f97316;
  --nz-gradient-aurora: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.mi-panel {
  background: var(--nz-surface-glass);
  border-radius: var(--nz-radius-lg);
  box-shadow: var(--nz-shadow-brand);
}

Fundamentos · contrato

Reglas del sistema

Aurora no escala por cantidad de clases, sino por límites claros. Estas cuatro reglas mantienen el sistema coherente cuando lo usan muchos proyectos.

1 · Root y theme

Todo componente vive dentro de .nz con data-nz-theme y data-nz-skin en el body. Sin root, no hay contrato.

2 · Naming estricto

Componentes .nz-*, utilidades .u-nz-*, tokens --nz-*. Lo que no aparece en esta galería no existe como API estable.

3 · Layout antes que componentes

Container, section, stack, cluster, grid y surface resuelven el 80% de las composiciones. Si está bien la estructura, hacen falta menos helpers.

4 · Packs a la carta

El core es obligatorio; los 11 packs opcionales se enlazan uno a uno. Un proyecto ligero carga 2 CSS; un dashboard, los 12.

Capas CSS El sistema se organiza en @layer: tokens → base → objects → components → utilities. Tus utilidades personalizadas siempre ganan sin !important si usan la última capa.

Estructura mínima de una página Aurora

<body class="nz" data-nz-theme="light" data-nz-skin="aurora">
  <div class="nz-container">
    <section class="nz-section nz-stack nz-stack--lg">
      <header class="nz-stack nz-stack--sm">…</header>
      <div class="nz-grid nz-grid--3">…</div>
    </section>
  </div>
</body>

Core · ntizar.css

Layout: contenedores, stacks, grids y surfaces

La estructura primero. Estas clases definen el ritmo de cualquier página sin una línea de CSS propio.

Grids — 2, 3 y aside

A · 1/3

B · 1/3

C · 1/3

Principal — 2/3 del ancho

Subgrid — grids anidadas alineadas con el padre

1 col

2 cols + subgrid anidado

hijo A

hijo B

hijo C

Superficies — glass y tonales

.nz-surface--glass

.nz-surface--glass-brand

.nz-surface--brand-soft

Cluster — líneas de acciones

3 cambios sin aplicar

Snippet — layout

<div class="nz-grid nz-grid--3">…</div>
<div class="nz-grid nz-grid--aside">principal + aside</div>
<div class="nz-cluster nz-cluster--between">…</div>
<div class="nz-surface nz-surface--glass-brand">…</div>

Core · ntizar.css

Botones: escala corta, jerarquía clara

Si todo compite con el mismo peso visual, el problema no es de color sino de jerarquía. Una acción primaria por vista; el resto, variantes.

Variantes públicas

Tamaños y ancho completo

Tonales — soft · raised · pressed (5 colores × 3)

Snippet — botones

<button class="nz-btn nz-btn--primary">Guardar</button>
<button class="nz-btn nz-btn--ghost">Cancelar</button>
<button class="nz-btn nz-btn--tonal-accent-raised">Accent raised</button>
<button class="nz-btn nz-btn--primary nz-btn--lg nz-btn--block">CTA</button>

Core · ntizar.css

Cards con lectura propia

Card no es sinónimo de superficie: úsala cuando el bloque tenga head/body/footer o necesidad clara de reuso.

El cursor confirma que la card responde. Úsala en listas seleccionables y dashboards.

Vidrio neutro para paneles que flotan sobre contenido. Elegante sin pedir protagonismo.

La variante con identidad Ntizar explícita: hero, dashboard principal o highlight.

Soft

Superficie baja, para contenido denso sin ruido.

Glass strong

Blur y borde reforzados para sobre fondos oscuros.

Horizontal: card en dos columnas internas — ideal para listas de resultados y medios.

Snippet — cards

<article class="nz-card nz-card--interactive">
  <div class="nz-card__header">
    <div class="nz-card__title">Título</div>
    <div class="nz-card__meta">meta</div>
  </div>
  <div class="nz-card__body">…</div>
  <div class="nz-card__footer">…</div>
</article>

Core · ntizar.css

Badges: meta breve, no historias

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

Neutral Primary Accent Success Warning Danger

Glass Glass brand Glass accent Con punto Sin punto

Snippet — badges

<span class="nz-badge nz-badge--success">Operativo</span>
<span class="nz-badge nz-badge--glass-brand nz-badge--no-dot">v6.1</span>

Core · ntizar.css

Alerts y callouts: estado vs guidance

La distinción importa: alert informa de estado o resultado del sistema; callout guía o contextualiza al usuario.

Desplegado correctamente

La versión 6.1 está servida en el CDN.

Atención

Revisa este paso antes de seguir.

Error de compilación

El build falló: 2 tokens sin definir.

ConsejoUsa .u-nz-num en tablas de métricas: los dígitos tabulares alinean columnas.

ContextoEste bloque es guidance — el usuario no ha fallado nada.

LimitaciónEl liquid glass necesita backdrop-filter; en navegadores viejos degrades a surface sólida.

BloqueanteCambiar un token de marca a mitad de proyecto rompe la coherencia de todos los packs.

Core · ntizar.css

Fields: la base de formulario

El core cubre inputs simples. Los controles ricos (switch, OTP, stepper, dropzones) viven en el pack forms.

Nombre del pack Un archivo por dominio.

Versión Este error se ve así.

Notas de release

Snippet — fields

<div class="nz-field">
  <label class="nz-label" for="x">Nombre</label>
  <input class="nz-input" id="x" type="text">
  <span class="nz-help">texto de ayuda</span>
</div>

Pack 1/11 · ntizar.themes.css

Themes y skins

El tema (light/dark) y la skin (aurora/ocean/sunset/citrus/midnight) son ejes independientes. Prueba los controles de la izquierda — todo lo que ves se recolorea.

Aurora

Azul profundo + naranja puntual. La identidad Ntizar por defecto.

Ocean

Cianes y azules fríos para dashboards técnicos.

Sunset

Cálidos para contenido editorial y marketing.

Primary Accent Success

Contrato Cada skin redefine solo tokens de color. Los componentes no cambian: por eso un proyecto migua de skin sin tocar una línea de HTML.

Pack 2/11 · ntizar.data.css

Data: KPIs, stats, meters, progreso y timeline

El lenguaje de los dashboards. Números que se leen de un vistazo y estado visible sin gráficas.

Ingresos€48.2k▲ 12.4%

Usuarios12.840▲ 3.1%

Conversión4.7%▼ 0.4%

NPS62= 0

Procesado del pipeline

En curso

Embeddings78%

Indexación45%

Validación92%

Meters por dominio

0-100

Movilidad

GIS

Datos abiertos

v6.1 — pack Three.js + glass interactivo

ago 2026

v6.0 — gradiente monocromo azul

jun 2026

v5.0 — surfaces tonales

mar 2026

◈

Skills

311

↯

Crons

2

Snippet — data

<div class="nz-kpi">
  <span class="nz-kpi__label">Ingresos</span>
  <span class="nz-kpi__value">€48.2k</span>
  <span class="nz-kpi__delta">▲ 12.4%</span>
</div>
<div class="nz-progress"><div class="nz-progress__bar" style="width:78%"></div></div>

Pack 3/11 · ntizar.charts.css

Charts: gráficas CSS-only

Donuts, sparklines y ejes sin librerías. La librería de gráficas solo entra cuando necesites tooltips e interacción real.

Donuts conic-gradient

45%

72%

Sparklines de barras

Sesiones · 14 días

línea simulada con SVG inline en producción

2026 2025

Pack 4/11 · ntizar.maps.css

Maps: Leaflet envuelto en marco Aurora

El pack no reimplementa mapas — viste Leaflet con superficies glass, pins con pulso, leyendas y controles coherentes con el sistema.

Estación Incidencia

Integración real Enlaza Leaflet desde CDN y monta el mapa sobre .nz-map: los pins usan las mismas variables de marca, así el mapa se recolorea con la skin.

Pack 5/11 · ntizar.viz.css

Viz: fondos decorativos — orbes, mallas, ruido

Las capas que hacen que un fondo blanco no se vea plano: orbes con blur, aurora backgrounds, grids de puntos, scanlines y grano sutil.

orbes

grid-bg

dot-bg

aurora-bg

glow-ring + noise

Pack 6/11 · ntizar.motion.css

Motion: animaciones que respetan prefers-reduced-motion

Entradas, flotados, glow pulsante y hover-lift. Nunca decoraciones que consuman CPU gratis.

fade-in

Con delays encadenados para entradas escalonadas.

rise + delay

Sube 12px mientras aparece.

glow-pulse

El halo respira — para el KPI que importa.

float

Flotación continua sutil.

scale-in

De 0.94 a 1.

hover-lift

Elevación al pasar el cursor.

movilidadgtfsisócronaslidarqgisopen datathree.jsesios

Snippet — motion

<div class="nz-card nz-anim-rise nz-anim--delay-2">…</div>
<div class="nz-card nz-anim-float">…</div>
<div class="nz-card nz-hover-lift">…</div>
<div class="nz-reveal nz-reveal--scroll">revela al hacer scroll</div>

Pack 7/11 · ntizar.forms.css

Forms: controles ricos sobre la base del core

Switches, checkboxes con checkmark animado, OTP segmentado, steppers y validación inline. Todo accesible por defecto.

Notificaciones push

.nz-switch — activado

Acepto las reglas del sistema

Checkbox Radio A Radio B

Código de verificación

Opacidad del glass · 60%

Stepper de unidades

3

Autocompletado

▾

Arrastra archivos aquí o pulsa para seleccionar — .nz-dropzone

Snippet — forms

<label class="nz-switch"><input type="checkbox"><span class="nz-switch__track"></span></label>
<label class="nz-checkbox"><input type="checkbox"><span class="nz-checkbox__box"></span> Texto</label>
<div class="nz-otp"><input class="nz-input nz-otp__cell" maxlength="1">…</div>

Pack 8/11 · ntizar.ui.css

UI: tabs, acordeones, dropdowns, modales, toasts

Interactividad completa sin una línea de JavaScript — el pack usa CSS puro con detalles nativos y :has().

Pestañas con underline deslizante. La clase is-active marca la seleccionada — en producción se gestiona con un listener de 5 líneas.

¿Aurora funciona sin build?

Sí. Enlaza los packs desde jsDelivr y listo — sin Node, sin bundler, sin postcss.

¿Y offline?

Descarga los CSS al repo y enlázalos en local. El contrato de clases es idéntico.

◇

Sin resultados

Prueba con otros filtros — .nz-empty

✓

Publicado
La release v6.1 está en el CDN.

!

Cuidado
Quedan 2 tokens sin definir.

×

Falló
El deploy devolvió 502.

hover · tooltip

66

Toolbar de editor

Snippet — ui

<div class="nz-tabs"><div class="nz-tabs__list"><button class="nz-tabs__btn is-active">…</button></div></div>
<details class="nz-accordion"><summary>…</summary><div class="nz-accordion__body">…</div></details>
<div class="nz-toast nz-toast--success">…</div>

Pack 9/11 · ntizar.patterns.css

Patterns: hero, bento, pricing, testimonials, FAQ

Composiciones completas listas para landing pages. Un patrón = una sección entera con su tipografía, espaciados y CTA resueltos.

Patrón · hero split

Diseña una vez.
Escalalo a mil vistas.

Un token cambia y todo el producto se recolorea. Sin refactor, sin capturas rotas.

Panel lateral

La mitad derecha del split: demo, formulario o imagen.

Feature destacada

Ocupa dos celdas — el héroe del bento.

Alta

Una celda vertical.

Simple

Una celda estándar.

Tall

Dos filas de alto.

Free

0 €/ mes

Core + themes
Galería de referencia

Pro

19 €/ mes

Los 12 packs
Liquid glass + Three.js
Soporte prioritario

Equipo

79 €/ mes

Todo lo de Pro
Skins a medida

«Aurora nos ahorró el sprint completo de design system. Los tokens hacen el trabajo que antes hacía una hoja de estilos.»

NtNtizar
Founder, MasterMind

¿Puedo usarlo en proyectos comerciales?

Sí. Licencia MIT — atribución no obligatoria pero bienvenida.

¿Funciona con React o Vue?

Es CSS puro: compatible con cualquier framework que renderice clases.

Pack 10/11 · ntizar.next.css · beta

Next: liquid glass real, OKLCH y ejes multi-axis

La frontera experimental. Pasa el cursor sobre el panel — el reflejo especular sigue al puntero. Prueba los ejes de forma y densidad en la barra superior.

.nz-glass-liquid-live

Glass con reflejo especular que sigue al cursor — el efecto más disruptivo del sistema, en 51 líneas de JS vanilla.

Tile live

variante líquida en grid

glass-liquid-brand

glass-liquid-accent

Ejes multi-axis data-nz-shape (suave/redondo/cuadrado), data-nz-density (compacto/cómodo) y data-nz-motion (reducido) se combinan entre sí y con las skins. Los controles de la cabecera aplican estos ejes a toda la página.

Pack 11/11 · ntizar.three.css + three-scenes.js

Three.js: escenas 3D reutilizables

Cuatro scenes importables — icosaedro, grafo, partículas y anillos — con fallback automático si WebGL no está disponible. Debajo, el icosaedro real corriendo con OrbitControls.

WebGL no disponible — esta escena degrada a gradiente estático.

icosaedro

wireframe + núcleo orbitando

grafo

nodos y aristas 3D

partículas

campo de puntos con parallax

anillos

órbitas concéntricas

Snippet — tres escenas

<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.164/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.164/examples/jsm/"}}</script>
<script type="module">
  import { crearBase, crearIcosaedro } from './three-scenes.js';
  const base = crearBase(document.querySelector('.nz-three'));
  crearIcosaedro(base.scene);
  base.animate();
</script>

Pack 12/12 · ntizar.ai.css

AI-native primitives

Primitivas para interfaces de agente y chat — thinking traces, streaming, approval (human-in-the-loop), tool chips, task rows, prompt bar, recommendation, context cards, diff y code blocks. Estilo Núcleo limpio, monocromo azul, light por defecto.

Thinking

Consultar inventario0.3s

Buscar proveedores0.9s

Task Rows

Streaming

El mercado sube un 12% en ventas

Chat

Compara con el verano pasado

Sube un 12% con picos de fin de semana.Agente · 4s

Recommendation

Code Block + Diff

export function churn() {
−const base = await dairy.fetch({ flavor });
+const base = await dairy.fetch({ flavor, fresh: true });

Demo completo con los 20 primitivos: demo-ai.html.

Snippet — CDN + contenedor

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.ai.css">
<body class="nz" data-nz-theme="light" data-nz-skin="aurora">
  <div class="nz-thinking is-open">…</div>
</body>

Core · utilidades

Utilities: atómicas, pocas y deliberadas

Prefijo .u-nz-*. Si necesitas una utilidad nueva, probablemente el problema sea de composición, no de helpers.

.u-nz-bg-brand

.u-nz-bg-accent

.u-nz-bg-aurora

.u-nz-text-brand .u-nz-text-gradient-brand .u-nz-glow .u-nz-rounded-pill 1.234.567

Clase	Qué hace
`.u-nz-text-muted / strong`	Fuerza jerarquía tipográfica puntual.
`.u-nz-full-width`	Anchura completa fuera de grid.
`.u-nz-aspect-square/video/cinema`	Ratio fijo para medios.
`.u-nz-hide-sm / show-sm-only`	Responsive sin media queries propias.
`.u-nz-gap-1..5`	Gaps puntuales sobre la escala.

Contrato público

API de referencia

Lo que no está aquí no existe como contrato estable. Cada clase de esta tabla está viva en la sección correspondiente de arriba.

Root & contrato

Token / atributo	Qué define
`.nz` + `data-nz-theme`	Root obligatorio y modo claro/oscuro.
`data-nz-skin`	aurora · ocean · sunset · citrus · midnight · contrast.
`--nz-color-brand` / `--nz-color-accent`	Marca azul (#2563eb) y acento naranja (#f97316), máximo 5 momentos saturados.
`--nz-gradient-aurora`	Degradado monocromo azul — nunca azul→naranja (muerde a púrpura en sRGB).
`--nz-space-1..8`	Escala de separación que usan stacks, grids y cards.
`--nz-radius-sm/md/lg/xl/pill`	Cinco niveles de radio — sin inventos por pack.
`@layer`	tokens → base → objects → components → utilities.

Componentes por pack

Pack	Componentes clave	Estado
`ntizar.css`	container, section, stack, cluster, grid, surface, button, card, badge, alert, callout, field, table, codeblock	Estable
`ntizar.themes.css`	light/dark + skins aurora, ocean, sunset, citrus, midnight	Estable
`ntizar.data.css`	kpi, stat-line, stat-tile, stat-bar, meter, progress, timeline, avatar-stack, tag, skeleton, empty-state	Estable
`ntizar.charts.css`	chart, chart__legend, donut (--p), sparkline, axis	Estable
`ntizar.maps.css`	map (+glass/light/dark), pin, pin-pulse, legend, controls, search, scale, attribution	Estable
`ntizar.viz.css`	stage, orb, glow-ring, aurora-bg, grid-bg, dot-bg, scanlines, noise, spotlight	Estable
`ntizar.motion.css`	anim fade-in/rise/scale-in/float/glow-pulse/marquee, reveal, hover-lift, delays	Estable
`ntizar.forms.css`	switch, checkbox, radio, otp, stepper, combo, dropzone, file, rating, slider, validation	Estable
`ntizar.ui.css`	tabs, accordion, modal, drawer, dropdown, toast, tooltip, popover, pagination, breadcrumb, toolbar, tree, command, status, segmented, steps, context-menu	Estable
`ntizar.patterns.css`	hero, bento, feature-row, pricing, testimonial, faq, cta-banner, blog-card, auth-form, profile, kanban, wizard, notification-center, comment-thread	Estable
`ntizar.next.css`	glass-liquid-live, tile-live, ejes shape/density/motion/color-system, OKLCH	Beta
`ntizar.three.css`	nz-three (+hero/md/sm), canvas, overlay, fallback · crearEscena, crearEscenasAuto (icosaedro/grafo/partículas/anillos)	Estable
`ntizar.ai.css`	nz-loader, nz-thinking, nz-stream, nz-approval, nz-toolchips, nz-taskrow, nz-chat, nz-promptbar, nz-recommend, nz-contextcard, nz-difftable, nz-recordtable, nz-filtertable, nz-sidenav, nz-command, nz-flow, nz-insight, nz-codeblock--diff, nz-finetune, nz-selection	Estable

Utilidades

Clase	Qué hace
`.u-nz-text-muted / strong / brand / gradient-brand`	Tipografía puntual sin componente.
`.u-nz-bg-brand / accent / aurora`	Fondo con color de marca y texto on-color resuelto.
`.u-nz-glow / glow-accent / glow-aurora`	Halo de profundidad o identidad.
`.u-nz-rounded-sm/md/lg/xl/pill`	Radio utilitario sobre la escala del sistema.
`.u-nz-num / text-mono / full-width / sr-only`	Números tabulares, mono, ancho completo, accesible oculto.
`.u-nz-gap-1..5 · aspect-square/video/cinema · hide-sm / show-sm-only`	Gaps, ratios fijos y responsive sin media queries propias.

Metadatos

Changelog

v6.1 — Galería reconstruida de cero, contenido estático sin dependencia de JS

ago 2026 · branding constellation, pack three, glass interactivo

v6.0 — Gradiente monocromo azul, superficies tonales ampliadas

jun 2026

v5.x — Packs next (OKLCH, multi-axis) y patterns completos

2025–2026

Tokens: la única fuente de verdad visual

Reglas del sistema

Layout: contenedores, stacks, grids y surfaces

Botones: escala corta, jerarquía clara

Cards con lectura propia

Badges: meta breve, no historias

Alerts y callouts: estado vs guidance

Fields: la base de formulario

Themes y skins

Data: KPIs, stats, meters, progreso y timeline

Charts: gráficas CSS-only

Maps: Leaflet envuelto en marco Aurora

Viz: fondos decorativos — orbes, mallas, ruido

Motion: animaciones que respetan prefers-reduced-motion

Forms: controles ricos sobre la base del core

UI: tabs, acordeones, dropdowns, modales, toasts

Patterns: hero, bento, pricing, testimonials, FAQ

Diseña una vez.Escalalo a mil vistas.

Next: liquid glass real, OKLCH y ejes multi-axis

Three.js: escenas 3D reutilizables

AI-native primitives

Utilities: atómicas, pocas y deliberadas

API de referencia

Root & contrato

Componentes por pack

Utilidades

Changelog

Diseña una vez.
Escalalo a mil vistas.