Colors
The palette is Flexoki. The system layers it as palette tones (--color-blue-600, --color-base-50, …) and semantic aliases that point at them (--color-primary, --color-surface, …) — see Principles › Two-layer tokens.
Override either layer to reskin the system — see Theming. Click any swatch to copy its hex, Tailwind class, or CSS variable.
Semantic tokens
Section titled “Semantic tokens”Primary and the state families (danger, success, warning, info) share a four-slot layout: Base, Hover, Muted (low-saturation background for tinted surfaces), and Content (text/icons on top of the base). Text, Surface, Border, Link, and Focus use lighter scales.
Primary
High-contrast neutral (ink). Used by solid primary buttons, badges, and selected states. Inverts with the mode — near-black on light, near-white on dark.
Link
Text-link color. Separate from Info so links can be retinted independently.
Focus
Focus-ring color for every interactive component.
Text
Foreground content on neutral surfaces.
Surface
Page and component backgrounds, lightest to strongest.
Code
Neutral surface and text for <pre>-style output blocks — logs, JSON, LLM output.
Danger
Destructive actions and error states.
Success
Confirmation and positive outcomes.
Warning
Caution and non-blocking issues. Base and Content stay fixed — bright yellow with dark text in both modes; only Hover and Muted invert. That's why tinted card/stat-card surfaces skip the warning variant.
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 adds paper at the light end and black at the dark end.