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.
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.
For errors, warnings, and destructive actions.
Warm accent colors for highlights and notifications.
Warning states and attention-grabbing elements.
Success states, positive feedback, and nature themes.
Cool accent colors and secondary brand elements.
Information states, links, and professional themes.
Deep blue tones for sophisticated interfaces.
Creative and premium brand elements.
Playful accents and feminine brand elements.
Automatic 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 scenariosprefers-color-scheme: dark for automatic detectionAlways 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>