Tokens, CSS and a little vanilla JavaScript, built on what the browser already does: start a project with LUZ, the Light, Usable and Zero-dependency design system, or migrate it page by page. Every component works before JavaScript loads, and every change starts with a failing test.
With JavaScript on, the light of your hour is drawn here.
Base
Colors, scales and the three modes as CSS custom properties. No components: your markup, your classes. In a project that already exists, start here: they touch nothing.
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
Components and layout on top of the tokens, in one cascade layer your own CSS always beats. To start a project, or to migrate one in parts with 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 + Catalog
What a site needs as a whole: search it, ask about cookies, switch its language.
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 + Catalog + your prompt
Pick the one for your kind of site and paste it into the AI you use. It asks what you need, then builds your site, or moves the one you have, onto LUZ.
One page that makes the case: a hero, sections, figures and a footer.
Articles on any CMS: a masthead, article headers and a table of contents.
Screens to work in: a header, a sidebar and a dashboard.
Pages people learn from: a sidebar, page heads, examples and a pager.
Another kind of site, or not sure yet? The general prompt asks first.
Start from scratchWhy LUZ
A CSS-first, zero-build design system for the web. Your CSS always wins, JavaScript is only an enhancement, and every page works before it loads.
Little code, no build step.
Plain CSS and small ES modules, from a CDN or from npm. No preprocessor, no compiler and no build step: what you read in the files is exactly what the browser runs. Tokens and core stay as small as we can keep them, and their size ceiling never goes up. Catalog is light because it comes in pieces: each component is its own file, and a page loads only the ones it uses.
Accessibility is where it starts, not an add-on.
It aims at WCAG 2.2 AA, the level of EN 301 549 version 4.1.1, the EU standard for accessible digital products. It starts from what the browser does well, adds visible focus, contrast and reduced motion, and checks them with axe on every change. It does not meet every criterion yet: the statement lists what is checked, what is untested and what fails.
Your code, not a tree of someone else’s.
LUZ’s packages ship with no dependencies: only CSS and ES modules over what the browser already offers. Nothing to install to try it, no framework to keep up with, and nothing that breaks when another library ships a new major version.
Semantic HTML, styled
Write the element you mean and LUZ styles it, with no class. Start a project with LUZ, or migrate it page by page: your CSS always wins.
luz.conditional.css styles only what is inside [data-luz]; the rest of your page stays as it is.21 of 29 components are CSS only; the rest improve with a script and work without it.
See all HTML tags<details open>
<summary>Do I need classes?</summary>
<p>No. The HTML comes styled.</p>
</details>No. The HTML comes styled.
Without LUZ
No. The HTML comes styled.
The same HTML, with LUZ
<label for="email">Email</label>
<input id="email" type="email"
value="ana@example.com">
<button>Save changes</button>Without LUZ
The same HTML, with LUZ
<a class="luz-btn luz-btn--primary"
href="/docs/">Read the docs</a>
<button class="luz-btn luz-btn--danger"
type="button">Delete project</button>Color modes
Every semantic color is defined for light, dark and high contrast, and one attribute, data-theme, switches them: on the whole page, or on one box, like these. That much comes with core. The rest of the day is up to you.
Core · included
Time-of-day color mode · Catalog, optional
Declare the moments of your day in HTML, from dawn to night, and let the reader pick one, or drag through the day. Auto stays the system's, and high contrast is never repainted.
luz-theme-time docs
Questions
Short answers to what people ask about LUZ: what it is and how to use it.
LUZ is a design system for the web in three parts: tokens, core and the catalog, with prompts so an AI can build the site with you. It lets the browser do the work, checks instead of promising, and an AI can write it without making anything up.
Tokens hold the look, core styles your HTML and gives you components, and the catalog adds what a whole site needs. Tokens are the colors, scales, type and three color modes as CSS custom properties, and they work alone. Core is the reset, the style of every HTML element, the layout objects (o-container, o-stack, o-grid), the components (.luz-btn, .luz-card, .luz-tabs) and a little optional JavaScript. The catalog is pieces for the whole site, like search and the cookie banner.
LUZ starts from the browser instead of from a framework: native HTML, no build step, any stack, and it works without JavaScript. Accessibility is checked, not promised: axe tests, every contrast computed in each mode, forced colors and reduced motion. It needs less markup, because HTML comes out complete without classes, and it is customized without a fight, with layers, :where() and tokens, never !important. It is ready for AI in a way you can verify: the prompts are generated from the packages, so they never carry an invented class.
LUZ falls short in community, in complex widgets (a date picker, a combobox, a data table), in components for React or Vue, and in maturity: it is still 0.x.
The best way is six steps, with nothing to compile:
luz-tokens.css, luz.css and luz.js from the CDN or npm._template.css and change the values.The fast lane: paste the prompt for your kind of site into an AI and review the result with luz-check.
No. Most LUZ components are CSS only, and the ones with a script work without it too. The page of each component says what you get without JavaScript.
Yes, without fighting them. Tokens are the intended way to change the whole look, and your own CSS wins: LUZ is in cascade layers, so unlayered CSS beats it with no !important. What you do not override stays: change only the color of an h1 and it keeps LUZ's size.
LUZ is for websites written in HTML, new or already built: a landing page, a blog, documentation, a company site. It fits any generator or CMS that produces HTML, Markdown included (Hugo, Astro, Eleventy), projects with no build step, and sites that must be accessible and work without JavaScript. An existing site can move to it piece by piece.
LUZ is not for utility classes in the style of Tailwind, nor for React or Vue apps that expect their framework's components: LUZ gives HTML and classes. It gives no ready-made page structure (header, hero, footer) either: you write it, or the AI does.
Not here? More questions, on HTML and classes and on existing projects