This is especially powerful if you want your web to be consistent, maintainable and responsive without relying on 50 media queries.
A design system is not just “that looks nice”. It’s having clear and reusable rules for:
No repeat values by all the stylesheet, we’re going to centralize everything in CSS variables and use clamp() so that design is fluid between mobile and desktop.
Paso 1 – Add CSS in WordPress
You have several options:
For this tutorial, we assume that you add it to the child theme’s CSS or additional CSS.
Paso 2 – Creating the base system with CSS variables
The variables are typically defined in :root, making them global.
:root { /* Colors */ --color-primary: #2563eb; --color-secondary: #1e293b; --color-accent: #f59e0b; --color-bg: #ffffff; --color-text: #0f172a; /* Fluid typography */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); --text-lg: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); --text-xl: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); /* Fluid spacing */ --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); --space-sm: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem); --space-md: clamp(1rem, 0.8rem + 1vw, 2rem); --space-lg: clamp(2rem, 1.5rem + 2vw, 4rem); /* Borders */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; }
What does clamp do?
The clamp(min, ideal, max) function allows a value to grow fluidly according to the screen width, but without becoming too small or too large.
Example:
html
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
Means:
Result: adaptive typography without media queries.
Step 3 – Apply to body
Now we use variables to make the whole site have consistent coherence.
body { font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; margin: 0; }
<p.Step 4 – Consistent typography
h1 { font-size: var(--text-xl); margin-bottom: var(--space-md); } h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); } p { font-size: var(--text-base); margin-bottom: var(--space-sm); }
Paso 5 – Reusable Buttons
Create a base component.
.btn { display: inline-block; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); border-radius: var(--radius-md); background-color: var(--color-primary); color: white; text-decoration: none; transition: all 0.2s ease; } .btn:hover { background-color: var(--color-secondary); }
You can use it in WordPress by adding the class btn to a button or link from the block editor.
Step 6 – Fluid Container
.container { width: min(90%, 1200px); margin-inline: auto; padding: var(--space-md); }
This prevents the content from being too wide on large screens.
Step 7 – Card System
.card { padding: var(--space-md); border-radius: var(--radius-lg); background: #f8fafc; margin-bottom: var(--space-md); }
You can use it in groups blocks in Gutenberg by adding the class card.
Advantages of this system
Bonus – Automatic dark mode
You can extend the system with prefers-color-scheme:
@media (prefers-color-scheme: dark) { :root { --color-bg: #0f172a; --color-text: #f1f5f9; --color-secondary: #334155; } }
No touching components, everything changes automatically.
