LUZ

A Side A

1. LUZ (Light, Usable & Zero-dependency) is a design system in HTML, CSS and ES modules, with no runtime dependencies. The HTML you write comes out styled with no class, and classes only add what HTML cannot say.

2. You adopt it in independent layers: just the tokens, the tokens and the components, or the catalog on top, with search, cookie consent, a language switch and patterns for a landing page, a blog or documentation. A project that already has a design can load it inside one marked region and migrate page by page.

3. It brings components from buttons, forms and tables to tabs, modal dialogs, alerts and a video, audio and MIDI player. Each one has a page in the documentation with a live example, the markup to copy, and when to use it and when not to.

4. It aims for WCAG 2.2 level AA in its three colour modes, light, dark and high contrast: it works with a keyboard, focus is always visible and every page works without JavaScript. Automated checks run on every change, and the accessibility statement also says what has not been tested yet.

5. It is made for people while staying plain enough for an AI agent to write it correctly: the site publishes the closed list of classes, and luz-check reads a project's HTML and CSS offline and says which classes, elements, load order or colours are wrong.

6. Every change starts with a failing test, and every file has a size ceiling that nobody raises to make it pass. The colour palette is its own, and everything, fonts included, is under the MIT licence, with no registration and no telemetry.

B Side B

1. Facts

   Technologies

   JavaScript · HTML · CSS

   Status

   Online

   Date

   2024

2. Links

   • View demo
   • View code