Introduction
Modern frontend development is no longer about writing isolated CSS files and static UI components.
Today’s interfaces must be scalable, theme-aware, and dynamic while maintaining performance and design consistency.
This is where CSS Custom Properties (CSS Variables) shine.
In this blog, we will build a modern UI kit architecture using CSS Custom Properties that supports:
Centralised design tokens
Live theme switching (light/dark)
Clean UI/UX separation
Minimal JavaScript
Production-ready scalability
This approach is widely used in modern SaaS dashboards, design systems, and component libraries.
What Are CSS Custom Properties?
CSS Custom Properties are runtime CSS variables that live in the browser, not during build time.
:root {
--primary-color: #6366f1;
--background-color: #ffffff;
}
Unlike Sass or Less variables, CSS Custom Properties:
Can be updated dynamically
Cascade like normal CSS
Can be modified using JavaScript
They are perfect for theming and design systems
Why Modern UI Kits Use Design Tokens
Design tokens are single sources of truth for UI values like:
Colors
Spacing
Typography
Border radius
Shadows
Instead of hardcoding values repeatedly, components reference tokens.
This makes UI kits:
Easier to maintain
Easier to redesign
Easier to scale
Defining Design Tokens (Foundation Layer)
We start by explaining all visual values in one place.
:root {
--color-primary: #6366f1;
--color-secondary: #22c55e;
--color-danger: #ef4444;
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--text-primary: #111827;
--text-secondary: #6b7280;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--radius-sm: 6px;
--radius-md: 10px;
--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
}
UX Impact:
Changing one token updates the entire UI instantly.
Base Styles Using Tokens
Base styles ensure consistency across all components.
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: system-ui, sans-serif;
margin: 0;
}
button {
font-family: inherit;
}
This ensures your UI kit feels cohesive and professional.
Building Reusable UI Components
.btn {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: none;
background-color: var(--color-primary);
color: white;
cursor: pointer;
box-shadow: var(--shadow-md);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn:hover {
transform: translateY(-2px);
}
Card Component
.card {
background-color: var(--bg-secondary);
padding: var(--space-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
Notice how no raw values are used — only tokens.
Creating Multiple Themes (Dark Mode)
Instead of rewriting components, we override tokens.
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #020617;
--text-primary: #e5e7eb;
--text-secondary: #94a3b8;
--color-primary: #818cf8;
}
This single block controls the entire dark theme UI.
Live Theme Switching with JavaScript
We toggle themes using a single HTML attribute.
const toggleButton = document.querySelector("#themeToggle");
toggleButton.addEventListener("click", () => {
const currentTheme = document.documentElement.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
});
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
document.documentElement.setAttribute("data-theme", savedTheme);
}
Result:
Instant UI update without reload or re-render.
Complete HTML Example (Everything in One File)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Next-Gen UI Kit</title>
<style>
:root {
--color-primary: #6366f1;
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--text-primary: #111827;
--radius-md: 10px;
--shadow-md: 0 10px 25px rgba(0,0,0,0.08);
}
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #020617;
--text-primary: #e5e7eb;
--color-primary: #818cf8;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: system-ui, sans-serif;
padding: 40px;
}
.btn {
padding: 10px 16px;
border-radius: var(--radius-md);
border: none;
background: var(--color-primary);
color: white;
cursor: pointer;
box-shadow: var(--shadow-md);
}
.card {
background: var(--bg-secondary);
padding: 24px;
margin-top: 24px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
</style>
</head>
<body>
<button id="themeToggle" class="btn">Toggle Theme</button>
<div class="card">
<h2>Next-Gen UI Kit</h2>
<p>Powered by CSS Custom Properties</p>
</div>
<script>
document.getElementById("themeToggle").addEventListener("click", () => {
const theme =
document.documentElement.getAttribute("data-theme") === "dark"
? "light"
: "dark";
document.documentElement.setAttribute("data-theme", theme);
});
</script>
</body>
</html>
UI/UX Benefits of This Architecture
This makes it production-ready and future-proof.
When to Use This UI Kit Pattern
Final Thoughts
CSS Custom Properties are no longer optional in modern frontend development.
They enable UI systems that are:
Dynamic
Maintainable
Performant
Scalable
If you want to build professional, modern UI kits, this approach is essential.
🚀 Your frontend architecture just levelled up.