Design Tokens
Make branding changes fast and keep UI consistent across products.
Design tokens are the foundational visual values of our design system. We define them as CSS variables inside src/shared/styles/globals.css, allowing you to update your brand's colors, fonts, margins, and borders from a single file.
OKLCH Color Variables
The template uses the OKLCH color model. OKLCH is a modern color space that provides consistent perceived brightness across different hues. This makes it easier to maintain accessibility and contrast ratios when switching between light and dark modes.
| Variable | Light Theme Value | Dark Theme Value | Usage Context |
|---|---|---|---|
| --background | oklch(1 0 0) | oklch(0.14 0 0) | Base app background |
| --foreground | oklch(0.14 0 0) | oklch(0.99 0 0) | Primary body text |
| --primary | oklch(0.2 0 0) | oklch(0.92 0 0) | Buttons, active tags, highlights |
| --card | oklch(1 0 0) | oklch(0.2 0 0) | Dashboard widgets, cards |
| --border | oklch(0.92 0 0) | oklch(1 0 0 / 10%) | Layout dividing borders |
Font Stack Configuration
We use system font stacks to ensure fast loading times and a consistent native feel across operating systems:
- Sans (Interface Text): Mapped to
Geist, with Apple and Segoe UI system fonts as fallbacks. - Mono (Data & Code): Standardized on
Geist Monofor code blocks, telemetry logs, and financial tables.
Radii & Custom Shadows
The border radius scales dynamically to keep layout elements consistent:
- Border Radius (
--radius): Set to a default of0.625rem(10px). Inner elements adjust automatically (e.g.--radius-smresolves tovar(--radius) - 4px). - Box Shadows: Preconfigured with elevation scales from
shadow-xs(1px offset) up toshadow-2xl(for dialog containers).
Theme Switcher Logic
We support system preference detection and manual theme overrides using next-themes. To customize your brand's appearance:
- Update the color coordinates in
src/shared/styles/globals.css. - Avoid using hardcoded hex values in your components. Instead, rely on tailwind classes that consume these tokens (e.g.
bg-primaryorborder-border).