Reference

Design tokens

Every theme provides 41 tokens. Components consume them as --lm-* CSS variables. Override any of them at runtime to brand-match.

Using tokens

Tokens are emitted as plain CSS variables on the active theme selector. Use them anywhere — your own components, third-party widgets, or marketing pages — and they'll stay in sync with the active theme.

my-styles.csscss

/* Use any token from any CSS file */
.my-card {
  background: var(--lm-color-surface);
  border: 1px solid var(--lm-color-border);
  border-radius: var(--lm-radius-lg);
  box-shadow: var(--lm-shadow-md);
  transition: box-shadow var(--lm-duration-base) var(--lm-ease-out);
}

.my-card:hover {
  box-shadow: var(--lm-shadow-glow);
}

Color-mix is fair game

Mix tokens with each other or with transparent for soft tints: color-mix(in oklab, var(--lm-color-primary) 14%, transparent).

Colors

Surfaces

Backgrounds and elevation tiers — every Lumora surface uses one of these.

Token	CSS variable	Light value
color-bg	`--lm-color-bg`	`#f8fafc`
color-surface	`--lm-color-surface`	`#ffffff`
color-surface-raised	`--lm-color-surface-raised`	`#f1f5f9`
color-surface-sunken	`--lm-color-surface-sunken`	`#eef2f7`

Text & borders

Foreground hierarchy and border emphasis levels.

Token	CSS variable	Light value
color-text	`--lm-color-text`	`#0f172a`
color-muted	`--lm-color-muted`	`#475569`
color-border	`--lm-color-border`	`#e2e8f0`
color-border-strong	`--lm-color-border-strong`	`#cbd5e1`

Brand

Primary, secondary, accent — paired foreground colors meet WCAG AA.

Token	CSS variable	Light value
color-primary	`--lm-color-primary`	`#1d4ed8`
color-primary-fg	`--lm-color-primary-fg`	`#ffffff`
color-primary-soft	`--lm-color-primary-soft`	`color-mix(in oklab, var(--lm-color-primary) 14%, var(--lm-color-surface))`
color-secondary	`--lm-color-secondary`	`#334155`
color-secondary-fg	`--lm-color-secondary-fg`	`#ffffff`
color-accent	`--lm-color-accent`	`#6d28d9`
color-accent-fg	`--lm-color-accent-fg`	`#ffffff`

Semantic

State and feedback colors. Pair color with text/icon — never color alone.

Token	CSS variable	Light value
color-success	`--lm-color-success`	`#047857`
color-success-fg	`--lm-color-success-fg`	`#ffffff`
color-warning	`--lm-color-warning`	`#92400e`
color-warning-fg	`--lm-color-warning-fg`	`#ffffff`
color-danger	`--lm-color-danger`	`#be123c`
color-danger-fg	`--lm-color-danger-fg`	`#ffffff`
color-info	`--lm-color-info`	`#0369a1`
color-info-fg	`--lm-color-info-fg`	`#ffffff`

Effects

Modal backdrops and focus indicators. Both derive from the active theme.

Swatch	Token	CSS variable	Light value
	color-overlay	`--lm-color-overlay`	`rgb(15 23 42 / 0.55)`
	color-focus-ring	`--lm-color-focus-ring`	`color-mix(in oklab, var(--lm-color-primary) 35%, transparent)`

Radius

5 radius steps drive every Lumora corner. Buttons use md, cards use lg, modals use xl.

radius-sm0.25rem

radius-md0.5rem

radius-lg0.75rem

radius-xl1rem

radius-2xl1.5rem

Shadow

Layered shadows for depth. shadow-glow ties the focus ring to the active primary color.

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-glow

Motion

Two easing curves and three durations cover every Lumora animation. Combine them with standard CSS — every component does.

Token	CSS variable	Value	Used for
ease-out	`--lm-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	State changes (hover, active, opacity transitions).
ease-spring	`--lm-ease-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Overlay enters (modals, popovers, dropdowns).
duration-fast	`--lm-duration-fast`	`120ms`	Hover states, tooltips, focus rings.
duration-base	`--lm-duration-base`	`180ms`	Most state changes (buttons, inputs).
duration-slow	`--lm-duration-slow`	`260ms`	Modals, drawers, page-level animations.

Reduced motion

All animations are wrapped in a @media (prefers-reduced-motion: reduce) rule that collapses durations to 0.01ms. Users who opt out get instant state changes.

Density

A single multiplier scales control padding and gaps. Default is 1. Set density: 0.88 in your theme for compact admin views, 1.14 for marketing.

example.htmlhtml

<!-- Or per-region without changing the theme -->
<section class="lm-density-compact">…</section>
<section class="lm-density-comfortable">…</section>
<section class="lm-density-spacious">…</section>