Brutalist web design is not about ugliness — it is about honesty. The interface shows its structure: grids are visible, borders are hard, and color is functional. There is no skeuomorphic shadow pretending to be paper, no gradient pretending to be light.
THE GRID IS THE GRID
A brutalist layout does not hide its tracks. CSS Grid tracks are laid bare — rigid columns, fixed gutters, and asymmetric spans that announce themselves rather than dissolving into whitespace. The grid is a contract between designer and reader: this is where things are, and this is why.
Track Discipline
Use grid-template-columns: repeat(12, 1fr) as your baseline. Span elements across tracks deliberately — a 7-column article, a 4-column sidebar, a 1-column gutter. The asymmetry is the design.
"The grid is an invisible structure, not a visible cage. But in brutalist work, the cage is the point — you see the bars, and you respect them."
TYPE AS STRUCTURE
Typography in brutalist interfaces is extreme. Display fonts hit like a hammer — Impact, Haettenschweiler, condensed sans-serifs set in uppercase with aggressive letter-spacing. Body text is utilitarian: Arial, Helvetica, system fonts. The contrast between display and body is not subtle; it is architectural.
Letter-Spacing as Signal
Wide letter-spacing on small uppercase labels (0.2em–0.3em) signals system — navigation, metadata, tags. Tight letter-spacing on large display headlines (-0.02em) signals content. The reader learns the rhythm.
COLOR IS FUNCTIONAL
Surfaces, borders, and text are achromatic. A single accent color — in this system, #75e069 — serves as identity and state. It marks the active nav link, the hover state, the status dot. It never decorates. A brutalist palette does not have "brand colors" in the marketing sense; it has signals.
The Two-Layer Model
- Layer 1 — Achromatic: backgrounds, panels, borders, default text. Greyscale only.
- Layer 2 — Signal: one accent hue for identity, state, and affordance. Used sparingly.
BORDERS, NOT SHADOWS
Shadows imply depth, and depth implies a physical metaphor. Brutalist interfaces reject that metaphor. A card is a bordered rectangle — 1px solid var(--zt-line) — not a floating plane with a drop shadow. The surface is flat, the separation is linear, the hierarchy is typographic.
When a card needs to show interactivity, it does not lift. It recolors: the border shifts to the accent, the background darkens one step. The feedback is immediate and honest — no animation pretending the card is a physical object you can pick up.
CONCLUSION
Brutalist web design is a discipline of restraint. It asks: what is necessary? Then it shows exactly that, and nothing more. The grid is visible, the type is loud, the color is functional, and the shadows are gone. The result is not minimalist — it is structural. The interface becomes a blueprint, and the blueprint is the product.