Colors
The palette is Flexoki. Colors live in two layers, both registered with Tailwind’s @theme:
- Palette — Flexoki’s ramps (
--color-blue-600,--color-base-50, …) replace Tailwind’s defaults. Generates utilities likebg-blue-600,text-base-700. - Semantic — purpose-named aliases (
--color-primary,--color-surface, …) point at palette tones. Components only ever reference these.
Override either layer to reskin the system — see Customize. Click any swatch to copy its hex, Tailwind class, or CSS variable.
Semantic tokens
Section titled “Semantic tokens”Each family shares the same four-slot layout: Base, Hover, Muted (low-saturation background for tinted surfaces), and Content (text/icons on top of the base).
Primary
Brand accent. Drives primary buttons, links, focus rings.
Text
Foreground content on neutral surfaces.
Surface
Page and component backgrounds, lightest to strongest.
Danger
Destructive actions and error states.
Success
Confirmation and positive outcomes.
Warning
Caution and non-blocking issues.
Info
Neutral notifications and helper hints.
Border
Dividers and outlines.
Palette
Section titled “Palette”Every Flexoki tone is a utility class and CSS variable. Tones run light→dark from 50 to 950; the base ramp is bookended by paper and black.