Tokens, CSS y un poco de JavaScript, sobre lo que el navegador ya hace: empieza un proyecto con LUZ, el sistema de diseño Light, Usable and Zero-dependency, o mígralo página a página. Cada componente funciona antes de que cargue JavaScript y cada cambio empieza con una prueba que falla.
Con JavaScript activado, aquí se dibuja la luz de tu hora.
Base
Colores, escalas y los tres modos como propiedades personalizadas de CSS. Sin componentes: tu marcado, tus clases. En un proyecto que ya existe, empieza aquí: no tocan nada.
npm install @luz-ds/tokens<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">.cta {
background: var(--luz-brand-fill);
color: var(--luz-text-on-fill);
}
.cta:hover {
background: var(--luz-brand-fill-hover);
}
a {
color: var(--luz-brand-primary);
}Base + Core
Los componentes y la maquetación encima de los tokens, en una capa de cascada que tu CSS siempre gana. Para empezar un proyecto, o para migrar uno por partes con luz.conditional.css.
npm install @luz-ds/tokens @luz-ds/core<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script><div class="luz-field">
<label class="luz-field__label" for="f-name">Project name</label>
<input class="luz-input" id="f-name" type="text" aria-describedby="f-name-help">
<div class="luz-field__helper" id="f-name-help">Shown on the dashboard.</div>
</div>
<div class="luz-field">
<label class="luz-field__label" for="f-slug">Slug</label>
<input class="luz-input luz-input--error" id="f-slug" type="text"
aria-invalid="true" aria-describedby="f-slug-error">
<div class="luz-field__error" id="f-slug-error">Use letters, numbers and dashes only.</div>
</div>Base + Core + Catálogo
Lo que necesita un sitio entero: buscar en él, preguntar por las cookies, cambiar de idioma.
npm install @luz-ds/tokens @luz-ds/core @luz-ds/catalog<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">
<!-- One link per catalog component the page uses: here the search -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/search.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js"></script><luz-search>
<a class="luz-search__fallback" href="../docs/a-z/" data-luz-search-fallback>A–Z</a>
<button class="luz-search__trigger" type="button" data-luz-search-open hidden>Search</button>
<dialog class="luz-modal luz-search" id="luz-search"
data-luz-search-src="/search-index.json">
<search class="luz-search__body">
<input class="luz-input" id="luz-search-q" type="text">
<p class="luz-search__status" role="status"></p>
<div class="luz-search__results" data-luz-search-results>…</div>
</search>
</dialog>
</luz-search>Base + Core + Catálogo + tu prompt
Elige el de tu tipo de sitio y pégalo en la IA que uses. Te pregunta lo que necesitas y después construye tu sitio, o pasa a LUZ el que ya tienes.
Una página que convence: un hero, secciones, cifras y un pie.
Artículos en cualquier CMS: una cabecera, encabezados de artículo y un índice.
Pantallas para trabajar: una cabecera, una barra lateral y un panel.
Páginas para aprender: una barra lateral, cabeceras de página, ejemplos y paginación.
¿Otro tipo de sitio, o aún no lo sabes? El prompt general pregunta primero.
Empezar desde ceroPor qué LUZ
Un sistema de diseño para la web que parte del CSS y no necesita compilación. Tu CSS siempre gana, JavaScript solo mejora la experiencia y cada página funciona antes de que cargue.
Poco código y ningún paso de compilación.
CSS sin más y módulos ES pequeños, desde un CDN o desde npm. Sin preprocesador, sin compilador y sin paso de build: lo que lees en los archivos es justo lo que ejecuta el navegador. Tokens y core se mantienen tan pequeños como se puede, y su techo de peso nunca sube. Catalog es ligero porque viene en piezas: cada componente es su propio archivo y una página carga solo los que usa.
La accesibilidad es el punto de partida, no un añadido.
Apunta a WCAG 2.2 AA, el nivel de la versión 4.1.1 de EN 301 549, la norma europea de accesibilidad digital. Parte de lo que el navegador ya hace bien, añade foco visible, contraste y movimiento reducido, y lo comprueba con axe en cada cambio. Todavía no cumple todos los criterios: la declaración enumera lo que se comprueba, lo que no se ha probado y lo que falla.
Tu código, no un árbol del código de otros.
Los paquetes de LUZ se publican sin dependencias: solo CSS y módulos ES sobre lo que el navegador ya ofrece. Nada que instalar para probarlo, ningún framework que seguir y nada que se rompa cuando otra librería publica una versión mayor.
HTML semántico, con estilo
Escribe el elemento que quieres decir y LUZ le da estilo, sin clase. Empieza un proyecto con LUZ, o mígralo página a página: tu CSS siempre gana.
luz.conditional.css da estilo solo a lo que está dentro de [data-luz]; el resto de tu página queda como está.21 de 29 componentes son solo CSS; el resto mejora con un script y funciona sin él.
Ver todas las etiquetas HTML<details open>
<summary>¿Necesito clases?</summary>
<p>No. El HTML ya tiene estilo.</p>
</details>No. El HTML ya tiene estilo.
Sin LUZ
No. El HTML ya tiene estilo.
El mismo HTML, con LUZ
<label for="email">Correo</label>
<input id="email" type="email"
value="ana@example.com">
<button>Guardar cambios</button>Sin LUZ
El mismo HTML, con LUZ
<a class="luz-btn luz-btn--primary"
href="/docs/">Leer la documentación</a>
<button class="luz-btn luz-btn--danger"
type="button">Borrar proyecto</button>Modos de color
Cada color semántico está definido para claro, oscuro y alto contraste, y un atributo, data-theme, los cambia: en toda la página o en una caja, como en estas. Eso viene con core. El resto del día lo decides tú.
Core · incluido
Modo de color por hora del día · Catalog, opcional
Declara en HTML los momentos de tu día, del amanecer a la noche, y deja que quien lee elija uno o recorra el día. Auto sigue siendo el del sistema, y el alto contraste nunca se repinta.
luz-theme-time
Preguntas
Respuestas cortas a lo que se pregunta sobre LUZ: qué es y cómo se usa.
LUZ es un sistema de diseño para la web en tres partes: tokens, core y catálogo, con prompts para que una IA construya el sitio contigo. Deja trabajar al navegador, se comprueba en vez de prometer y una IA puede escribirlo sin inventarse nada.
Los tokens guardan el aspecto, core da estilo a tu HTML y te da componentes, y el catálogo añade lo que necesita un sitio entero. Los tokens son los colores, las escalas, la tipografía y los tres modos de color como propiedades personalizadas de CSS, y se usan solos. Core es el reset, el estilo de cada etiqueta HTML, los objetos de maquetación (o-container, o-stack, o-grid), los componentes (.luz-btn, .luz-card, .luz-tabs) y un poco de JavaScript opcional. El catálogo son piezas para el sitio entero, como el buscador y el banner de cookies.
LUZ parte del navegador y no de un framework: HTML nativo, sin compilación, en cualquier stack, y funciona sin JavaScript. La accesibilidad se comprueba, no se promete: tests con axe, cada contraste calculado en cada modo, colores forzados y movimiento reducido. Pide menos marcado, porque el HTML sale completo sin clases, y se personaliza sin pelearse, con capas, :where() y tokens, nunca !important. Está lista para la IA de forma comprobable: los prompts se generan desde los paquetes, así que nunca llevan una clase inventada.
LUZ se queda corto en comunidad, en widgets complejos (selector de fecha, combobox, tabla de datos), en componentes para React o Vue y en madurez: sigue en 0.x.
La mejor forma son seis pasos, sin nada que compilar:
luz-tokens.css, luz.css y luz.js por CDN o npm._template.css y cambia los valores.La vía rápida: pega en una IA el prompt de tu tipo de sitio y revisa el resultado con luz-check.
No. La mayoría de los componentes de LUZ son solo CSS, y los que tienen script también funcionan sin él. La página de cada componente explica qué obtienes sin JavaScript.
Sí, sin pelearte con ellos. Los tokens son la forma prevista de cambiar el aspecto entero, y tu CSS gana: LUZ va en capas de cascada, así que el CSS sin capa lo vence sin !important. Lo que no sobrescribes se queda: si a un h1 solo le cambias el color, mantiene el tamaño de LUZ.
LUZ vale para sitios escritos en HTML, nuevos o ya hechos: landing, blog, documentación, web de empresa. Encaja con cualquier generador o CMS que produzca HTML, Markdown incluido (Hugo, Astro, Eleventy), con proyectos sin paso de compilación y con sitios que deben ser accesibles y funcionar sin JavaScript. Un sitio que ya existe puede pasar a LUZ por partes.
LUZ no vale para utilidades al estilo de Tailwind ni para apps de React o Vue que esperan los componentes de su framework: LUZ da HTML y clases. Tampoco da la estructura de página ya hecha (cabecera, hero, pie): la escribes tú o la IA.
¿No está aquí? Más preguntas, sobre HTML y clases y sobre proyectos que ya existen