Brutalist Raw
Unpolished, confrontational web — thick borders, system fonts, zero decoration
Color Palette
Typography — IBM Plex Mono
THIS IS A WEBSITE
No Frills Section
!!! IMPORTANT !!!
Subsection Title
Label Header
meta / timestamp
Brutalist web design rejects polish. Content is king. Decoration is suspect. Every element should feel like it was placed by hand in a text editor at 3 AM. If it looks too nice, make it worse.
[last modified: 1997-04-01]
Buttons
Solid Black
Black fill, white text, 3px border, zero radius — looks like a default HTML button from 1998
Raw Outline
White bg, thick black border, inverts on hover mentally
Red Alert
Aggressive red for destructive or urgent actions
Inverted Block
Black panel context buttons
Form Inputs
Badges & Tags
Surfaces & Cards
Raw Block
Plain white box with a thick black border. Nothing else.
Yellow Highlight
Aggressive yellow background — like a highlighter pen on paper.
Red Warning
Full red block for errors or critical notices.
Black Inversion
Inverted black panel — white text, harsh contrast.
Border Radius Scale
0px
0px
0px
0px
0px
Component Example
Content First
No hero images. No gradients. Just text and borders.
Anti-Pattern
Break grid rules on purpose. Overlap elements.
View Source
It should look like readable HTML rendered as-is.
Design Tokens
| Token | Value | Usage |
|---|---|---|
--brutal-black | #000000 | Primary ink |
--brutal-white | #FFFFFF | Background |
--brutal-red | #FF0000 | Alert accent |
--brutal-yellow | #FFFF00 | Highlight |
--brutal-border | 3px solid #000 | Default border |
--brutal-link | #0000FF | Hyperlink color |
--brutal-radius | 0px | Always zero |