High contrast monochrome with image-driven accents
03
Typography
grotesque-sans
display56px · 500
display-sm26px · 500
body12px · 500
body-lg16px · 500
Use NeueHaasDisplay for all text elements · Default weight is 500 for most elements · Uppercase transformation is heavily used for navigation and CTAs · Tight line-height (1.16) for small UI text
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Consistent with tight spacing reflecting industrial brutalist aesthetic
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
0px solid transparent — minimal use of visible borders
rgba(0, 0, 0, 0.3) 0px 0px 24px 0px
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed hero imagery with minimal UI overlay
07
Motion & Interaction
200msmicro
400mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth transitions on all interactive elements (0.2s ease-in-out) · Opacity fade-ins for content loading (1s) · Subtle background color shifts (0.6s)
Subtle color inversion or opacity change · Immediate visual feedback via state change
08
Components
buttonSimple uppercase text buttons with no background or border, hover state only
cardProduct cards with full-bleed imagery and minimal text overlay
chipN/A — chips are not a primary component in this design
inputMinimal text inputs with bottom-border only style
heroFull-viewport cinematic photography with large, left-aligned typography
09
Voice & Don'ts
ToneMinimal, direct, and authoritative
HeadlinesShort, punchy, uppercase phrases
CTAsSimple, command-like text (e.g., 'Shop now', 'Close')
Don't use rounded corners on cards or buttons — screenshot shows sharp, angular edges
Don't use a multi-color palette — screenshot shows strict monochrome black and white
Don't use light or airy backgrounds — screenshot shows dominant black background
Don't use decorative or script fonts — screenshot shows strict grotesque-sans typography
Don't center-align all text — screenshot shows strong left-alignment for navigation and headlines
Don't use busy borders or dividers — screenshot shows clean, borderless separation between elements
Avoid: Avoid decorative elements
Avoid: Avoid complex UI patterns
Avoid: Avoid excessive text descriptions
Avoid: Avoid vibrant or playful color palettes
Avoid: Avoid ornate typography
Avoid: Avoid rounded corners on primary containers
Captured from the live site · real computed styles
11
System prompt
A-COLD-WALL* is a premium streetwear fashion brand with a brutalist industrial aesthetic. The site uses a strict monochrome palette dominated by deep black (#000000) and crisp white (#FFFFFF) typography. The design is characterized by bold, uppercase grotesque-sans typography (NeueHaasDisplay) at a medium weight (500), creating a stark, architectural feel. Key colors include #000000 for backgrounds and #FFFFFF for primary text, with #2B2B2B used for muted UI elements. The layout is minimalist, featuring full-bleed photography with minimal UI chrome. Critical design rules: never use rounded corners on primary UI elements (except pills), never introduce color into the core palette, and always maintain strict left-alignment for navigation and headers. The overall experience is refined, editorial, and intensely focused on visual storytelling through high-contrast photography.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
