# A-COLD-WALL* · Design system migration spec

> Source: https://www.a-cold-wall.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a brutalist, premium fashion e-commerce aesthetic with extreme restraint.

## 1. Identity DNA

The design system operates like raw concrete architecture: a framework of severe materials—black, white, and a single typeface—supporting the expressive weight of the product imagery. This is a brutalist structure where every UI element is a load-bearing component, stripped to its essential form. The result is a space of high-contrast silence, designed to let the clothing speak with unobstructed authority.

**One-liner:** Industrial-brutalist luxury fashion e-commerce
**Keywords:** Industrial · Brutalist · Streetwear · Minimal · Premium
**Analogy:** Concrete architecture meets high fashion

## 2. Color

The palette is a deliberate void, a strict monochrome of deep black grounds and white typographic forms. It is a system of absence, where the only potential color is introduced transiently through the photography itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#2B2B2B` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High contrast monochrome with image-driven accents

The governing principle is contrast as structure, not decoration.

## 3. Typography

Typographic voice is singular and authoritative, assigned entirely to the grotesque-sans NeueHaasDisplay. The system favors a consistent, medium weight, relying on dramatic scale shifts and aggressive uppercase transformation to establish hierarchy.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headlines |
| display-sm | 26px | 1.0 | 500 | 0px | Section headers |
| body | 12px | 1.16 | 500 | 0px | Navigation and UI text |
| body-lg | 16px | 1.5 | 500 | 0px | Body paragraphs |

**Type rules:**
- 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

## 4. Spacing

Spacing follows a tight, industrial rhythm, reflecting a brutalist ethos of density and economy.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent with tight spacing reflecting industrial brutalist aesthetic

## 5. Surfaces

Depth is communicated through a single, consistent shadow value, creating a subtle layering effect above the dominant flat surfaces. Visible borders are rejected in favor of negative space and tonal separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 0px 24px 0px
- **Borders:** 0px solid transparent — minimal use of visible borders

## 6. Layout

The structural skeleton is built for cinematic impact, with full-bleed hero imagery that dominates the viewport. Minimal UI chrome floats over this visual field, anchored by strong left-aligned typography.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero imagery with minimal UI overlay

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and immediacy. Transitions are quick, smooth, and purely functional, serving to confirm interaction or gracefully reveal content without drawing attention to themselves.

- **Durations:** micro 200ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements (0.2s ease-in-out)
  - Opacity fade-ins for content loading (1s)
  - Subtle background color shifts (0.6s)

- **Hover:** Subtle color inversion or opacity change
- **Click:** Immediate visual feedback via state change
- **Transition:** All interactive elements have smooth, quick transitions
- **Keyboard:** Standard focus outlines on interactive elements

## 8. Voice & Don'ts

The editorial voice is minimal, direct, and authoritative, rendered in short, punchy uppercase phrases. It is a voice of command, not invitation.

- **Tone:** Minimal, direct, and authoritative
- **Headline style:** Short, punchy, uppercase phrases
- **CTA style:** Simple, command-like text (e.g., 'Shop now', 'Close')
- **Avoid:** Avoid decorative elements / Avoid complex UI patterns / Avoid excessive text descriptions / Avoid vibrant or playful color palettes / Avoid ornate typography / Avoid rounded corners on primary containers

### Don'ts
- ❌ 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

The system deliberately avoids decorative flourish, rounded forms, and vibrant color.

## System Prompt (paste into AI tool)

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