EST. 2024

NEO BRUTALISM

RAW • BOLD • UNAPOLOGETIC

Brutalist design rejects conventional beauty. It's intentionally rough, bold, and confrontational. A rebellion against overdesigned, polished interfaces.

100%

AUTHENTIC

COMPROMISES

∞

ATTITUDE

ANTI-DESIGN

WHAT IS NEO-BRUTALISM?

ANTI-DESIGN

Neo-Brutalism is the punk rock of web design. It intentionally breaks rules, rejects smooth gradients, subtle shadows, and polished aesthetics. Everything is raw, exposed, and in-your-face.

HONEST MATERIALS

Inspired by Brutalist architecture, which exposed concrete and structural elements. Neo-Brutal web design shows the digital "concrete": thick borders, monospace fonts, visible grids.

◼

LOUD & PROUD

Bright, clashing colors. Oversized typography. Asymmetric layouts. It demands attention and refuses to blend in. Perfect for brands that want to stand out.

★

MANIFESTO

THE BRUTAL PHILOSOPHY

→

REJECT PERFECTION. Embrace asymmetry, rough edges, and unconventional layouts.

→

NO SUBTLETY. Use thick borders (3-5px), high contrast, and bold colors.

→

FUNCTION OVER FORM. Prioritize usability, but make it visually confrontational.

→

AUTHENTICITY. Show the structure. No hiding behind smooth animations or polished UI.

→

BREAK THE GRID. Overlap elements, use rotated text, create visual chaos with purpose.

→

PERSONALITY. Every brutalist site should feel unique, rebellious, and memorable.

CORE PRINCIPLES

RULE 01

THICK BORDERS EVERYWHERE

3-5px solid black borders define every element. It's the signature of brutalism: harsh, unapologetic edges.

BRUTAL

RULE 02

CLASHING COLOR COMBOS

Lime green + hot pink. Yellow + purple. Colors that shouldn't work together, but somehow do.

RULE 03

OVERSIZED TYPOGRAPHY

Huge, bold, all-caps headings. Typography becomes a visual element, not just text.

BIG

RULE 04

HARD SHADOWS

No soft, blurred shadows. Only hard, offset shadows (usually black) that create a print-like effect.

SHADOW

RULE 05

ASYMMETRIC LAYOUTS

Forget perfect centering. Elements overlap, rotate, and break traditional grid systems.

RULE 06

MONOSPACE FONTS

Courier, Space Mono, IBM Plex Mono. Monospace fonts add to the "digital concrete" aesthetic.

CODE_STYLE

BRUTALISM IN ACTION

Real-world references cited for design inspiration only, not Kanso client work or official partnerships.

WEBSITE

Gumroad

Simple, brutalist e-commerce. Thick borders, bright pink accents, no-nonsense layout.

E-COMMERCE PINK

PORTFOLIO

Bella Thorne

Personal site with rotating text, clashing colors, and intentional chaos.

CELEBRITY EXPERIMENTAL

AGENCY

Balenciaga

Luxury fashion brand using brutalism to appear edgy and anti-establishment.

FASHION HIGH-END

APP

Craigslist

The OG brutalist site. Minimal styling, raw HTML, purely functional.

CLASSIC MINIMALIST

WHEN TO GO BRUTAL

✓

PERFECT FOR

Music/Arts/Creative portfolios
Fashion brands targeting Gen Z
Gaming and entertainment sites
Tech products wanting to stand out
Brands with strong personality
Experimental or avant-garde projects

AVOID FOR

Corporate/Enterprise software
Healthcare or financial services
E-learning platforms
Government websites
Brands needing trust/authority
Accessibility-critical applications

CODE IT BRUTAL

The CSS is simple, intentionally so. No complex preprocessors needed.

brutal.css

.brutal-card {
  border: 0.25rem solid #000;
  box-shadow: 0.5rem 0.5rem 0 #000;
  background: #CCFF00;
  padding: 2rem;
  transform: rotate(-2deg);
}

.brutal-title {
  font-size: 4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #000;
}

QUICK TIPS

Borders: Always 3-5px solid black
Shadows: Hard, offset shadows (no blur)
Typography: All-caps for headings, monospace for code
Colors: Primary colors at full saturation
Layout: CSS Grid with asymmetric areas

NEO BRUTALISM