Back to Hub
Design Sample / Brutalist Grid Go to Hub

No Frills. Pure Structure.

Brutalist style foregrounds structure itself over decoration. Through lines, blocks, and bold text, it creates an impression that is "experimental yet clear." Your prompt must specify "thick borders, high contrast, simple forms."

Keep backgrounds flat and create contrast through text and lines.
Prioritize alignment and division over spacing between components.
Buttons and tags are treated as minimal solid-color blocks.

AI Request Prompt

Design an experimental product showcase page based on brutalism.

Core rules:
- Grid: 12-column based, clear division with thick black lines (3px solid #111)
- Corners: Minimize rounding (0-4px), right-angle block elements
- Typography: Headings are very large and bold sans-serif (Archivo Black, uppercase), body in monospace (IBM Plex Mono)
- Colors: Black and white base + 1 accent color (Red #d72600 or Yellow #ffd12f)
- Hero: 8:4 ratio split, sidebar with Rules/Stats
- Motion: Mechanical feel with steps() easing, staggered section entrance only (0.12s intervals)

Responsive:
- Mobile (~850px): 12 columns to 1-column stack, remove border-right
- Desktop: max-width 1160px, panels in 3-column equal split

Restrictions:
- No smooth gradients/glows/shadows
- No rounded corners (border-radius)
- No pastel tones

Output:
1) 12-column layout structure (Hero 8col + Side 4col + Panel 3-column)
2) Component style rules (panels/stats/buttons)
3) HTML/CSS code with responsive support