Applying a Brutalist visual direction

You are being asked to apply a Brutalist visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Brutalist” means here

Brutalist web design borrows its name and attitude from brutalist architecture: the name is béton brut, raw concrete, left unfinished and load-bearing on the outside of the building. Structure is exposed rather than hidden, materials are shown honestly rather than smoothed over, and the result reads as direct and confrontational rather than polished. In an interface this means visible grid seams, unrounded geometric shapes, hard-edged typography, and a rejection of the soft, softly-shadowed conventions of most contemporary UI.

It became a named digital style through Pascal Deville’s BrutalistWebsites.com in 2014, as a reaction against the lightness and frivolity of template-builder web design — pages that all look the same because none of them were built. Knowing that motive matters, because it is what separates the style from carelessness: it is a deliberate, controlled raw look, not an unfinished or default one. Every rough edge should be an intentional decision, not neglect.

Rawness applies to behaviour as much as to surface. A page that looks raw but hides what is clickable, or breaks the browser’s back button, has thrown away the honesty that produced the look in the first place.

The word covers more than one style, so be clear which one you are producing. This is the strain that references the architecture — confrontational, heavily bordered, saturated. It is not the plain-semantic-HTML tradition of Craigslist or Wikipedia, which shares the motive but arrives at a quiet surface. It is not Anti-Design, which subverts convention as art and lets usability suffer; here the interface stays entirely usable. And it is not Neubrutalism, which takes this geometry and makes it playful with hard offset shadows and bright cheerful blocks — if you find yourself adding a shadow, even a hard one, you have crossed into it.

Recommendations

• Use square corners everywhere. Do not round containers, buttons, inputs, or images.
• Build visible structure: thick, high-contrast borders around distinct content blocks, and visible boundaries at grid or column divisions instead of hiding them behind whitespace alone.
• Push typographic scale hard. Headlines should be dramatically larger than body text, and the jump between the largest and smallest text on a screen should be obvious at a glance, not subtle.
• Restrict colour to true black, true white, and a small number of flat, fully saturated colours used as blocks rather than tints or gradients. Let colour feel like a structural material (a coloured block, a coloured border) rather than a decorative wash.
• Choose type that looks unchosen. Monospace families, system stacks, or the browser default. A fashionable display face will satisfy every geometric rule here and still produce something that is not brutalist — the type should read as raw information, not as branding.
• Let interactive elements look like what they are: a button should read as a hard-edged, bordered box, not a soft rounded pill. Default or near-default form control styling is acceptable and often correct here.
• Underline your links and let buttons look like buttons, and make sure nothing that is neither responds to a click. Deceiving a visitor about what is interactive contradicts the whole position of the style.
• Leave the browser alone. The back button must work, and content should be reached by scrolling rather than by artificial pagination or click-driven reveals.
• Keep the page fast. A deliberately plain interface that arrives slowly has failed on its own terms — performance is part of the honesty, not a separate concern.
• Let asymmetry and density coexist deliberately: a very large headline next to a dense block of small text is a valid and expected composition in this direction.

Avoid

• Rounded corners of any kind, on any element.
• Soft box shadows, blur, glow, or any effect whose purpose is to simulate depth or softness. A hard, unblurred offset shadow is not a loophole — that is Neubrutalism.
• Gradients, pastel tints, or more than two or three flat accent colours.
• Display or brand typefaces chosen for personality.
• Elements that look clickable but are not, or that are clickable without looking it.
• Breaking the back button, hijacking scroll, or paginating what should simply be scrolled.
• Smooth, springy, or decorative motion. Transitions, where used at all, should be abrupt rather than eased.
• Hiding the grid: do not let column gutters, section boundaries, or structural divisions disappear into undifferentiated whitespace.
• Pushing subversion so far that the primary task cannot be completed. That is Anti-Design, and it is a different entry.

How to check your own work

Before considering the result finished, look at it and ask:

• Does any element have a rounded corner? If yes, square it off.
• Does any element have a soft shadow, blur, or gradient used for depth or polish? If yes, replace it with a hard border or a flat colour block, or remove it.
• What typeface is actually rendering? If it is a display or brand face, replace it with a monospace or system stack — geometry alone will not carry this style.
• Point at every clickable thing. Is each one a link that is underlined or a button that looks like a button? Is anything else clickable? Fix both directions.
• Press the back button. Does it do what a visitor would expect?
• If I squint at the layout, can I still see where the structural divisions are — the grid, the sections, the boundaries between blocks? If the structure disappears, add a visible border or contrasting block to make it explicit again.
• Is the type scale dramatic enough that the largest and smallest text on the screen are obviously, not subtly, different in size?

