Design

Neo-Brutalism

You might say

Go bold and expressive with thick black borders, bright color blocks, and hard shadows.

Use direct structure, strong contrast, and deliberately exposed constructionNeo-brutalist web design uses heavy outlines, bold type, simple shapes, hard shadows, and obvious interaction. It can feel energetic and candid when the hierarchy remains disciplined. Random misalignment and aggressive color do not become a design system just because they look unconventional.
RECENT ORDERSWorks just sold
View all →
ProductCustomerAmountStatus
NSNotion Authoring System@lulu¥129Delivered
FGFigma component template@mango¥69Delivered
WBIndependent Development Manual@zoe¥49To be delivered
TOP 01NOTION
Creation System
This week’s top seller128 copies sold¥129 / copy
Design Principles
  • Make the structure and interaction obvious
  • Use strong type and borders with a clear hierarchy
  • Choose a limited high-contrast palette
  • Let hard shadows describe layers consistently
  • Keep intentional irregularity separate from accidental disorder

When to use it

  • Creative studio or portfolio
    Stop overthinking. Ship it.An indie developer’s defiance and directness
  • Youth, culture, and event campaigns
    E-book ¥29Gumroad-style digital goods
  • A product with a direct, playful voice
    Hackathon 202648 hours
  • Small sites that benefit from strong identity
    “Anti-polish” is a stance too

When NOT to use it

  • Use constant visual shouting in a dense work tool
    Banking app (thick black outlines + fluorescent pink)Finance and healthcare need trust; a brutalist treatment can feel unreliable.
  • Sacrifice reading and focus states for attitude
    Enterprise tools need credibility, scanability, and clear states first.
  • Mix many unrelated colors, borders, and shadows
    Government service portal (high-contrast palette)Formal service contexts should prioritize dignity, stability, and ease of use.
  • Imitate roughness without a consistent layout
    × N pages
Anatomy
Solid black stroke 2-3px hard shadow Highly saturated contrasting colors Aa900 bold black title Press displacement
Create paper-cut outlines with uniform scale, and adjust color and thickness according to theme and component size
Non-blurred solid color displacement creates a collage feel, and the offset is set according to space and control size.
Examples use fluorescent powder, bright yellow and bright blue; the actual color palette must have primary and secondary colors and pass comparison tests
Large bold fonts establish visual attitude. Chinese and English need to deal with font weight, font spacing and line breaks separately.
Feedback must be provided on hover, focus and pressed states, not just the mouse.
AI Prompt

Neo-brutalist creator dashboard, clear income and order hierarchy, 2–3px black borders, hard offset shadows with no blur, yellow base with limited pink and blue status accents, extreme 800/400 type-weight contrast

Typical use cases
Creative agency

Scroll sideways to explore the full example

MO MAKER OFFICECREATOR OS ■ Store is open
01 Business Overview 02 My Products03 Order Management04 Customer List JULY GOAL　68%Still ¥3,820
Today, sell your work
. + Release new products ↗
This month’s income¥16,180 Today’s order38 Conversion rate8.7%
Works just soldView all →
Notion authoring system@lulu¥129
Figma component template@mango¥69
Event page

Scroll sideways to explore the full example

New online New online New online New online New online New online
Don't think about it,
Go online first.
A checklist tool to help you release MVP in 7 days.
Your email Subscribe →
3,402 makers have joined · One letter per week
Portfolio

Scroll sideways to explore the full example

HACKATHON_2026 4.18 - 4.20
48 hours to turn your idea into a product.
Shenzhen Bay ¥100,000 Prize Pool Limited to 200 people
DAY 1Form a team + create a topic, play string in the early morning
DAY 2Development sprint, mentor tour
DAY 3Demo Day + Awards
Register now →
Culture brand

Scroll sideways to explore the full example

Xiaoli’s shop ♥ Follow 1.2k
Notion template package¥19
Figma Component Library¥49
30 editing presets¥29
Enter the store and browse (24 items)→
Further reading
Brutalism and AntidesignNN/g ↗