Hot Pink Brutal
Hot pink, hard black shadows and pill buttons: neo-brutalism with lipstick on.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A blush canvas, black outlines and a hot pink that refuses to be pastel. Rounded cards sit on solid black shadows, headlines are fat and friendly, and flash-lit product shots look like they were taken on a seamless pink backdrop. Brutal structure, glossy attitude.
Hot Pink Brutal applies neo-brutalist structure — thick outlines, solid offset shadows, honest boxes — to the language of indie beauty and 2000s pop. The canvas is a pale blush, the action colour is an unapologetic hot pink, and everything is drawn in 3px black. Unlike stricter brutalism, corners are rounded to 18px and buttons are full pills, so the hardness reads as playful rather than hostile. Flash-lit product photography on seamless pink adds gloss. It should feel loud, warm and confident, like a pop-up shop with a queue outside.
Principles
- Outline everything in 3px black and back it with a solid 6px shadow.
- Round corners generously (18px) and make every button a pill.
- Hot pink is for buying; teal is for one supporting detail.
- Photograph product with hard flash on seamless pink.
- Use stars and sparkle ornaments sparingly, two per viewport.
Motion
Sections spring up 24px with a slight overshoot. Cards tilt 2° on hover while their black shadow stays put, and the shade-name marquee scrolls in Bricolage at 56px.
Do & don't
Do
- ✓ Keep shadows solid black and offset equally on x and y.
- ✓ Use pills for buttons, chips and the nav.
- ✓ Shoot products with hard flash for crisp shadows.
Don't
- ✕ Don't soften shadows or use transparency.
- ✕ Don't use thin 1px borders.
- ✕ Don't use pastel pink as the action colour.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 366 lines of DESIGN.md in total.
More like this
All Brutalist →
Acid Black
No. 011Acid green on pure night: a warehouse-rave flyer that boots like a terminal.
Concrete Poster
No. 012Board-marked concrete and a grotesk set so large it becomes the building.
Default HTML
No. 013The browser's own stylesheet, taken seriously: Times, blue links, exposed structure.
FreeNeo Brutal Yellow
No. 014Highlighter yellow, 3px black borders and shadows that never blur. Loud on purpose.
Hazard Industrial
No. 034Black and safety yellow, hazard tape and stencil type from the loading dock.
Swiss Numerals
No. 036Brutal Swiss: a hard grid, signal red and numerals the height of the screen.