Getting Started

Install in 30 seconds.

Lumino ships as a CSS file, a TypeScript package, and a downloadable asset bundle. Pick the integration layer that fits your stack — they all resolve to the same tokens.

Quick start

The fastest way: drop a single stylesheet in your <head>. Every token is exposed as a CSS custom property. Every component you write from there — in any framework or no framework — resolves through the same variables.

Consuming tokens

Tokens come in two forms: semantic names (--color-surface-panel) and legacy aliases (--bg-1) kept for portal compatibility. Prefer semantic names in new code.

Applying a theme

Themes apply via data-theme on any ancestor (usually <html> or a root wrapper). Stack data-mode and data-density on top.

Using components

Components are available in three flavors: React/TSX (recommended), class-based for the portal monolith, and semantic HTML you can style yourself.

Next steps

Tokens reference
Every color, type, spacing, motion, shadow, radius, and z-index token.
Browse tokens →
Component gallery
Buttons, Cards, Inputs, Modals, Tabs, Tables, Toasts…
Open gallery →
Themes explorer
See Pro / Studio / Playful × light / dark × three densities side-by-side.
Try themes →
Theme Forge
Fork the system into your own palette and export a drop-in tokens.css.
Forge a theme →