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.
Scroll sideways to explore the full example
WED. 22 JULYToday, sell the work
＋ Publish new products ↗
Today, sell the work
.
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
Creation System
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 portfolioStop overthinking. Ship it.An indie developer’s defiance and directness
- Youth, culture, and event campaignsE-book ¥29Gumroad-style digital goods
- A product with a direct, playful voiceHackathon 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 toolBanking app (thick black outlines + fluorescent pink)Finance and healthcare need trust; a brutalist treatment can feel unreliable.
- Sacrifice reading and focus states for attitudeEnterprise tools need credibility, scanability, and clear states first.
- Mix many unrelated colors, borders, and shadowsGovernment 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 ↗
. + 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
Portfolio
Scroll sideways to explore the full example
Culture brand
Scroll sideways to explore the full example
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading