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.
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 portfolio
- Youth, culture, and event campaigns
- A product with a direct, playful voice
- Small sites that benefit from strong identity
When NOT to use it
- Use constant visual shouting in a dense work tool
- Sacrifice reading and focus states for attitude
- Mix many unrelated colors, borders, and shadows
- Imitate roughness without a consistent layout
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
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
Portfolio
Culture brand
Further reading