Brutalist

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: 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 is a deliberate, controlled raw look, not an unfinished or default one — every rough edge should be an intentional decision, not neglect.

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 color to true black, true white, and a small number of flat, fully saturated colors used as blocks rather than tints or gradients. Let color feel like a structural material (a colored block, a colored border) rather than a decorative wash.
• 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.
• Use monospace or plain system-style typefaces where they reinforce the “unstyled, structural” feeling, especially for labels, metadata, or anything that benefits from reading as raw information.
• 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.
• Gradients, pastel tints, or more than two or three flat accent colors.
• 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.

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 color block, or remove it.
• 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 favor of a direct, controlled, deliberately raw appearance.

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.
• Confrontational hierarchy. Contrast — in scale, weight, and color — is dramatic rather than subtle.
• Deliberate rawness. Every rough edge is a considered decision, not an omission.

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 colors used as blocks, not tints or gradients.
• Oversized, dramatic typographic scale contrast between headline and body text.
• 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.

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 color on the page is true black, true white, or one of a documented set of at most two additional flat, fully saturated colors; no gradients or tints are used for depth. Acceptance criterion: Inspecting rendered color swatches finds every color present matches black, white, or a declared saturated color, 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 color block — rather than being implied by whitespace alone. Acceptance criterion: Inspecting the rendered layout confirms a visible border or background-color 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.

Avoid

• Rounded corners on any element.
• Soft box shadows, glow, or blur used to simulate elevation or softness.
• Gradients, pastel tints, or more than two flat accent colors beyond black and white.
• 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 colors are black, white, or one of at most two declared saturated colors, 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 color-block boundary.
• Rule 7: No blur, soft shadow, or eased polish transition is present.

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 color palette includes a gradient fill or more than two non-black/white saturated colors.

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.