Neobrutalism
新粗野主义
Aliases:新粗野主义粗野风大黑边风格硬阴影风格新残酷主义Neo-brutalismBrutalist Web Design
What is it
A loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.
Design spec
Typography
Ultra-bold sans, all caps
Color
Cream base, pure black, orange #FF6B00
Border
3px solid black borders
Shadow
5px 5px 0 hard offset shadows
Spacing
Zero radius, tight stacking
Motion
Roughly 100ms hard positional press, no easing
States
Hover shifts into the hard shadow; focus shows a visible 3px black frame; active presses down and removes the shadow; disabled greys out without shifting; error uses a harsh orange-red border
Style in action
See the full page, then try the interactive sceneFull-page preview
Good ideas
make a brighter world.
We bring design, content and code together
to make brands feel a little more human.
Design.
More Fun!⤴
IDEAS
MAKE A
BRIGHTER
TOMORROW.
☑ Design
☑ Develop
☑ Create
TogetherEXPLORE
BELONG
Interactive scene
Loading demo…
✓ When to use
- Youth-oriented brands, campaigns and developer-tool landing pages
- Standing out with strong personality among polished sites
- Marketing pages, portfolios and creative communities
✕ When not to use
- Finance, healthcare or enterprise products that must feel trustworthy
- Long-session productivity tools — loud decoration fatigues
- Dense content or data UIs where borders and color eat information space
Variants
Classic Hard Shadow
经典硬阴影
Cream background, black borders, offset solid shadows
Candy
糖果色
Saturated pink, purple and yellow blocks colliding
Grunge
粗粝噪点
Adds noise, tilted elements and doodles
Implementation
border: 2-4px solid #000box-shadow: 4px 4px 0 #000border-radius: 8-16pxbackground: saturate()transitionThe style hinges on three traits: thick black borders (2–4px), hard offset shadows (e.g. 4px 4px 0 #000 — never blurred) and cheerful radii. Use saturated candy colors and clash them boldly. Interactions shine: shift the element on hover, then zero the shadow on active as if pressed into paper. Add noise with SVG feTurbulence or repeating gradients.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a card + button section in Neobrutalism style in the current project. Inspect the existing components and design tokens first; check for reusable border/shadow variables. Requirements: - Thick black borders (2–3px) + hard offset shadows (no blur) - Saturated clashing colors on a cream base - Buttons that lift on hover and swallow their shadow on active - Dark mode support (near-black base, colors stay bright) - Transitions respect prefers-reduced-motion, under 120ms - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language of playing composition with geometry: circle, triangle and square in primary red, yellow and blue plus black, asymmetric yet balanced. Decoration obeys function — every plane and line carries structure, and a poster reads as a study in geometric relations.
StylesSimilarThe postmodern anti-functionalist language: squiggles, dots, zigzags and confetti spots in saturated clashing colors with bold black outlines, deliberately breaking grids and order. It embraces the cheap and the festive — happily ugly against modernist good taste.
StylesSimilarA visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffects