Custom Properties Pattern Catalog
A comprehensive collection of CSS custom property patterns for building robust design systems, responsive layouts, and component architectures — all with interactive demos.
Responsive Custom Properties
Custom properties that change at breakpoints using @media create a responsive design system without utility classes. Define your tokens once and let media queries adapt them.
:root {
--content-padding: 1rem;
}
@media (min-width: 768px) {
:root {
--content-padding: 2rem;
}
}Every element referencing --content-padding automatically updates at the breakpoint — no per-component overrides needed.
CSS Counters with Custom Properties
CSS counters generate automatic numbering. Combine them with custom properties to make the counter styling configurable — change colors, sizes, or shapes from a parent element.
Custom Property Inheritance for Component Trees
A parent component sets custom properties, and deeply nested children inherit them automatically — no prop drilling, no extra classes. This is one of the most powerful patterns for component theming.
Calc-Based Spacing Scale
Define a single base spacing unit, then derive an entire scale with calc(). Changing the base value reshapes every spacing token at once.
:root {
--space-unit: 8px;
--space-xs: calc(var(--space-unit) * 0.5);
--space-sm: var(--space-unit);
--space-md: calc(var(--space-unit) * 2);
--space-lg: calc(var(--space-unit) * 3);
--space-xl: calc(var(--space-unit) * 5);
}Color System with Custom Properties
Separate HSL components into individual custom properties for maximum flexibility. You can derive hover states, lighter/darker variants, and transparency from a single color definition.
:root {
--primary-h: 220;
--primary-s: 80%;
--primary-l: 50%;
}
.button {
background: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
}
.button:hover {
background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 10%));
}