Design Tokens
That Work Everywhere
11 token types. 9 color schemes. Glass morphism. Dark-first design system with multi-platform export.
Token Types
11 semantic token categories
Semantic and literal color values with light/dark mode resolution.
Consistent spacing scale (4px base) for padding, margin, and gap.
Border radius tokens from sharp (0) to fully rounded (9999px).
Font family, size, weight, line height, and letter spacing.
Elevation shadows with configurable blur, spread, and color.
Linear, radial, and conic gradients with stop positions.
Color Schemes
9 built-in palettes
Each scheme provides a full palette — accent, surface, text, border, and glass variants. Switch schemes with a single function call.
Emerald
Fresh, natural, growth-oriented
Sapphire
Trust, professional, clarity
Ruby
Energy, urgency, passion
Amber
Warmth, creativity, optimism
Violet
Innovation, premium, mystery
Rose
Modern, bold, approachable
Cyan
Technology, clean, futuristic
Lime
Eco, health, vitality
Slate
Neutral, enterprise, minimal
Light and dark, resolved at the token level
Token references resolve differently in light vs dark mode. No CSS overrides needed -- the design system handles mode switching internally.
import { ds } from './ds';
// Switch between modes
ds.setMode('dark');
// Tokens resolve contextually
ds.color.surface // dark: #08100A light: #FFFFFF
ds.color.accent // adapts per scheme + mode
ds.getShadow('md') // shadow intensity varies by modeExport
4 token export formats
Tailwind CSS
Theme extensions with semantic naming.
CSS Variables
Standard custom properties for any framework.
Dart
Flutter ThemeData with typed constants.
Swift
SwiftUI Color and Font extensions.
Consistent design across every platform
One token system. One source of truth. Every platform stays in sync.