Architecting Modular Brutalist Component Design Systems in CSS

“Brutalist” web design gets used loosely, but the useful version of it isn’t about looking unfinished — it’s about a design system with almost no decorative override layers, where every component’s appearance traces back to a small set of variables instead of one-off styles scattered across templates.

The variable layer

:root {
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 2rem;
    --border-width: 2px;
    --color-ink: #111;
    --color-paper: #fdfdf9;
    --color-accent: #ff3b00;
    --font-mono: 'JetBrains Mono', monospace;
}

Components reference variables, never raw values

.card {
    border: var(--border-width) solid var(--color-ink);
    padding: var(--space-2);
    background: var(--color-paper);
    font-family: var(--font-mono);
}

.button {
    border: var(--border-width) solid var(--color-ink);
    padding: var(--space-1) var(--space-2);
    background: var(--color-accent);
    color: var(--color-paper);
}

The discipline is in never writing padding: 17px directly inside a component rule — if a value isn’t in the variable set, either it’s genuinely a one-off exception (rare, and worth a comment explaining why) or the variable set is missing something and should be extended.

Why this matters for maintenance

When a client asks to change the accent color six months later, it’s one line in :root, not a find-and-replace across forty template files. That’s the actual payoff — not the aesthetic, but that a full rebrand of spacing or color becomes a five-minute change instead of a half-day audit.

Where it breaks down

This approach assumes a small, disciplined team. On a site where multiple developers with different habits are adding CSS over time without review, the variable system erodes fast — someone always reaches for a hardcoded value under deadline pressure. It works because of the discipline, not because of the CSS itself.