← Back to Skills / Marketplace / neobrutalism
SKL · 03● FREE

Neobrutalism.

Heavy borders, bold offset shadows, flat colors — raw and intentional. The style behind Gumroad and the best indie launches.

● Live preview · Neobrutalism demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Neobrutalism is what happens when a designer decides to stop hiding the structure of the interface and make it the point. Heavy borders, bold offset shadows, flat colors, and typography that doesn't apologize for taking up space. It looks raw and intentional at the same time — like the app was built by someone who had strong opinions and didn't care if you agreed. You've seen it on Figma's old website, on Gumroad, on viral Product Hunt launches. It's the style that makes non-designers say "I love how weird this looks."

● Looks Like
GumroadEarly Figma marketingPikaSome.appLinear's launch pagesA lot of the best-looking indie products on Product Hunt
02 · Best For / Avoid If
＋ Best For
+Creative tools and design apps
+Developer tools with personality
+Personal portfolios and side projects you want people to remember
+Consumer apps targeting younger audiences
+Landing pages that need to stand out in a crowded market
+Anything where being memorable matters more than being safe
× Avoid If
×You're building something for enterprise clients or corporate users
×Your product is in healthcare, finance, legal, or any field where trust and credibility are the primary signals
×Your brand needs to feel polished and refined rather than bold and raw
×You have a lot of dense data or complex tables — the heavy borders become overwhelming at high information density
03 · Design Philosophy
01

Honesty over decoration

Neobrutalism removes the visual tricks that most design uses to make interfaces look "nice" — the soft shadows, the gentle gradients, the rounded corners that make everything feel friendly. What's left is the raw structure. Borders are borders. Buttons look like buttons. This honesty is exactly what makes it feel confident rather than naive.

02

Contrast does all the work

Where other styles use subtle color differences and soft transitions to create hierarchy, neobrutalism uses contrast — heavy black borders against flat color, bold type against white backgrounds, thick offset shadows that create a physical sense of depth without pretending to be realistic. High contrast means you never have to wonder where to look.

03

Personality is a feature

A neobrutalist app has a point of view. Users either love it or it's not for them — and that's fine. Products that try to appeal to everyone end up appealing to nobody. Neobrutalism commits to an aesthetic and earns loyalty from the people who get it.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Pure black and white without color reads as unfinished
Neobrutalism needs at least one strong accent color to feel intentional. Cream + black + one bold color is the minimum.
! WARNING
Border overload
When everything has a heavy border, nothing stands out. Use the heavy border treatment for interactive elements (cards, buttons, inputs) and let text sections breathe without borders.
! WARNING
Forgetting the offset shadow interaction
The button press effect (shadow disappears + button shifts on click) is 50% of what makes neobrutalism feel right. Without it the buttons just look weird. Make sure Claude includes it.
! WARNING
Wrong font choice
Claude often pairs neobrutalism with rounded sans-serif fonts that feel friendly and soft — the opposite of the aesthetic. Ask for a grotesque or condensed sans-serif with no softness.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD