Brutalism

Brutalism strips the interface back to raw material: black borders, hard shadows with no blur, screaming type, and primary colors that refuse to apologize. It rejects soft gradients and gentle rounding in favor of blunt honesty—what you see is structure, and the structure is the style. Reach for it when you want a page that feels handmade, confident, and impossible to ignore: portfolios, drops, zines, and statement landings that thrive on attitude over polish.

Design principles

• Zero softness: 0px radius everywhere, hard edges on every box and button.
• Borders do the work: thick black strokes (2–4px) define structure instead of subtle shadows.
• Hard offset shadows only: solid color blocks offset down-right with no blur, like a stamp.
• Type as image: oversized, uppercase, ultra-bold headlines that dominate the layout.
• Raw color: pure black and white plus loud, saturated primaries used in flat blocks.
• Intentional imperfection: slightly off-grid placement and exposed structure beat pixel-perfect polish.

Color

The base is pure white (#FFFFFF) with pure black (#000000) for text, borders, and shadows—maximum contrast, no compromise. The hero accent is a blazing red-orange #FF3B00 for primary actions, highlighted blocks, and links. Supporting accents are electric blue #0000FF and high-voltage yellow #FFE600, used as flat fill blocks behind sections, tags, and callouts. Muted gray (#444444) is the only "quiet" tone, reserved for fine print. Color is never gradient and never tinted—always 100% flat fills.

For dark mode, flip the field to pure black (#000000) with white (#FFFFFF) text, borders, and hard shadows. Keep the red-orange at #FF5722, blue at #3D5AFE, and yellow at #FFEA00 so the primaries still slam against the black. The aesthetic stays high-contrast and unblurred in both modes.

Token reference

There is no tint, gradient, or opacity in this palette—every color is a flat 100% fill, and borders/shadows always match the foreground.