Foundation
Our color system built using OKLCH color space for perceptually uniform colors and consistent accessibility
Our color system is built using OKLCH color space for perceptually uniform colors and consistent accessibility. The system includes comprehensive color palettes with semantic naming conventions.
We use OKLCH (Oklch Lightness Chroma Hue) for all our color definitions because it provides:
OKLCH and Dark Mode Scaling
While OKLCH enables consistent perceptual scaling, we intentionally deviated from strict mathematical rules to ensure colors feel natural and visually harmonious. Dark mode colors are not simply inverted versions of light mode—they represent a fundamentally different approach to color presentation. We've applied distinct scaling strategies for dark mode that account for reduced ambient light, different contrast requirements, and the perceptual differences in how colors appear on dark backgrounds. This approach ensures our dark theme feels cohesive and natural, rather than mechanically inverted.
Essential black and white colors for high contrast and foundational elements.
Essential black and white colors for high contrast and foundational elements.
Our primary color palette uses teal/cyan tones for the brand identity across all shades from 50 to 950.
Our primary color palette uses teal/cyan tones for the brand identity across all shades from 50 to 950.
Our neutral colors for backgrounds, borders, and subtle elements ranging from 50 to 950.
Our neutral colors for backgrounds, borders, and subtle elements ranging from 50 to 950.
For errors, warnings, and destructive actions.
For errors, warnings, and destructive actions.
Warm accent colors for highlights and notifications.
Warm accent colors for highlights and notifications.
Warning states and attention-grabbing elements.
Warning states and attention-grabbing elements.
Success states, positive feedback, and nature themes.
Success states, positive feedback, and nature themes.
Cool accent colors and secondary brand elements.
Cool accent colors and secondary brand elements.
Information states, links, and professional themes.
Information states, links, and professional themes.
Deep blue tones for sophisticated interfaces.
Deep blue tones for sophisticated interfaces.
Creative and premium brand elements.
Creative and premium brand elements.
Playful accents and feminine brand elements.
Playful accents and feminine brand elements.
These are the key semantic colors used throughout the design system, organized by purpose and usage:
Background Colors
Use semantic background colors to ensure consistent theming across light and dark modes.
--color-panel): Card/panel backgrounds--color-bg): Main page background--color-secondary): Secondary backgrounds--color-muted): Subtle backgrounds--color-primary-muted): Light primary backgrounds--color-primary-solid): Primary buttons & actions--color-success-solid): Success states & confirmations--color-warning-solid): Warning states & cautions--color-destructive-solid): Destructive actions & errors--color-info-solid): Information & notifications--color-ink-dark): Primary headings & emphasis--color-ink): Body text & default content--color-ink-light): Secondary text & metadata--color-ink-muted): Placeholder & disabled textSpecialized text colors for different states:
--color-border): Standard borders--color-border-input): Form input borders--color-border-hover): Hover state borders--color-border-focus): Focus state borders--color-icon): Standard icon color--color-icon-light): Subtle icon color--color-icon-primary): Primary brand icons--color-icon-destructive): Error/warning iconsAutomatic Dark Mode
All colors automatically adapt to dark mode using CSS custom properties. The dark mode theme inverts and adjusts colors for optimal readability in low-light conditions.
.dark {
/* Backgrounds become dark */
--color-panel: oklch(0.21 0.02 256); /* Dark panels */
--color-bg: var(--color-gray-50); /* Very dark background */
/* Text becomes light */
--color-ink-dark: oklch(0.98 0 0); /* White text */
--color-ink: oklch(0.95 0 248); /* Light text */
--color-ink-light: oklch(0.71 0.02 259); /* Muted light text */
--color-ink-muted: oklch(0.6 0.05 258); /* Dark mode muted */
/* Primary colors adjust for better contrast */
--color-primary-solid: var(--color-primary-400);
--color-primary-solid-hover: var(--color-primary-600);
/* Semantic colors use lighter variants */
--color-ink-destructive: var(--color-red-900);
--color-ink-success: var(--color-green-900);
--color-ink-warning: var(--color-yellow-900);
}To test dark mode functionality:
class="dark" to the <html> or <body> element?theme=dark to test specific scenariosDark Mode Setup
If dark mode is not working in Storybook, ensure the globals.css file is properly imported and the .dark class is being applied to the document root.
Always use semantic color tokens (like --color-primary-solid) instead of raw color values for consistent theming across light and dark modes.
Test all color combinations for accessibility compliance. Ensure proper contrast ratios for text and interactive elements.
Use the OKLCH values provided in design tokens for consistent color perception across all hues.
Don't use hard-coded hex colors in components. Always reference design tokens for maintainability.
Don't create custom colors outside the design system without consulting the design team.
Don't use colors that don't meet WCAG 2.1 AA contrast requirements (4.5:1 for normal text, 3:1 for large text).
WCAG Compliance
All color combinations meet WCAG 2.1 AA standards for accessibility.
All color combinations meet WCAG 2.1 AA standards:
.my-component {
background-color: var(--color-panel);
color: var(--color-ink);
border: 1px solid var(--color-border);
}<div class="bg-panel text-ink border border-border">
Content with semantic colors
</div><Card className="bg-panel text-ink border-border">
<Text color="text-ink-light">Secondary text</Text>
</Card>