Colors

How it works

Navigate to the Colors section and you can:

Click any of your four action colors: primary, secondary, tertiary, delete

Use the color picker with full OKLch color space support

Watch every button, link, and interactive element update across your entire site

Both light and dark mode variants adjust automatically to maintain proper contrast

OKLch color space

Color systems in Naina use OKLch, which means your colors look consistent across light and dark modes. No more manual tweaking to make dark mode work.

Your color picker shows you the actual color space humans can see. No more guessing if colors will look washed out or too vibrant.

Design tokens power

The system is smart: if you change your primary color, all components using that color update immediately. No hunting through dozens of components to make changes.

Change your primary color once and watch every button, link, and CTA across your entire site update in real time. That's the power of design tokens done right.

Action based system

The color system is organized around user actions, not brand guidelines.

Primary means do this. Your main call to action color.

Secondary means or do this. Supporting actions.

Tertiary is subtle. Background interactions.

Delete is danger. Destructive actions, red zone.

This approach creates a functional color system that matches how users actually interact with your interface.

Automatic dark mode

Dark mode isn't an afterthought in Naina. Every color automatically generates a dark mode variant that maintains proper contrast and accessibility.

When you change a color, both light and dark mode variants adjust automatically. The system ensures readability in both modes without manual tweaking.