Brutalist Web Design
Exploring raw structure, deliberate friction, and unstyled aesthetics.
The Concept
Brutalism in web design isn't just about harsh colors or broken layouts. It's a reaction against the overly polished, homogenized corporate web. It favors raw functionality, exposed grids, and default browser styles to create a sense of honesty and friction.
The Experiment
For this study, we built an independent digital design manifesto. We avoided the cliché "hacker terminal" look and instead focused on Swiss Industrial Print—using massive typographic contrast, rigid blueprint-style CSS grids, and a complete absence of soft shadows or border-radii.
Design Decisions
CSS Grid as Border
Instead of drawing borders around elements, we applied a 2px gap on the parent grid with a black background to create razor-thin, perfectly intersecting blueprint lines.
Typography Over Images
Relying entirely on Archivo Black at extreme scales to act as the primary visual architecture.
Analog Degradation
A subtle SVG fractal noise filter is overlaid to simulate newsprint texture.
Design Specs & Assets
Use these core parameters to recreate the Brutalist Industrial aesthetic in your own projects.
Color Palette
#0F0F0F (Base)#D9D9D9 (Text)#FF2A00 (Accent)Typography
font-family: 'Space Mono', monospace;
text-transform: uppercase;
letter-spacing: -0.05em; /* Macro text */
Key CSS Snippet: Terminal Scanlines
.terminal-log::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.1) 2px,
rgba(0,0,0,0.1) 4px
);
pointer-events: none;
}Accessibility (a11y) Analysis
The Art vs. Access Tradeoff
The Conflict: Brutalist UI uses a stark monochrome palette (often black/grey/neon green) and monospace typography tightly packed into wireframe grids. While contrast is high, cognitive load is massive. Screen readers struggle with ASCII art and nested pseudo-terminal data structures.
The Compromise: All ASCII art must be hidden with aria-hidden="true", and complex grids require extensive aria-label and role="grid" attributes to make sense to non-visual users.