Design Tokens
Semantic CSS custom properties (--l-*) that drive every Luxen UI element. They build on Luxen's own oklch palette and resolve light/dark automatically via light-dark(). Always reference these semantic tokens — never raw palette colors — so theming and dark mode propagate everywhere.
The primitive palette is vendored from Tailwind CSS v4 — same 26 oklch families, same values, locked at sync time so Tailwind version bumps don't shift your design.
Reference tokens canonically as var(--l-color-*) in your CSS. If you use Tailwind, the bridge exposes them as semantic utility classes (text-primary, bg-fill-brand, bg-fill-info-soft, border-interactive, …).
Click any token name to copy its var(…) reference.
Color · Text
Main body text, headings, and high-emphasis content. Use as the default text color throughout the UI.
Supporting text, descriptions, captions, and medium-emphasis content like helper text beneath form fields.
Placeholder text, disabled labels, and low-emphasis content like timestamps or metadata.
Neutral semantic text for default-state badges, tags, and status labels with no specific severity.
Informational semantic text for badges, alerts, banners, and status indicators conveying neutral information.
Warning semantic text for badges, alerts, and status indicators conveying caution or non-blocking issues.
Danger/error semantic text for badges, alerts, validation messages, and destructive action labels.
Success semantic text for badges, alerts, and status indicators conveying completion or positive outcomes.
Text color for disabled labels, values, and icons in form controls, buttons, and interactive elements.
Text on brand-filled surfaces like primary buttons. Maximum contrast against --l-color-bg-fill-brand.
Color · Surface
Default page-level background. Use on <body>, main content areas, and cards at the base layer.
Elevated overlay background for modals, dialogs, drawers, popovers, and any surface that floats above the page with a backdrop. Slightly lighter than --l-color-surface in dark mode to create visual separation from the page beneath.
Background color for disabled form controls, buttons, and interactive elements. Subtle tint to reinforce non-interactivity.
Translucent background tint for hovered rows in lists, menus, trees, tables, and similar roving collections. Alpha-based so underlying indent guides, borders, or zebra stripes stay visible.
Translucent background tint for the selected (persistent) row in lists, trees, menus, listboxes, and tables. Alpha-based so underlying indent guides, borders, or zebra stripes stay visible. Semantically paired with `aria-selected="true"` / `:state(selected)`.
Semi-transparent backdrop behind modals, dialogs, drawers, and any overlay that dims the page content. Darker in dark mode for better contrast against dark surfaces.
Stronger backdrop for immersive overlays where the underlying page should fade well into the background — media viewers (`<l-stories-viewer>`), lightboxes, and full-screen players. The page stays barely perceptible but visual focus is unambiguously on the foreground.
Color · Border
Default border for form controls, secondary buttons, inputs, selects, and any element that needs a thin neutral outline. Visible enough to delimit the element without competing with surrounding content.
Subtle border or ring for interactive elements like close buttons, toggles, and icon buttons on hover. Provides low-contrast visual feedback without competing with primary content.
Border for floating surfaces like popovers, dropdowns, menus, tooltips, and combobox listboxes. Aliases --l-color-border so overlays stay visually consistent with form controls, but exposed as a separate semantic so consumers can soften overlay borders independently if needed. Pairs with --l-color-surface-overlay.
Border color for disabled form controls, buttons, and interactive elements. Faded to signal non-interactivity.
Subtle divider line for separating content sections, list items, and card groups. Lighter than --l-color-border to avoid visual competition with interactive element borders.
Focus ring color for :focus-visible outlines on interactive elements like buttons, inputs, and links.
Color · Fill
Three-tier status scale ordered by visual weight: soft (palest tint), subtle (clearly tinted), strong (full-intensity solid).
Primary brand fill for CTA buttons, active toggles, and primary action backgrounds.
Hover state of brand-filled elements like primary buttons and active toggles.
Active/pressed state of brand-filled elements like primary buttons during click or tap.
Secondary control fill for buttons, toggles, and non-primary interactive surfaces.
Soft neutral fill — palest tint for toast backgrounds, alert containers, and callout boxes.
Subtle neutral fill — tinted background for badges, tags, selected states, and secondary highlights.
Strong neutral fill — solid background for solid badges and high-emphasis status indicators. Pair with --l-color-surface for foreground.
Soft info fill — palest tint for toast backgrounds, alert containers, and callout boxes.
Subtle info fill — tinted background for badges, tags, selected states, and secondary highlights.
Strong info fill — solid background for solid badges and high-emphasis status indicators.
Soft warning fill — palest tint for toast backgrounds, alert containers, and callout boxes.
Subtle warning fill — tinted background for badges, tags, selected states, and secondary highlights.
Strong warning fill — solid background for solid badges and high-emphasis status indicators.
Soft danger fill — palest tint for toast backgrounds, alert containers, and callout boxes.
Subtle danger fill — tinted background for badges, tags, selected states, and secondary highlights.
Strong danger fill — solid background for solid badges and high-emphasis status indicators.
Soft success fill — palest tint for toast backgrounds, alert containers, and callout boxes.
Subtle success fill — tinted background for badges, tags, selected states, and secondary highlights.
Strong success fill — solid background for solid badges and high-emphasis status indicators.
Sizing
Standard interactive control heights.
Standard interactive control height for extra-small elements like compact buttons, tags, and inline controls.
Standard interactive control height for small elements like secondary buttons, small selects, and tight-layout controls.
Standard interactive control height for medium (default) elements like buttons, inputs, selects, and form controls.
Standard interactive control height for large elements like prominent buttons, inputs in spacious layouts, and hero CTAs.
Standard interactive control height for extra-large elements like oversized buttons, landing page CTAs, and touch-optimized controls.
Spacing
Single-source scale: --l-spacing is the unit, every step is derived via calc(var(--l-spacing) * N). Override --l-spacing to scale the whole UI's rhythm without touching individual steps.