Building a design system with CSS custom properties

CSS Custom Properties (CSS Variables) have revolutionized how we build scalable design systems. Here's how we use them at Kabul Code Lab.

Why CSS Variables?

Traditional CSS preprocessors like SASS are powerful, but CSS variables bring dynamic theming to the browser. You can change values at runtime without recompiling styles.

Creating a Design Token System

Start by defining your design tokens in the :root selector:

:root {
    --color-primary-100: #3ebbfa;
    --color-primary-500: #2a7ea8;
    --spacing-md: 1rem;
    --radius-lg: 18px;
}

Responsive Design with CSS Variables

You can even make variables responsive using media queries:

:root { --space: 1rem; }
@media (min-width: 768px) {
    :root { --space: 2rem; }
}