Design system

Lily UI

An accessible design system, colored by tokens. A WCAG 2.1 AAA design system that renders identically across React, Vue, and Web Components.

One component set, three frameworks

Whether you pick React, Vue, or Web Components, the rendered HTML, class names, and keyboard behavior are identical. Choose per team or per page.

React Vue Web Components

Design principles

WCAG 2.1 AAA

7:1 body contrast, full keyboard support, visible focus, reduced motion. We target AAA, not AA.

Token-driven

Color, spacing, radius, and shadow are all named tokens — never raw values or hex codes.

Light / dark

The same token names carry both light and dark values, so every component holds up in either mode.

AI-friendly

Uniform prop names, class names, and file layout let an agent infer correct code from convention.

Component catalog · 99