Design Tokens & OKLCH Color System
Perceptually uniform color tokens, semantic surface layers, and fluid typography scales engineered for predictable contrast ratios across light and dark modes.
Semantic Surface & Contrast Tokens
Unlike sRGB hex scales where lightness varies wildly across hues, CosmoUI defines every surface and accent stop in the oklch(L C H) color space with sRGB fallbacks:
:root {
--cui-surface-0: oklch(0.15 0.015 264);
--cui-surface-1: oklch(0.19 0.018 264);
--cui-surface-2: oklch(0.23 0.022 264);
--cui-border-subtle: oklch(0.28 0.025 264);
--cui-accent-9: oklch(0.58 0.22 272);
--cui-accent-10: oklch(0.64 0.20 272);
--cui-radius-sm: 0.375rem;
--cui-radius-md: 0.5rem;
--cui-radius-lg: 0.75rem;
}Spacing & Elevation Scale
| Token | CSS Variable | Value | Usage |
|---|---|---|---|
space.1 | --cui-space-1 | 0.25rem (4px) | Inline icon gap and compact badge padding |
space.3 | --cui-space-3 | 0.75rem (12px) | Standard input and button horizontal padding |
space.6 | --cui-space-6 | 1.5rem (24px) | Dialog, drawer, and card container padding |
z.overlay | --cui-z-overlay | 50 | Modal backdrops, popovers, and toast viewports |