Quality
A design system is only as good as what it can prove. Every number on this page is computed from the source when the site is built, and every claim is a gate that runs on each change: a regression fails the build instead of reaching you.
- 15.5:1in any of 5 themes, light or dark
- 5.3:1WCAG AA asks for 4.5:1
- 157every component, block, page and template, both modes
- 0React is a peer only for the React packages
Contrast is solved, not checked
A theme is a few decisions: a brand color, a neutral tint, a character. The engine derives every color from them and solves each pairing to a target, in both modes, so a theme cannot ship a label you cannot read. Even a hover keeps its label's contrast. These are the weakest pairings in each family, per theme:
| Theme | Body text | Secondary text | Quietest text | Labels on color | Colored text |
|---|---|---|---|---|---|
| Graphite light | 15.5 | 6.8 | 5.2 | 5.3 | 5.3 |
| Graphite dark | 15.9 | 6.9 | 5.3 | 6.2 | 6.7 |
| Atelier Umami light | 15.5 | 6.8 | 5.2 | 5.3 | 5.3 |
| Atelier Umami dark | 16.1 | 7.0 | 5.4 | 6.1 | 6.9 |
| Machined Titanium light | 15.5 | 6.8 | 5.2 | 5.3 | 5.3 |
| Machined Titanium dark | 15.9 | 6.9 | 5.3 | 6.2 | 6.7 |
| Aerogel Glass light | 15.5 | 6.8 | 5.2 | 5.3 | 5.3 |
| Aerogel Glass dark | 16.0 | 7.1 | 5.5 | 6.1 | 6.8 |
| Nordic Earth light | 15.5 | 6.8 | 5.2 | 5.3 | 5.3 |
| Nordic Earth dark | 16.0 | 6.9 | 5.3 | 6.1 | 6.8 |
Ratios are WCAG 2 contrast against the page, a surface and a subtle panel, whichever is weakest. Labels on color include each fill's hover. Each theme and mode guarantees 41 pairings; none is below its target. A theme from the Studio is solved the same way.
Accessibility is a gate
- axe-core checks all 157 items against WCAG 2.2 A and AA in light and dark mode: 54 free and 54 Pro components, 25 blocks, 10 pages and 14 templates. There are no exceptions.
- The site's own pages pass the same sweep at a desktop and a phone width, with no sideways scroll.
- Keyboard journeys (focus traps, roving focus, restoring focus when a dialog closes) run in Chromium, Firefox and WebKit, the engine behind Safari.
- Every rendered line of text is measured for contrast in every theme and mode, not only the palette.
- Reduced motion and forced colors are tested modes, and touch targets grow to a fingertip on touch screens.
Light by construction
| Package | Runtime dependencies | Peers |
|---|---|---|
@mlola-ui/engine | None | None |
@mlola-ui/tokens | None | None |
@mlola-ui/behavior | None | None |
@mlola-ui/icons | None | react, react-dom |
@mlola-ui/motion | None | react, react-dom |
@mlola-ui/scene | None | react, react-dom |
The stylesheet a page needs before it paints is 26.4 KB with Brotli. Without a framework, the behavior runtime is 8.6 KB with gzip across 3 modules, and it is the whole of what a plain HTML page loads to get keyboard, focus and state. There is no Tailwind, no Radix and no class merging to install.
A contract a model cannot invent around
The stylesheet is the specification: 92 elements declare 154 attribute contracts, and 10 behaviors are specified as data that the React components and the framework-free runtime both satisfy. Markup is checked against it, so a class or value that does not exist is an error, whether a person or a coding agent wrote it. Every free component's HTML renders and passes axe with no framework at all.
What is not proven yet
- Automated checks catch much, not all. Screen reader passes follow a written checklist and are done by hand.
- WebKit is tested as an engine; Safari on a real iPhone is checked by hand before a release.
- Right-to-left layouts are not yet complete: some component styles still use physical left and right.
Check it yourself
The engine and the free components are open source, with the tests that hold the palette to its guarantees. Clone the repository and run them:
git clone https://github.com/mlolahq/mlola-ui.git
cd mlola-ui && npm install
npm test # re-derives every palette and fails if a guaranteed pairing misses its targetThe browser suites (the axe sweep, keyboard journeys in three engines, rendered contrast and mobile audits) run in Mlola's continuous integration on every change, across the free and Pro catalog.