UI
Theming
OKLCH color system, dark mode, and customization.
Color system
All colors use the OKLCH color space for perceptual uniformity. Variables are defined in packages/ui/src/styles/globals.css.
Semantic tokens
| Token | Purpose |
|---|---|
--primary | Main brand color (royal blue, ~255 hue) |
--secondary | Supporting color |
--accent | Accent highlights |
--muted | Subdued backgrounds |
--destructive | Error / danger actions |
--warning | Warning states |
--background | Page background |
--foreground | Default text color |
--card | Card surfaces |
--popover | Popover surfaces |
--border | Border color |
--input | Input border color |
--ring | Focus ring color |
Usage in Tailwind
All tokens are mapped to Tailwind via @theme inline in globals.css:
<div class="bg-primary text-primary-foreground">
Primary button
</div>
<div class="bg-card text-card-foreground border-border">
Card
</div>Dark mode
Dark mode is activated by the .dark class on the root element. The @custom-variant dark directive scopes dark styles to .dark *:
@custom-variant dark (&:is(.dark *));All semantic tokens have dark mode overrides inside :root { &.dark { ... } }. No additional configuration is needed — components adapt automatically.
Customization
Overriding colors
Override any CSS variable in your app's stylesheet:
:root {
--primary: oklch(0.55 0.22 200); /* shift to teal */
}Shadow system
Shadows use HSL colors and vary between light and dark modes:
- Light mode: neutral black shadows
- Dark mode: blue-tinted glow shadows (
hsl(225 82% 65%))
The shadow scale ranges from --shadow-2xs to --shadow-2xl.