Theming & styles

Components read only semantic tokens. A "design style" is just a different set of values for those tokens — switching it never touches component CSS or your HTML.

The token contract

Every component references variables like these. Override them anywhere to customize.

--lc-bg, --lc-surface, --lc-surface-2     /* backgrounds */
--lc-text, --lc-text-muted, --lc-text-faint
--lc-border, --lc-border-strong, --lc-border-width
--lc-accent, --lc-accent-hover, --lc-accent-text, --lc-accent-soft
--lc-radius-sm, --lc-radius, --lc-radius-lg, --lc-radius-full
--lc-shadow-sm, --lc-shadow, --lc-shadow-lg, --lc-shadow-hard
--lc-blur                                  /* glass backdrop-filter */
--lc-space-1 … --lc-space-12, --lc-text-xs … --lc-text-4xl

The five styles

Set data-style on <html> (or any element, to scope it). These previews each pin one style locally:

Corporate Flat

badge card surface

Resonant Stark

badge card surface

Neo-Brutalism

badge card surface

Minimalist

badge card surface

Glassmorphism

badge card surface

<html data-style="neo-brutalism">        <!-- thick borders, hard shadows -->
<html data-style="glassmorphism">        <!-- frosted glass over a gradient -->
<html data-style="resonant-stark">       <!-- Linear-style dark -->

Dark mode

An independent axis that composes with any style. Three modes:

<html data-theme="dark">    <!-- force dark -->
<html data-theme="light">   <!-- force light -->
<html>                       <!-- follow the OS setting -->

RTL

Set the document direction; all components use logical properties and mirror automatically.

<html dir="rtl" lang="ar">

Make your own style

Add a token block — no component edits required.

[data-style="sunset"] {
  --lc-bg:#1a0f0f; --lc-surface:#2a1818; --lc-text:#ffe;
  --lc-accent:#ff7849; --lc-radius:14px;
  --lc-shadow:0 8px 24px rgba(0,0,0,.4);
}