A complete design system built with OKLCH color space, @property, and Relative Color Syntax for perceptually uniform, accessible, and beautiful interfaces.
Your Brand Color in Action
oklch(54.424% 0.18235 279.193)
Brand Color Scale
Perceptually uniform scale from light to dark, maintaining consistent visual weight.
Brand 50
Lightest
Brand 100
Brand 200
Brand 300
Brand 400
Brand 500
Base
Brand 600
Brand 700
Brand 800
Brand 900
Brand 950
Darkest
Component Examples
Buttons
Form Inputs
Text Hierarchy
H1 Title Default
H2 Title Brand
H3 Title Subtle
Body text primary
Body text tertiary
Interactive Cards
Card with Hover Effect
Hover over this card to see the elevation change. The border subtly shifts to the brand color, creating a cohesive interactive experience.
Another Interactive Card
All colors are derived using relative color syntax from the base brand color, ensuring perfect color harmony throughout the design.
Alert Components
Success! Your changes have been saved successfully.
Error! There was a problem processing your request.
Warning! This action cannot be undone.
Info: All colors maintain accessible contrast ratios in both themes.
Design System Features
🎨 Perceptually Uniform
OKLCH ensures all color scales maintain consistent visual weight across different hues. Brand-500 and Neutral-500 appear equally bright to human eyes.
♿ Accessible by Design
All text colors meet WCAG AA contrast requirements. Dark and light themes are equally accessible thanks to OKLCH's perceptual uniformity.
🔄 Fully Themeable
Toggle between light and dark modes to see how every component adapts. All colors are semantically defined and automatically adjust.
✨ Dynamic Color Generation
Using Relative Color Syntax, every color variant is generated from three base colors. Change the brand color, and the entire system updates harmoniously.