When you start a project, a startup, a SaaS, or even a personal portfolio, you usually begin by quickly slapping together some colors and improvised components. The problem arises later: inconsistencies, colors that don’t match, a broken dark mode, and a UI that’s hard to maintain.

That’s why a Design System is so important. You don’t need to create something massive like Google’s or Apple’s. Having a solid foundation of colors, typography, and reusable styles completely changes how you build interfaces.

And right now, one of the best ways to do this is by using OKLCH alongside Tailwind CSS v4.

OKLCH allows you to create more visually consistent colors, and Tailwind v4 makes it much easier to organize tokens and variables directly from CSS.

So here’s a simple process for creating your own Design System.

1. Understanding OKLCH

OKLCH is a modern color format designed to make transitions between colors appear perceptually uniform.

In RGB or HSL, increasing or decreasing brightness often produces strange results. Some colors look more saturated than others even though they have the same values.

With OKLCH, this improves significantly because it separates:

Lightness → brightness
Chroma → saturation
Hue → tone/color

This allows you to build much cleaner and more predictable color scales.

Example:

oklch(62% 0.18 250)

62% → brightness
0.18 → color intensity
250 → hue

The result is palettes that are much more visually balanced.

2. Create a base palette

The first step is to choose:

Primary color
Secondary color
Accent color
Neutral colors
States (success, warning, error)

The idea isn’t to use 40 different colors. The best Design Systems typically use very few colors, but they’re very well organized.

For example:

--primary: oklch(62% 0.18 250);
--secondary: oklch(70% 0.12 180);
--accent: oklch(75% 0.22 20);

Then you create scales:

--primary-50
--primary-100
--primary-200
...
--primary-900

This makes building components much simpler because everything uses the same visual logic.

3. Organizing tokens in Tailwind v4

In Tailwind v4, you no longer need to rely so heavily on tailwind.config.js.

Now you can manage much of the system directly from CSS using variables.

Example:

@import “tailwindcss”;

:root {
  --color-primary: oklch(62% 0.18 250);
  --color-background: oklch(98% 0.01 250);
  --color-foreground: oklch(18% 0.02 250);
}

And then use it directly:

<div class="bg-[var(--color-primary)] text-[var(--color-background)]">

This makes the system:

More flexible
Easier to maintain
Better for themes
Much more scalable

4. Building design rules

A Design System isn’t just about colors.

You should also define:

Spacing
Border radius
Shadows
Typography
Sizes
Grid
Interactive states

For example:

:root {
  --radius-sm: 8px;
  --radius-lg: 20px;

  --shadow-soft: 0 4px 20px rgb(0 0 0 / 0.08);
}

The fewer arbitrary values you use, the more consistent the entire interface will be.

5. Create reusable components

Once the tokens are defined, you can start creating:

Buttons
Inputs
Cards
Modals
Navbar
Dropdowns
etc.

The idea is that they all use the same system.

Example:

<button class="bg-[var(--color-primary)] rounded-[var(--radius-lg)] px-4 py-2">
  Button
</button>

If you then change the primary color or the radius, the entire system updates automatically.

And that’s where the true power of a Design System really shines.

6. Dark Mode from the Start

One of the most common mistakes is adding dark mode at the end.

With OKLCH, it’s much easier because you can keep the same hue and chroma while adjusting the lightness.

Example:

:root {
  --background: oklch(98% 0.01 250);
}

.dark {
  --background: oklch(12% 0.01 250);
}

This ensures that colors maintain visual consistency between both modes.

Useful Tools

These tools are extremely helpful when building a Design System:

Tailwind CSS v4

The foundation of the system. It makes it extremely easy to reuse styles and work with modern variables.

OKLCH Color Picker

Useful for experimenting and building visually balanced palettes.

uicolors.app

Very useful for automatically generating color scales.

shadcn/ui

An excellent reference for understanding how to structure reusable components using Tailwind.

The key points are:

Maintain consistency
Reduce arbitrary values
Reuse components
Think scalable from the start

Thank you 💗

Translated with DeepL.com (free version)