Brutalist — Specification

Definition

Brutalist is a web-interface design style that foregrounds raw, unornamented structure. It exposes grid seams, uses unrounded geometric shapes, sets hard-edged typography at dramatic scale contrast, and rejects the soft, shadowed conventions of contemporary interface polish in favour of a direct, controlled, deliberately raw appearance.

The name comes from béton brut — raw concrete — and from the 1950s architecture that left it unfinished and load-bearing on the outside of the building. That architecture was rooted in function, resource efficiency, and a rejection of empty ornament. The digital style takes the same position toward the browser: the structure of a page is not something to be hidden behind a smooth surface, it is the surface.

The style became a named digital movement through Pascal Deville’s BrutalistWebsites.com in 2014, as a reaction against what he called the lightness, optimism, and frivolity of contemporary web design — and specifically against the interchangeable output of drag-and-drop template builders. Rawness is a stance, which is why the rawness must be deliberate: an interface that is merely unfinished is not brutalist, it is unfinished.

The word carries more than one style, and this entry is the strain that references the architecture. It is not the honest-materials tradition of unstyled semantic HTML — light background, black text, blue underlined links, minimal CSS, in the manner of Craigslist or Wikipedia — which shares brutalism’s motives but reaches a plain surface rather than a confrontational one. It is not Anti-Design, which breaks convention as artistic subversion and treats usability as secondary, where this style is controlled and remains fully usable. And it is not Neubrutalism, which takes this geometry and makes it playful with hard-edged shadows, bright saturated blocks and cheerful imbalance; this entry has no shadow at all and is confrontational rather than friendly.

Core principles

• Structure over polish. Grid lines, boundaries, and containers are shown, not hidden.
• Honest materials. Default or near-default browser affordances are used deliberately rather than smoothed away, and the interface behaves the way the browser already behaves.
• Confrontational hierarchy. Contrast — in scale, weight, and colour — is dramatic rather than subtle.
• Deliberate rawness. Every rough edge is a considered decision, not an omission.
• Rawness without deception. Directness extends to behaviour: a page that is visually raw but hides what is clickable, or breaks the browser’s own controls, has abandoned the principle that produced the look.

Visual characteristics

• Thick, high-contrast borders around distinct content blocks.
• Square, unrounded corners on every container, button, and image.
• A restricted palette of true black, true white, and a small number of flat, fully saturated colours used as blocks, not tints or gradients.
• Oversized, dramatic typographic scale contrast between headline and body text.
• Typefaces that read as unchosen — monospace, system stacks, or browser defaults — rather than a fashionable display face.
• Visible grid seams and section boundaries rather than boundaries implied by whitespace alone.
• Default or near-default form control styling in place of custom-styled soft controls.
• Links that are underlined and buttons that look like buttons, with nothing else appearing clickable.

Rules

1. No rounded corners. No container, card, button, input, or image has a border-radius greater than 0. Acceptance criterion: Inspecting computed border-radius across every container and interactive element on the page returns 0px.

2. Visible block borders. Every distinct content block has a border of at least 2px, at high contrast against its adjacent surface. Acceptance criterion: Measuring border-width on each block-level container returns at least 2px, with a measured contrast ratio of at least 7:1 against the adjacent background.

3. Dramatic type scale. The ratio between the largest and smallest rendered text on a given screen is at least 4:1. Acceptance criterion: Measuring the largest and smallest computed font-size values present on a rendered screen yields a ratio of 4:1 or greater.

4. Flat, restricted palette. All colour on the page is true black, true white, or one of a documented set of at most two additional flat, fully saturated colours; no gradients or tints are used for depth. Acceptance criterion: Inspecting rendered colour swatches finds every colour present matches black, white, or a declared saturated colour, and no linear-gradient, radial-gradient, or box-shadow with nonzero blur is present.

5. Structural interactive controls. Buttons and inputs are visually box-like, with square corners and a border of at least 2px, distinguishable from body content at a glance. Acceptance criterion: A rendered screenshot review confirms every button and input has square corners and a border-width of at least 2px.

6. Exposed grid seams. Every major grid or section division has a visible boundary — a rule line or a contrasting colour block — rather than being implied by whitespace alone. Acceptance criterion: Inspecting the rendered layout confirms a visible border or background-colour change exists at each documented major grid division.

