# LUZ

> Install LUZ, find a component and copy its markup, or look up a token, a page pattern or an HTML element. MIT licence. In beta: any release may break anything, and the changelog says how to migrate.

Packages, in load order: @luz-ds/tokens, @luz-ds/core, @luz-ds/catalog; of catalog a page links only the components it uses, the patterns of your kind of site (landing, blog, app, documentation) among them. Use only the classes listed in each package's classes.json. After you write HTML or CSS, run `npx @luz-ds/check@0.3.0` on the files and fix what it reports; it reads source, so it does not replace testing in a browser.

## Get started
- [Install LUZ](https://nandovejer.github.io/luz/docs/get-started/): Pick a level, then copy one install command or the CDN tags. Each level needs the ones below it and nothing above.
- [Choose your snippet](https://nandovejer.github.io/luz/docs/get-started/snippet/): Pick what you are building and how you load it, then copy the lines. The CDN lines carry integrity hashes.
- [How LUZ is organised](https://nandovejer.github.io/luz/docs/get-started/structure/): Packages that depend in one direction, CSS in cascade layers inside one called luz, and one optional script.
- [How to read LUZ](https://nandovejer.github.io/luz/docs/get-started/how-to-read/): What the names in LUZ's CSS, markup and tokens tell you, and which of them you can rely on.
- [Make it yours](https://nandovejer.github.io/luz/docs/get-started/make-it-yours/): Change the colours, fonts, sizes, corners and shadows of LUZ with tokens, and adjust one component with CSS of your own.
- [With a bundler or framework](https://nandovejer.github.io/luz/docs/get-started/bundler/): Import LUZ's CSS and script in Astro or any tool that resolves package names, and keep the layer order and the fonts.
- [JavaScript modules](https://nandovejer.github.io/luz/docs/get-started/javascript/): What each optional script adds, how to load only the one you need, and what a page does without them.
- [Cascade layers](https://nandovejer.github.io/luz/docs/get-started/layers/): How LUZ sits in your cascade: one layer called luz, the order to declare, and how to override it with no !important.
- [Print styles](https://nandovejer.github.io/luz/docs/get-started/print/): What LUZ changes on paper, and how to keep or change any of it, with one layer and no extra file when you load luz.css.
- [Working with AI](https://nandovejer.github.io/luz/docs/get-started/ai/): What an AI coding agent can read, how to check what it wrote, and the accessibility reviewer you can give it.
- [Migrate a project to LUZ](https://nandovejer.github.io/luz/docs/get-started/migrate/): Move a project that has its own CSS to LUZ one page at a time, in five steps. An AI does the mechanical work; you decide and check.
- [How LUZ is built](https://nandovejer.github.io/luz/docs/get-started/how-luz-is-built/): Three promises behind every release: it is made for people first and readable by AI agents, every change starts with a failing test, and nothing runs in your page that you did not load.
- [More questions](https://nandovejer.github.io/luz/docs/get-started/faq/): Answers on classless HTML and on migration.

## Kinds of site
- [Kinds of site](https://nandovejer.github.io/luz/docs/kinds/): Start a landing page, a blog, an app or a documentation site with LUZ: a prompt for any LLM, and the recipes of each part to copy.
- [Landing page](https://nandovejer.github.io/luz/docs/kinds/landing/): The page of a product or an event: a prompt for an LLM, and recipes for its header, hero, sections, stats and footer.
- [Blog or newspaper](https://nandovejer.github.io/luz/docs/kinds/blog/): A blog or a newspaper, on any CMS: a prompt for an LLM, and recipes for its header, page header, post cards, article header, table of contents and footer.
- [Web application](https://nandovejer.github.io/luz/docs/kinds/app/): A web application: a prompt for an LLM, and recipes for its shell with a sidebar, its header and its dashboard.
- [Documentation site](https://nandovejer.github.io/luz/docs/kinds/docs/): A documentation site: a prompt for an LLM, and recipes for its shell, page head, rail, example, do and don't, pager and page foot.

## Tokens
- [Tokens](https://nandovejer.github.io/luz/docs/tokens/): CSS custom properties for every colour, space, size and type value. Use the semantic ones: they change with the color mode.
- [Color](https://nandovejer.github.io/luz/docs/tokens/color/): Every colour a component may use, named by its job, with its value in light, dark and high contrast side by side.
- [Spacing and sizing](https://nandovejer.github.io/luz/docs/tokens/spacing/): The space scale for gaps and padding, and the heights of buttons and fields.
- [Typography](https://nandovejer.github.io/luz/docs/tokens/typography/): The three font stacks, the type scale in rem, and the smallest size each kind of text may use.
- [Color modes and themes](https://nandovejer.github.io/luz/docs/tokens/modes/): Switch between light, dark and high contrast with one attribute, or make a look of your own.
- [Radius](https://nandovejer.github.io/luz/docs/tokens/radius/): The corner radius scale: square, 2px, 4px at most, and round.
- [Shadows](https://nandovejer.github.io/luz/docs/tokens/shadows/): The elevation scale: how far a surface seems to float above the page.
- [Motion](https://nandovejer.github.io/luz/docs/tokens/motion/): The durations and easings of every transition, which drop to zero when the reader asks for reduced motion. Ships with @luz-ds/tokens.
- [Layers](https://nandovejer.github.io/luz/docs/tokens/layers/): Which layer sits on top: the z-index of every overlay, in order. Ships with @luz-ds/core.
- [Layout and breakpoints](https://nandovejer.github.io/luz/docs/tokens/layout/): How wide content gets, and where the layout changes. Widths ship with @luz-ds/core, breakpoints with @luz-ds/tokens.
- [Color palette](https://nandovejer.github.io/luz/docs/tokens/palette/): The primitive colour scales. For theme authors only: components never use them.
- [Tokens in Figma](https://nandovejer.github.io/luz/docs/tokens/figma/): The tokens as one design-tokens file for Figma variables and other design tools, with the same names and the three modes.
- [Contrast check](https://nandovejer.github.io/luz/docs/tokens/contrast/): Check your own color overrides against the contrast LUZ promises, with one command or in the page, before they reach a user.
- [Make your own theme](https://nandovejer.github.io/luz/docs/tokens/themes/): LUZ ships one look in three color modes. A theme of your own is a file of semantic tokens: start from the template, check it, load it.

## Core
- [Core](https://nandovejer.github.io/luz/docs/components/): Every core component, grouped by task, with a live example, the markup to copy and when to use it.
- [Accordion](https://nandovejer.github.io/luz/docs/components/accordion/): Shows and hides sections of content with the native details and summary elements, one at a time if you name the group.
- [Alert](https://nandovejer.github.io/luz/docs/components/alert/): Tells the reader about the page or a task: information, success, a warning or an error.
- [Avatar](https://nandovejer.github.io/luz/docs/components/avatar/): Shows who a person or a team is, with their initials or a photo, in three sizes.
- [Band](https://nandovejer.github.io/luz/docs/components/band/): Sets one block of a page on a tint that runs from edge to edge, while its content keeps the column.
- [Breadcrumb](https://nandovejer.github.io/luz/docs/components/breadcrumb/): Shows where the page sits in the site, as a trail of links to its parents.
- [Button](https://nandovejer.github.io/luz/docs/components/button/): Starts an action on the current page, such as saving, sending or opening a dialog.
- [Card](https://nandovejer.github.io/luz/docs/components/card/): Groups a few facts about one thing on a bordered surface.
- [Code](https://nandovejer.github.io/luz/docs/components/code/): Shows code inside a sentence, or in a block with syntax colours in every mode.
- [Color mode](https://nandovejer.github.io/luz/docs/components/theme-mode/): Lets readers choose Auto, light, dark or high contrast: radios that work without JavaScript, or one round button that steps through them.
- [Copy button](https://nandovejer.github.io/luz/docs/components/copy-button/): Copies a command or a value to the clipboard, and says it did.
- [Dropdown](https://nandovejer.github.io/luz/docs/components/dropdown/): A button that opens a short list of actions or links, anchored under it.
- [Figure](https://nandovejer.github.io/luz/docs/components/figure/): Shows an image, a chart or a diagram with a caption that says what it is.
- [Icons](https://nandovejer.github.io/luz/docs/components/icons/): Lets readers browse a set of icons by name and copy the SVG of each one.
- [Image](https://nandovejer.github.io/luz/docs/components/image/): Shows a picture in a frame of fixed shape, on a flat surface while it loads or when it is missing.
- [Meta line](https://nandovejer.github.io/luz/docs/components/meta/): Shows a few facts about something on one line, such as its date, its reading time and its author, with a dot between them.
- [Meter](https://nandovejer.github.io/luz/docs/components/meter/): Draws a value in a known range as a bar, next to its figure, with the native meter element.
- [Modal](https://nandovejer.github.io/luz/docs/components/modal/): Asks for a decision that must be made before the reader goes on, in a native dialog.
- [Pagination](https://nandovejer.github.io/luz/docs/components/pagination/): Links to the pages of a list that goes on over several, with the current page marked.
- [Player](https://nandovejer.github.io/luz/docs/components/player/): Plays a video, a sound or a MIDI file in the page, with the same controls for all three.
- [Progress](https://nandovejer.github.io/luz/docs/components/progress/): Shows how far a task that takes time has got, with the native progress element.
- [Prose](https://nandovejer.github.io/luz/docs/components/prose/): Sets long text in lines of about 70 characters, with space between its blocks, whatever markup an editor writes inside.
- [Skip link](https://nandovejer.github.io/luz/docs/components/skip-link/): Lets keyboard users jump past the header to the main content.
- [Table](https://nandovejer.github.io/luz/docs/components/table/): Compares records across several attributes, in rows and columns that stay readable at 320 px.
- [Tabs](https://nandovejer.github.io/luz/docs/components/tabs/): Switches between panels of related content in one place; without JavaScript the panels are stacked sections.
- [Tag and badge](https://nandovejer.github.io/luz/docs/components/tag/): Labels an item with a short status or category (tag), or shows a count (badge).
- [Toast](https://nandovejer.github.io/luz/docs/components/toast/): Confirms a small result, such as "Draft saved", without interrupting the reader.
- [Tooltip](https://nandovejer.github.io/luz/docs/components/tooltip/): Adds a short hint to a control on hover or focus; never essential content.
- [Inputs](https://nandovejer.github.io/luz/docs/components/form-inputs/): One control for each type of input: the type tells the browser the keyboard, the picker and the check.
- [Choice](https://nandovejer.github.io/luz/docs/components/form-choice/): Pick from options the reader can see: checkbox, radio, switch and select.
- [Values](https://nandovejer.github.io/luz/docs/components/form-values/): Show or compute a value instead of collecting text: meter and output.
- [Field parts](https://nandovejer.github.io/luz/docs/components/form-field-parts/): What wraps a control: the label, the hint, the error and the group.
- [Layout objects](https://nandovejer.github.io/luz/docs/components/layout/): Lay out blocks in a stack, a row, a grid or beside an image, a group of actions, and the page itself with its sticky bar, with the o-* classes.
- [Utility classes](https://nandovejer.github.io/luz/docs/components/utilities/): Small u-* classes that do one thing each, for the cases a component does not cover.
- [Keyframes](https://nandovejer.github.io/luz/docs/components/keyframes/): Five shared animations for your own components, which stop when the reader asks for reduced motion.

## Catalog
- [Catalog](https://nandovejer.github.io/luz/docs/catalog/): The pieces that are not core's, one stylesheet each: the navigation of the site, the tags with a script or an identity of their own, such as search and cookie consent, and the patterns of a landing page, a blog, an app and a documentation site.
- [App header](https://nandovejer.github.io/luz/docs/catalog/app-bar/): The quiet bar at the top of an application's main area: the menu button, the product name on a phone, the search and the account.
- [Site header](https://nandovejer.github.io/luz/docs/catalog/site-header/): Starts every page of a site with its name, its main links and a few controls, in one row that stays at the top.
- [Masthead](https://nandovejer.github.io/luz/docs/catalog/masthead/): Starts the front page and the sections of a newspaper with the date, a search, the publication's name in large type and its sections, in three rows that scroll away with the page.
- [Language switch](https://nandovejer.github.io/luz/docs/catalog/lang-switch/): Lets readers go to the same page in another language, from a button in the header.
- [Navbar](https://nandovejer.github.io/luz/docs/catalog/navbar/): Puts the main links of a site in a header's row, and in a panel under it on a narrow screen.
- [Sidebar](https://nandovejer.github.io/luz/docs/catalog/sidebar/): Holds the main navigation of a site or an app, and becomes a drawer on small screens.
- [Submenu](https://nandovejer.github.io/luz/docs/catalog/submenu/): Groups a few links of a header under one button, so the header keeps a short row of links.
- [Article header](https://nandovejer.github.io/luz/docs/catalog/article-header/): Opens a story with its section, its title, a standfirst, who wrote it and when, and an optional lead picture.
- [Blog page header](https://nandovejer.github.io/luz/docs/catalog/page-header/): Gives a page that is not an article, such as About or Contact, its title and one sentence about what it is for.
- [Hero](https://nandovejer.github.io/luz/docs/catalog/hero/): Opens a home or landing page with its title, one sentence, the main actions and an optional picture.
- [Site footer](https://nandovejer.github.io/luz/docs/catalog/site-footer/): Ends every page of a site with who made it, its licence and a few secondary links, under a rule, in a row or as columns.
- [Main and sections](https://nandovejer.github.io/luz/docs/catalog/section/): Gives a landing page its rhythm: wide room between the blocks of the main, a closer one inside each section, with its head, and an optional glow behind the page.
- [FAQ](https://nandovejer.github.io/luz/docs/catalog/faq/): Lists the questions visitors ask with their answers, in groups, as native disclosures that work without a script.
- [Stat](https://nandovejer.github.io/luz/docs/catalog/stat/): Shows one figure big, with a short label under it.
- [Table of contents](https://nandovejer.github.io/luz/docs/catalog/toc/): Lists the sections of a long article, beside the text when there is room and above it when there is not.
- [Terminal](https://nandovejer.github.io/luz/docs/catalog/terminal/): Shows a command in a framed block, with tabs as its title bar and a copy button for the open one.
- [Timeline](https://nandovejer.github.io/luz/docs/catalog/timeline/): Shows dated events in order, one card at a time on a rail of dates or all at once down a line; without JavaScript it is a list.
- [Post list](https://nandovejer.github.io/luz/docs/catalog/post-list/): Lays out a list of posts as a grid, with the latest one larger, or as a compact list of rows. Each post is a card.
- [Embed](https://nandovejer.github.io/luz/docs/catalog/embed/): A poster and a play button in place of a player from another site, which loads only when the visitor asks, after consent.
- [Social links](https://nandovejer.github.io/luz/docs/catalog/social/): Links to a site's profiles and feeds, each an icon and a name.
- [Dashboard](https://nandovejer.github.io/luz/docs/catalog/dashboard/): The view of an application at a glance: its title and main action, then a grid of panels that fills the room the view has.
- [Chart](https://nandovejer.github.io/luz/docs/catalog/chart/): Draws a line, an area or a small trend line from a table or a list of numbers you already wrote, which stays in the page beside it.
- [Bar list](https://nandovejer.github.io/luz/docs/catalog/bar-list/): Compares a few values as a list of names, figures and bars, with the native meter element.
- [Column chart](https://nandovejer.github.io/luz/docs/catalog/column-chart/): Compares a few values as columns of one height scale, drawn from a native table that keeps every figure as text.
- [Stacked bar](https://nandovejer.github.io/luz/docs/catalog/stacked-bar/): Shows the shares of a whole in one bar, with a legend that says each name and figure in text.
- [Heat map](https://nandovejer.github.io/luz/docs/catalog/heat-map/): Shows how much in each cell of a grid by colour and by figure, from a native table; a calendar is one.
- [Ring](https://nandovejer.github.io/luz/docs/catalog/ring/): Shows one value over a goal, or the shares of a total, as half a ring over the figure that says it.
- [Color mode by time of day](https://nandovejer.github.io/luz/docs/catalog/theme-time/): Adds the time of day to the color mode: a reader picks a moment you declare, or drags a slider through the hours, and Auto stays the system's.
- [Announcement](https://nandovejer.github.io/luz/docs/catalog/announcement/): Tells every visitor one short thing at the top of the page, such as a sale, an event or planned maintenance.
- [Cookie consent](https://nandovejer.github.io/luz/docs/catalog/cookie-consent/): Asks a visitor once whether the site may use optional cookies, with Accept and Reject side by side, and remembers the answer.
- [Search](https://nandovejer.github.io/luz/docs/catalog/search/): Finds a page, a section or an HTML element of a site by name, from a button in the header.
- [Page transition](https://nandovejer.github.io/luz/docs/catalog/page-transition/): One page fades into the next when a visitor follows a link, in browsers that support it, with nothing to write but a link to one stylesheet.
- [Do and don't](https://nandovejer.github.io/luz/docs/catalog/do-dont/): A Do and a Don't, one example to follow and one to avoid, each with its reason, side by side when there is room.
- [Example](https://nandovejer.github.io/luz/docs/catalog/example/): A live preview with its code under it, in one frame, as wide as the width you give it.
- [Page foot](https://nandovejer.github.io/luz/docs/catalog/page-footer/): The small print under a page: when it was last updated, and links to edit it or report a problem.
- [Page head](https://nandovejer.github.io/luz/docs/catalog/doc-header/): The top of a documentation page: the eyebrow, the title, one sentence and the chips that say what the page covers.
- [Pager](https://nandovejer.github.io/luz/docs/catalog/pager/): Two link blocks at the end of a page, to the previous page and to the next, each with the title it leads to.
- [Rail](https://nandovejer.github.io/luz/docs/catalog/page-rail/): The list of the sections of the page that stays in view beside the content, with the actions of the page under it.
- [Shell](https://nandovejer.github.io/luz/docs/catalog/docs-layout/): The page of a documentation site in three columns: the sidebar, the content and a rail, down to one column on a phone.
- [Class reference](https://nandovejer.github.io/luz/docs/catalog/classes/): Every tag and class of the catalog, from search and cookie consent to the patterns of a kind of site, what element it goes on and what it does, in one place.

## HTML elements
- [HTML elements](https://nandovejer.github.io/luz/docs/html/): How LUZ styles each of the 116 current HTML elements, with a live example and the markup to copy.
- [Forms](https://nandovejer.github.io/luz/docs/html/forms/): Controls and the structure around them. Buttons, fields, selects, labels and fieldsets are styled with no class, and so are output, meter and progress. A .luz-* class adds a role, a size or the parts a bare element cannot say.
- [Text blocks](https://nandovejer.github.io/luz/docs/html/text/): Hold the reading content of a page: paragraphs, lists, quotations and preformatted text.
- [Inline text](https://nandovejer.github.io/luz/docs/html/inline/): Mark up words and phrases inside a block: emphasis, abbreviations, code, time, notes. Pick the element for its meaning; the style follows.
- [Page structure](https://nandovejer.github.io/luz/docs/html/structure/): Build the big blocks of a page: landmarks, headings and the sections between them. They look like plain boxes; their value is what they tell assistive technology.
- [Tables](https://nandovejer.github.io/luz/docs/html/tables/): Show data in rows and columns. A bare table is styled with no class, at the full width of its container. Add .luz-table and wrap it in .luz-table-wrap so it can scroll and stack.
- [Images and media](https://nandovejer.github.io/luz/docs/html/media/): Show images, sound and video, with their captions, or make parts of an image clickable.
- [Built-in widgets](https://nandovejer.github.io/luz/docs/html/widgets/): Open and close content, and show dialogs, with native elements and no script.
- [Frames and embeds](https://nandovejer.github.io/luz/docs/html/embeds/): Show content that comes from elsewhere: another page in a frame, a file in a viewer, an image that changes with the screen.
- [SVG and MathML](https://nandovejer.github.io/luz/docs/html/svg-mathml/): Draw graphics and write maths inside HTML. Both are part of the page and take the same tokens.
- [Script and canvas](https://nandovejer.github.io/luz/docs/html/scripting/): Draw with script, say what happens when script is off, and load the script itself.
- [Tracked edits](https://nandovejer.github.io/luz/docs/html/edits/): Show what changed in a text: what was taken out and what was put in.
- [Page metadata](https://nandovejer.github.io/luz/docs/html/metadata/): Tell browsers, search engines and scripts about the page. Readers never see these elements, so the cards show the markup only.
- [Document root](https://nandovejer.github.io/luz/docs/html/document/): The root of the page and the body that holds everything the reader sees. Shown as markup: LUZ styles both in its document layer.
- [Web Components](https://nandovejer.github.io/luz/docs/html/web-components/): Build custom elements: a template that is parsed but not shown, and a slot that shows the page's content inside a shadow tree.

## Accessibility
- [Accessibility statement](https://nandovejer.github.io/luz/docs/accessibility/): LUZ aims for WCAG 2.2 level AA. What is checked on every change, what has not been tested, and the known issues. Last reviewed on 5 November 2026.

## Documentation
- [LUZ documentation](https://nandovejer.github.io/luz/docs/): Install LUZ, find a component and copy its markup, or look up a token, a page pattern or an HTML element.
- [Privacy and storage](https://nandovejer.github.io/luz/docs/privacy/): Who runs this site, what it stores in your browser and what happens when you play a video from YouTube. Last reviewed on 1 November 2026.

## Prompts
- [Build a site](https://nandovejer.github.io/luz/prompts/start.txt): The general prompt: paste it into any LLM; it asks in rounds, then builds or migrates the site with LUZ.
- [Build a landing page](https://nandovejer.github.io/luz/prompts/landing.txt): The prompt for a landing page: paste it into any LLM; it asks in rounds, then builds or migrates the site with LUZ.
- [Build a blog](https://nandovejer.github.io/luz/prompts/blog.txt): The prompt for a blog: paste it into any LLM; it asks in rounds, then builds or migrates the site with LUZ.
- [Build an app](https://nandovejer.github.io/luz/prompts/app.txt): The prompt for an app: paste it into any LLM; it asks in rounds, then builds or migrates the site with LUZ.
- [Build a documentation site](https://nandovejer.github.io/luz/prompts/docs.txt): The prompt for a documentation site: paste it into any LLM; it asks in rounds, then builds or migrates the site with LUZ.

## Optional
- [Full documentation for agents](https://nandovejer.github.io/luz/llms-full.txt): The same pages, as text: markup, variants, when to use, keyboard.
- [Markup example: Button](https://nandovejer.github.io/luz/examples/components/button.html): A page of the markup of Button, styled by LUZ; every component and pattern page has one under /examples/.
- [Classes of @luz-ds/core](https://nandovejer.github.io/luz/manifests/core/classes.json): Every class, element and custom property of the package; each package has its own folder under /manifests/.
- [Elements of @luz-ds/catalog](https://nandovejer.github.io/luz/manifests/catalog/custom-elements.json): The custom elements the package defines or declares, with their attributes.