Not all projects begin with a light-themed interface. Modern applications and websites often use dark themes or need to support both light and dark modes.
The Default Ramp Mode feature lets you choose which mode (Light or Dark) will serve as the foundation for your color/design system.
Regardless of your default ramp mode, all shades are guaranteed AA/AAA WCAG compliant.
Base Color Significance
Your selected base color becomes the anchor point in the default ramp.
This base color is preserved exactly as you specify it in the default mode.
A visual indicator (small circle) marks this base color.
Now, the base color marker in the non-default ramp, indicates the closest shade to the base color in your default ramp.
Smart Harmony System
The non-default ramp isn't just an inversion; it's intelligently adjusted for visual harmony.
The system makes subtle modifications to ensure both modes work well together while maintaining accessibility.
This creates a cohesive look across both modes.
Design System Benefits
Ensures your primary palette always feels native to the brand or client.
Maintains visual consistency across different modes.
Provides flexibility for different application contexts while preserving brand identity.
HSL
My Ramps