Neo-Brutal Market
Neo-brutalism × candy color blocks, an indie brand storefront
3px ink outlines, zero-blur hard shadows and flat candy colors — every button presses down into its shadow. Spinning stickers, tilted tags, a filterable product grid and a bouncing cart counter make a small brand loud and usable. For streetwear, creative goods, independent labels and campaigns.
Included with Pro · Buy individually for ¥19 · Updated · Live demo
Signature details
- Buttons that press into their shadow
- Spinning sticker and tilted tags
- Bouncing cart counter
Page sections
- Ticker
- Navigation
- Hero color blocks
- Product grid + filters
- Manifesto
- Newsletter
- Footer
Palette
- Paper
#FFF4D6— background - Ink
#0E0E0E— text / border / shadow - Yellow
#FFD23F— block - Pink
#FF5FA2— accent - Blue
#3D6BFF— block - Green
#2BD97C— success - Orange
#FF8A3D— block
Typefaces
- Archivo Black — display
- Space Grotesk — body
- Space Mono — labels / prices
Prompt outline
- Design Intent
- Design Tokens
- Typography
- Color & Material
- Layout & Grid
- Page Blueprint
- Components
- Motion & Interaction
- Responsive Behavior
- Accessibility
- Do / Don't
- Output Requirements
How to use this style
Copy the full prompt into any AI; or download it as an agent skill / Cursor rule / AGENTS.md; or, in any MCP-connected tool, say: “Build this page in the neo-brutal-commerce style from ui-atlas”.
Free preview
# Neo-Brutal Market — Indie E-commerce Storefront You are a senior designer with a punk-zine sensibility and a front-end engineer who sweats interaction details. Build the storefront homepage for a fictional independent goods shop called **"KIOSK CLUB"** in the **Neo-Brutal Market** style described below. Every value is a specification, not a suggestion. ## 1. Design Intent Loud, tactile, funny — like a sticker-covered market stall printed on a risograph. Thick 3px ink outlines, flat candy colors, and **hard offset shadows with zero blur** make every element look like a physical cut-out you can press. The layout is bold but disciplined: a clear grid, generous gaps, and consistent 14px corners keep the chaos legible. Products are represented by playful flat geometric "objects" built in CSS, not photos.