7. No smoothing effects. No blur, soft shadow, or eased opacity transition is used to simulate depth or softness. Acceptance criterion: Inspecting computed CSS finds no filter: blur, no box-shadow with a blur radius greater than 0, and no opacity transition longer than an abrupt (near-instant) duration used for polish.

8. Honest affordances. Hyperlinks are underlined, buttons look like buttons, and nothing that is neither responds to a click. Acceptance criterion: Every anchor has a computed text-decoration of underline; every button carries a visible border and background distinguishing it from body text; and no element that is not an anchor or a button has a click handler that navigates or submits.

9. Unstyled-looking typography. Type is set in a monospace family, a system stack, or the browser default, rather than in a display or brand typeface. Acceptance criterion: Every computed font-family on the page resolves to a monospace family, a system-UI stack, or a generic default, with no webfont loaded for display purposes.

10. Native browser behaviour preserved. The back button returns to the previous view, and content is reached by scrolling rather than by artificial pagination or click-driven reveals. Acceptance criterion: After navigating within the interface, pressing the browser’s back control returns to the prior view without script interception, and primary content is reachable by scrolling alone.

11. Domain fit. The style is applied where a confrontational surface serves the work: personal portfolios, creative studios and agencies, niche publications, music and underground culture, and one-off or seasonal event pages. Applied to a conversion-driven commercial interface, or to finance, healthcare, or government, it is moderated rather than adopted whole, and the departure is documented. Acceptance criterion: The interface’s domain falls within the list above, or a written justification records why the full treatment is being applied outside it and which rules were moderated as a result.

Avoid

• Rounded corners on any element.
• Soft box shadows, glow, or blur used to simulate elevation or softness — a hard, unblurred offset shadow belongs to Neubrutalism rather than here.
• Gradients, pastel tints, or more than two flat accent colours beyond black and white.
• Display or brand typefaces chosen for personality; the type should look like it was never chosen.
• Elements that look clickable but are not, or that are clickable without looking it.
• Breaking the back button, hijacking scroll, or replacing scrolling with click-driven pagination.
• Heavy assets and script that make a deliberately plain page slow to arrive; performance is part of the style’s honesty, not a separate concern.
• Subverting the interface to the point where the primary task cannot be completed, which is Anti-Design rather than Brutalist.
• Smooth, springy, or decorative motion; eased transitions used for polish rather than function.
• Grid gutters or section boundaries that disappear into undifferentiated whitespace.

Acceptance criteria

• Rule 1: border-radius is 0px on every container and interactive element.
• Rule 2: Every content block has a border of at least 2px at 7:1+ contrast.
• Rule 3: The largest-to-smallest font-size ratio on a screen is at least 4:1.
• Rule 4: All colours are black, white, or one of at most two declared saturated colours, with no gradients.
• Rule 5: Buttons and inputs are square-cornered with borders of at least 2px.
• Rule 6: Every major grid division has a visible border or colour-block boundary.
• Rule 7: No blur, soft shadow, or eased polish transition is present.
• Rule 8: Links are underlined, buttons look like buttons, and nothing else is clickable.
• Rule 9: Every typeface is monospace, a system stack, or a browser default.
• Rule 10: The back button works and content is reachable by scrolling.
• Rule 11: The domain fits the style, or the departure and its moderations are documented.

Blocking failures

• Any container or interactive element has a border-radius greater than 0.
• A soft box-shadow, blur, or gradient is used for depth or polish anywhere on the page.
• The colour palette includes a gradient fill or more than two non-black/white saturated colours.
• An element that is not a link or a button is made clickable, or a link or button is disguised as ordinary content, so a visitor cannot tell what will respond to a click.
• The back button is intercepted or broken, leaving a visitor no way to undo an errant click.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Grid seams remain visible at every viewport width; borders never collapse to a hairline that reads as invisible.
• The minimum 4:1 type-scale ratio (Rule 3) may compress to no less than 2.5:1 on narrow viewports, documented as an explicit exception rather than a silent drift.
• Border widths may reduce on narrow viewports but never below 2px (Rule 2 and Rule 5 continue to apply).
• Square corners (Rule 1) and the restricted flat palette (Rule 4) hold unchanged at every breakpoint.
• Rules 8 and 10 hold on every platform, and matter most on touch, where there is no hover to disambiguate what is interactive and where hijacked scrolling is most disruptive.
• Because unstyled semantic HTML is already readable at any width and on assistive technology, a brutalist layout should reach small viewports by removing layout rather than by adding breakpoint-specific machinery.
• Page weight is held low enough that the interface arrives quickly on a slow mobile connection; a deliberately plain page that loads slowly has failed on its own terms.