Tokens, themes, components, and a full marketing studio — all harvested from the Lumino learning portal and packaged for teams building kind, precise, human software.
The design system ships as CSS variables, TSX components, and downloadable assets. Use any layer standalone.
120+ CSS custom properties for color, type, spacing, motion, shadows, radii, and z-index. Every value documented, every var copy-ready.
Browse tokens →Pro, Studio, and Playful swap type, radii, and accent. Light/dark modes and compact/comfy/spacious densities stack on top.
Explore themes →13 preset color variants on a parametric 12-petal mark. Solid below 28px, stroked above. Download SVG + PNG in any style.
See the mark →Buttons, Cards, Inputs, Modals, Tabs, Tables, Toasts, Tooltips, Menus, Sliders — with CSS, React/TSX, and plain HTML code for each.
Open gallery →Heroes, forms, data tables, dialogs, empty states, loading skeletons — compositional recipes that follow our density + rhythm rules.
Read patterns →60+ monoline SVG icons, all currentColor. Copy-as-SVG or pass through the <Icon name=""> React component.
The Lumino tone ladder: warm, precise, never patronizing. Do/don't examples for buttons, errors, empty states, and onboarding.
Learn the voice →WCAG-AA contrast on every token pair. Focus ring, motion-safe rules, ARIA patterns for every component. Built-in contrast checker.
A11y guide →Spin up on-brand slides, social cards, posters, and one-pagers — all client-side. Export to PNG, PDF, or editable PPTX.
Open studio →Fork the baseline into your own palette. Generate harmonious colors, preview every component live, and export a drop-in tokens.css.
A whiteboard for illustrated marketing, empty states, and classroom moments. Stamp doodles, add Caveat labels, sketch freehand, export PNG or SVG.
Open whiteboard →Drop any two colors in, get WCAG AA/AAA pass/fail for text and UI. Auto-tests every token pair in our palette.
Check colors →Visualize the type scale, spacing scale, and radii on real UI. Measure spacing between any two elements with pixel overlays.
Open ruler →Pro is adult and precise. Studio is hybrid — warm serif headlines for teens and creative professionals. Playful rounds everything off for kids. Click to apply site-wide.
Precision over noise.
Make something of this.
Go on — try it!
Design systems are only as good as the care taken in their smallest details. Lumino is a system where every value — every 14px, every oklch, every cubic-bezier — earns its place.— Internal design team, Lumino