Theme composer
Generate palette variables, map semantic tokens with live palette previews, then copy or apply the combined CSS to the dedicated preview scope. Exported CSS still targets :root.
Palette generator
Preparing theme workspace…
Theme token mapper
Preparing theme workspace…
Preview scope
Preview heading
Body copy uses foreground and muted foreground semantic tokens.
Card surface
Card, border, and muted semantic tokens.
Compact card content sample.
Information
Alert surfaces use card and foreground semantic tokens.
Default badgeSecondary badgeDestructive badge
Main content
Sidebar semantic tokens preview.