Design Style 001 — Neobrutalism

bold. raw. beautiful.

Neobrutalism is a design philosophy built on calculated rawness. Thick borders, hard shadows, flat colors — not because it's trendy, but because it's honest. Design that refuses to disappear into the background.

Explore the Style → See Principles
01 What Is It?

The philosophy
behind the borders.

001 — Calculated Rawness

Not sloppy. Not lazy. Intentional.

Neobrutalism emerged as a reaction to the sterile, over-polished aesthetic that dominated digital design through the 2010s — gradient cards, soft shadows, rounded everything. It borrows the raw, structural honesty of Brutalist architecture and translates it to the screen.

Every thick border and hard shadow makes a statement: this interface knows exactly what it is, and it's not trying to hide. The rawness is never accidental — it's designed down to the pixel.

002 — The Spirit

Born from Protest

A reaction to corporate minimalism that made every SaaS product look identical. Neobrutalism says: design can have a personality, sharp edges, and a point of view. It should feel like someone made it.

003 — The Look

What Makes It Tick

Five things: thick borders, hard offset shadows, flat primary colors, oversized type, and press-down button mechanics. None of these alone — all of them together, with restraint.

004 — The Core Formula

It all starts here.

/* The Neobrutalism formula — adapt values, never the shape */ .element { background: #FFFFFF; /* flat surface, no gradient */ border: 2px solid #111111; /* visible, always */ border-radius: 10px; /* rounded — never 0px */ box-shadow: 4px 4px 0px 0px #111111; /* hard offset — ZERO blur */ } .element:hover { transform: translate(2px, 2px); /* move toward shadow */ box-shadow: 2px 2px 0px 0px #111111; /* shadow shrinks to match */ }
02 Design Principles

Five laws.
No exceptions.

The Hard Shadow Rule

Solid, offset, zero blur. The shadow gives elements physical weight — like they're sitting on a surface. 4px 4px 0 #111. Always.

The Border Rule

Every interactive element gets a visible border. It frames, anchors, and signals: something is here to interact with.

Press-Down Mechanic

Buttons physically sink on click. Shadow shrinks as the element translates toward it. Tactile. Satisfying. Mechanical.

The Color Rule

Flat and deliberate. Warm cream base, pastel accents, black borders. No gradients on containers. Colors chosen with intent.

The Typography Rule

Headlines hold the layout together. Weight 800, tight tracking, lowercase for warmth. Never a light font on a headline.

03 Best For · Avoid If

Know when
to reach for it.

✓It Shines When —
  • ✓Portfolio sites and personal pages that need to make a statement
  • ✓Landing pages for indie products, startups, and open-source tools
  • ✓Marketing sites that need to stand out in a sea of sameness
  • ✓Dev tools and coding apps — raw feels right in technical contexts
  • ✓Digital zines, editorial sites, and design-forward content
  • ✓Apps that should feel human-made, not corporate and committee-approved
  • ✓Anywhere you want people to stop scrolling and actually look
✗Skip It When —
  • ✗Enterprise dashboards with dense data tables and hundreds of rows
  • ✗Medical, finance, or legal products where trust must read instantly
  • ✗When the brand is "quiet luxury", "minimal", or "premium subtle"
  • ✗Multi-step forms with dozens of fields — borders get noisy at scale
  • ✗Products where the UI should be invisible, not the feature
04 By The Numbers

The spec sheet.
Everything is a choice.

0px
Border Width
Standard Brut. Visible enough to feel. Heavy Brut goes to 3px. Light Brut starts at 1px.
0px
Shadow Offset
The hard shadow that gives elements physical presence. Zero blur radius — always and forever.
0px
Border Radius
Rounded corners keep the style warm and approachable. Pills on buttons, circles on icons.
05 Feel It

The mechanic, in your hands.

★ Interactive Demo — Hover & Click Me

This Is What Neobrutalism Feels Like

Hover to nudge toward the shadow. Click to fully press down — as if you're physically pushing the card into the page. That tactile mechanic is the signature of the style, and it's all just CSS transforms.

06 Get Started

Build something bold.

Drop the Neobrutalism skill into Claude and start shipping raw, unapologetic UI. No boilerplate setup. Just a design language with a point of view and a spec that Claude will follow exactly.

★ Free for personal projects · Works with Claude & Cursor