What is Brutalism web design?

Brutalism web design deliberately strips away the visual conventions that make most modern sites feel smooth and polished - drop shadows, gradients, rounded corners, custom webfonts - and replaces them with the raw building blocks of HTML and CSS shown plainly: thick solid borders, flat fills, default or monospace type, hard 90-degree corners. The name borrows from brutalism architecture, which left poured concrete exposed instead of finishing it, valuing honesty about materials over decoration.

On the web this usually shows up as high-contrast layouts (often near-black text on an off-white or stark white background), a single loud accent color used sparingly, and "hard" shadows - an offset solid-color duplicate of a shape instead of a blurred drop shadow - standing in for elevation. Grids are often visibly asymmetric or slightly misaligned on purpose, and interactive elements (buttons, links) look like plain HTML controls rather than heavily skinned components.

It tends to show up on portfolio sites, design studios, zines, and technical/indie products that want to signal craft and confidence rather than blend in with typical SaaS or corporate design - the rawness itself is the statement, so it works best when it's applied with intent rather than as a shortcut for skipping visual design.

Key visual characteristics

• Thick, solid borders (2-4px) around cards, buttons and images instead of soft box-shadows
• Hard offset shadows - a flat-colored duplicate of a shape shifted a few pixels down-right, with no blur
• Flat, high-contrast fills - no gradients, no soft color transitions
• Sharp 90-degree corners everywhere, never a rounded button or card
• Deliberately raw or utilitarian filler content - bracketed labels like [ IMG_042.JPG ], visible file-size or dependency counts
• Visible grid lines or a striped/hazard-pattern accent used as a graphic element, not just decoration

Color characteristics

• A stark, high-contrast base - near-black text on off-white or white, or the reverse
• One loud, saturated accent color used sparingly and consistently, not blended into gradients
• Borders and shadows drawn in the same near-black text color rather than a separate muted gray, keeping the whole page feeling like a single ink color

Typography

• Monospace or plain system sans-serif type, rarely a custom display typeface
• All-caps labels and headlines used for structure (kickers, nav items, buttons), not just emphasis
• Tight, utilitarian line-height and letter-spacing rather than generous editorial whitespace

UI patterns

• Top bar with a bracketed wordmark, plain-text nav, and a hard-bordered button with an offset shadow
• A scrolling marquee/ticker strip using a striped accent background, common as a graphic divider
• Two-column hero: all-caps headline and meta tags on one side, a bordered image placeholder block on the other
• A row of boxed feature cards with thick borders and hard offset shadows, one often filled solid with the accent color