Lumen
Build

Design system

Apply shared semantic tokens, Geist typography, stable regions, and WCAG 2.2 AA.

Shared visual language

Lumen uses warm-paper neutrals, graphite foreground, and one cobalt signal role. Cobalt means focus, selection, link, or the primary action; it is not decoration. State always includes text or shape, not color alone.

The workbench uses shadcn source components, Radix primitives, Tailwind CSS 4, self-hosted Geist and Geist Mono, Lucide icons, and shared OKLCH tokens. Documentation uses Fumadocs' standard neutral DocsLayout plus the same tokens. No second styling, primitive, icon, state, chart, or animation system is introduced.

WCAG 2.2 AA is the conformance gate. Every reachable surface supports keyboard operation, visible focus, 320px reflow, 200% zoom, forced colors, reduced motion, and meaningful landmarks. Graphs and other visual structures require an adjacent text or table alternative.

Motion defaults to stillness and transitions only the changed property. Long-form documentation uses 16px type, 1.6 line height, and a roughly 65-character measure.

On this page