# Neo-Brutal Market

> Neo-brutalism × candy color blocks, an indie brand storefront

- URL: https://ui.ddct.top/p/neo-brutal-commerce
- Category: Commerce
- Tags: Neo-Brutalism, Colorful, Playful, E-commerce, Bold Type
- Access: Included with Pro · Buy individually for ¥19
- Live demo: https://ui.ddct.top/api/demo/neo-brutal-commerce
- Updated: 2026-10-18

## About

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.

中文简介：3px 黑色描边、零模糊硬投影、糖果色平涂色块：每个按钮按下时都会“压进”阴影里。旋转贴纸、倾斜标签、可筛选商品网格与会弹跳的购物车计数器，让小众品牌店铺有态度又好用。适合潮牌、文创、独立设计品牌与活动页。

## 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

| Name | Hex | Role |
| --- | --- | --- |
| 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

## How to use

- Copy the prompt from https://ui.ddct.top/p/neo-brutal-commerce into any AI that writes front-end code.
- Or export it as an agent skill, a Cursor rule or AGENTS.md from the same page.
- Or connect the UI Atlas MCP server (https://ui.ddct.top/mcp) and ask: “Build this page in the neo-brutal-commerce style from ui-atlas”.

## 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.

_The full prompt is available to Pro members at https://ui.ddct.top/p/neo-brutal-commerce._