Brutalist E-commerce Page
superdesignCC0-1.0Prompt onlyLanding · landingBrutalist · brutalistGradient · gradientWarm · warmExperimental · experimentalLight · lightLow (display) · lowRed · redVivid · vividSerif · serifGeneral · general
A brutalist editorial e-commerce style guide inspired by poster-campaign aesthetics. Characterized by massive grotesque typography (Clash Display), soft-blurred gradient forms in red-orange tones (#DB4A2B, #F8A348), and a warm cream background (#E4E2DD). This aesthetic is optimized for high-end fashion, architecture, or lifestyle brands that want a 'poster-first' digital presence. Features include scroll-triggered entrance animations, mix-blend-mode interactions, and a clean, borderless grid structure. Category: E-commerce. Prompt author listed upstream: Shirley Lou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Brutalist E-commerce Page" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/brutalist-e-commerce-page · 6c6090694520 · © Superdesign
Prompt
{
"summary": "Raw Form is a high-contrast, brutalist design system that prioritizes typographic drama and atmospheric depth. It replaces traditional container-heavy UI with massive type breaks, soft organic gradients, and a sharp, grid-based hierarchy.",
"style": {
"description": "The style blends the raw energy of Swiss Brutalism with a refined, warm color palette. It uses 'Clash Display' for heavy headlines and 'Satoshi' for functional sans-serif body text. The color scheme is anchored by #E4E2DD (Base), #1E1E1E (Primary), and #DB4A2B (Accent Red). Animations are smooth, utilizing cubic-bezier curves for a premium feel.",
"prompt": "Apply a Brutalist Poster aesthetic. Background: #E4E2DD; Primary Text: #1E1E1E. Typography: Use 'Clash Display' for headings (700 weight, tight tracking -0.05em, leading 0.75) and 'Satoshi' for body (400-500 weight). Accent Colors: #DB4A2B (Red-Orange), #F8A348 (Warm Orange), #FF89A9 (Soft Pink). Gradients: Use large, soft-blurred radial blobs (100px+ blur) with `mix-blend-mode: multiply` behind typography. Global Animations: Implement a slide-up entrance for all elements using `cubic-bezier(0.16, 1, 0.3, 1)` over 0.8s. Selection Color: #DB4A2B with white text. Scrollbar: 8px width, #DB4A2B thumb, #E4E2DD track."
},
"layout_and_structure": {
"description": "A vertically-oriented layout featuring full-viewport typographic heroes, massive category dividers, and borderless product grids.",
"prompts": [
{
"part": "Navigation",
"prompt": "Minimalist fixed navigation. Left: Brand logo in 'Clash Display' (bold, uppercase, 2xl). Center: Text links in Satoshi (medium, 14px, tracked out 0.1em). Right: Icon set (Search, Bag) using 20px Lucide icons. Apply `mix-blend-difference` on mobile; standard dark text on desktop."
},
{
"part": "Hero Section",
"prompt": "Full viewport height. Background features three large, blurred blobs in #DB4A2B and #F8A348 pulsing slowly. Headline: 'Clash Display', 18vw size, uppercase, line-height 0.75, with second line indented 15vw. Subtext: Max-width 400px, 20px font size. CTA: Primary solid black button with white hover slide-in effect; Secondary text link in #DB4A2B with arrow icon."
},
{
"part": "Product Grid",
"prompt": "Responsive grid (1 col mobile, 3 col desktop) with 16px horizontal and 64px vertical gap. Items: 3/4 aspect ratio images with subtle hover scale (1.05). Metadata: Product names in bold uppercase Satoshi, 14px, tracking 0.15em. Price in #444444. Hover state triggers an #FF89A9 color shift on title."
},
{
"part": "Category Divider",
"prompt": "Full-width section with 128px vertical padding. Background contains a faint radial gradient (#F8A348/20%). Headline: 'Clash Display', 12vw, uppercase, tracking-tighter, slightly transparent (opacity 0.9). Right-aligned or left-aligned depending on section sequence."
},
{
"part": "Campaign Block",
"prompt": "Section background #D9D6D0. 12-column grid. Left 8 cols: 'Clash Display' headline at 6vw, leading 0.9. Right 4 cols: Vertical stack featuring thin dividers (#1E1E1E/20%) and 'Read More' links with arrow-up-right icons inside circular borders."
},
{
"part": "Footer",
"prompt": "Background #1E1E1E, text #E4E2DD. 4-column layout. Column 1: Large brand logo and social icons. Columns 2-3: Link lists in 14px Satoshi. Bottom section: Massive year indicator ('2024') in background-style text (#FFFFFF/10%) at 10vw size, right-aligned copyright notice."
}
]
},
"special_ui_components": [
{
"component": "Interactive CTA Button",
"description": "A high-contrast button with a directional fill animation.",
"prompt": "Rectangular button, no border-radius. Background #1E1E1E, text #E4E2DD. On hover, a white background (#FFFFFF) slides from left-to-right (transform -100% to 0) behind the text. Text color transitions to #DB4A2B on hover. Duration: 0.3s ease-out."
},
{
"component": "Animated Gradient Blobs",
"description": "Soft organic shapes that provide depth behind text.",
"prompt": "Position absolute divs with `width: 60vw; height: 60vw;`. Colors: #DB4A2B and #F8A348. Apply `filter: blur(140px)` and `mix-blend-mode: multiply`. Animate using a slow pulse (opacity 0.6 to 0.9) and slight translation over 10-15 seconds."
}
]
}
---
"Brutalist E-commerce Page" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Brutalist E-commerce Page. \"Brutalist E-commerce Page\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-brutalist-e-commerce-page",
"license": "CC0-1.0",
"attribution": "\"Brutalist E-commerce Page\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#1e1e1e"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#1e1e1e"
},
"primary": {
"$type": "color",
"$value": "#db4a2b"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#e4e2dd"
},
"secondary-foreground": {
"$type": "color",
"$value": "#1e1e1e"
},
"accent": {
"$type": "color",
"$value": "#f8a348"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#6d6d6d"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#db4a2b"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Brutalist E-commerce Page" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #1e1e1e;
--card: #ffffff;
--card-foreground: #1e1e1e;
--primary: #db4a2b;
--primary-foreground: #fafaf9;
--secondary: #e4e2dd;
--secondary-foreground: #1e1e1e;
--accent: #f8a348;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #6d6d6d;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #db4a2b;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Brutalist E-commerce Page" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520. */
/** Tailwind theme extend for Brutalist E-commerce Page (superdesign-brutalist-e-commerce-page) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#1e1e1e",
"card": "#ffffff",
"primary": "#db4a2b",
"primary-foreground": "#fafaf9",
"secondary": "#e4e2dd",
"accent": "#f8a348",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#db4a2b"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Brutalist E-commerce Page" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/brutalist-e-commerce-page @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #1e1e1e;
--card: #ffffff;
--card-foreground: #1e1e1e;
--primary: #db4a2b;
--primary-foreground: #fafaf9;
--secondary: #e4e2dd;
--secondary-foreground: #1e1e1e;
--accent: #f8a348;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #6d6d6d;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #db4a2b;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}