---
version: alpha
name: "A-Cold-Wall*"
description: "British industrial-brutalist fashion design system — pure black and white canvas, Neue Haas Grotesk at Medium weight, concrete-grey photography, and an absolute zero-radius geometry that reads like architectural drafting, not retail."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # light off-white — secondary surfaces, footer zones
  surface-dark: "#1a1a1a"      # near-black — dark hero overlays, utility strip

  # Text / ink
  ink: "#000000"               # primary text, headings, CTAs — pure black
  ink-secondary: "#606060"     # secondary copy, metadata, subdued labels
  ink-muted: "#999999"         # captions, placeholder text, disabled states
  on-dark: "#ffffff"           # text on dark surfaces and over photography

  # Brand accent — A-Cold-Wall* is intentionally accentless; black is the accent
  primary: "#000000"           # CTA fill, primary button, icon strokes
  on-primary: "#ffffff"        # text on primary surfaces

  # Interactive states
  # was rgba(0,0,0,0.06) — Google format requires hex; flattened on white
  primary-container: "#f0f0f0"
  text-hover: "#222222"        # darkens slightly on hover — near-black
  focus-ring: "#000000"        # keyboard focus outline — pure black

  # Borders
  border: "#000000"            # primary structural border — 1px lines, nav underlines
  border-muted: "#e0e0e0"      # subtle section dividers, form chrome
  # was rgba(0,0,0,0.10) — Google format requires hex; flattened on white
  border-ghost: "#e8e8e8"      # ghost chrome, inactive tab borders

  # Shadow tints
  # was rgba(0,0,0,0.12) — Google format requires hex; flattened on white
  shadow-soft: "#e3e3e3"       # diffuse background for rare panel shadows

  # Semantic
  error: "#c0392b"             # form validation only — not part of brand palette

typography:
  display-hero:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.5px
  display:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: 0px
  heading-sub:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: 0px
  body-large:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px
  label-caps:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: 0.5px
  caption:
    fontFamily: "neue-haas-grotesk-display, NeueHaasDisplay-Roman, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 2px    # micro controls only — close buttons, form pills in widget overrides
  sm: 6px    # modal dialog and email capture widget (Klaviyo override)
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 24px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 24px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    borderColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 24px
  button-ghost-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 24px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    opacity: "0.85"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 16px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 3px 8px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border}"
    padding: 16px 20px

  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-link-hover:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border}"

  product-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 2px 0px
---

# A-Cold-Wall* Design System

## Overview

A-Cold-Wall* operates from a premise that most fashion brands sidestep: the website is not a sales floor. It is a material record — concrete grey photography, controlled light, bodies in industrial environments. The canvas is pure white (`{colors.background}`), not because white is safe but because it functions like raw paper, a neutral ground for imagery that does the heavy cultural lifting. Against this neutrality, the type arrives in Neue Haas Grotesk at weight 500 — not the thin confidence of luxury, not the aggressive bold of streetwear, but a precise medium that matches the brand's position between construction-site utility and gallery-grade fashion. The asterisk in the brand name is itself a design statement: there are footnotes here, conditions, technical annotations. The system reflects that.

What distinguishes A-Cold-Wall* from similarly minimal British brands is the relationship between photography and UI chrome. The images — dusty construction materials, industrial staging, concrete walls — carry texture, temperature, and a deliberate anti-glamour that the interface reinforces by refusing to decorate. There are no hover gradients, no animated hero tiles, no editorial badge overlays. Product cards sit flush to the grid without shadow, without border radius, without the kind of visual scaffolding that says "look how sophisticated our shop is." The product is the evidence. The site is the filing system. Navigation uses 1px borders as the only structural separator — a line that reads more like an architectural drawing than a design motif.

The system's restraint is absolute but not monastic. Uppercase `{typography.label-caps}` at 12px tracks out slightly — a precision annotation voice that labels product categories and filter states with something closer to CAD notation than lifestyle copywriting. The button text (`{typography.button-ui}`) follows with matching 0.5px letter-spacing. Both choices signal a design intelligence that knows what it is doing: controlled space where language belongs alongside material specifications, not marketing enthusiasm.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with `{colors.ink}` as the sole chromatic actor — no brand accent colour, no chromatic CTA
- Neue Haas Grotesk at weight 500 throughout — neither light luxury nor aggressive bold; industrial medium
- Zero border radius (`{rounded.none}`) on all structural elements — cards, buttons, containers, image frames
- Uppercase 12px labels (`{typography.label-caps}`) with positive tracking — a CAD-annotation register unique to the brand
- Display at 54px with tight −0.5px tracking (`{typography.display-hero}`) — confident compression at large scale
- 1px black border on navigation (`{colors.border}`) as the only structural separator; no decorative dividers
- Breakpoints at 374px, 480px, 600px, 768px, 1000px, 1440px — granular progressive collapse
- Full-bleed editorial photography: industrial, material, architecture-adjacent — the imagery IS the brand palette
- Product cards are photography-first rectangles: no shadow, no border, no radius, no chrome
- Tailwind CSS with arbitrary values (`top-[117px]`) — utility-first system with design-level precision
- Modal dialogs use 6px radius (`{rounded.sm}`) from the Klaviyo widget layer — not a native ACW shape choice
- A single CSS variable declared: `--color-black: #000` — the system tokenises almost nothing natively

## Colors

### Primary Canvas
- **White** (`{colors.background}`): The total page canvas. Raw and undecorated — functions like architectural paper, not luxury white.
- **Off-White** (`{colors.surface}`): Secondary card backgrounds, footer zones, and hover state surfaces where a tint is needed without adding colour.
- **Near-Black** (`{colors.surface-dark}`): Dark hero overlays, text over photography, utility strip backgrounds where light copy reads on deep surfaces.

### Ink / Text Scale
- **Black** (`{colors.ink}`): All headings, primary body copy, navigation links, and CTA fills. The only colour doing real work.
- **Mid Grey** (`{colors.ink-secondary}`): Secondary copy, product metadata, filter labels, inactive nav states.
- **Light Grey** (`{colors.ink-muted}`): Placeholder text, disabled states, captions, ancillary annotations.
- **On Dark** (`{colors.on-dark}`): White text and ghost button fills on dark surfaces or over full-bleed photography.

### Brand Accent
- **Black** (`{colors.primary}`): A-Cold-Wall* carries no chromatic accent. Primary CTAs, button fills, and icon strokes use the same `{colors.ink}` black. The accent IS the ink — the system intentionally refuses a separate brand colour.
- **White on Black** (`{colors.on-primary}`): Text on any `{colors.primary}` surface.

### Interaction States
- **Text Hover** (`{colors.text-hover}`): Near-black that subtly deepens link text on hover — interaction feedback without introducing colour.
- **Focus Ring** (`{colors.focus-ring}`): Pure black keyboard outline — accessibility expressed in the system's own vocabulary.

### Borders & Structure
- **Primary Border** (`{colors.border}`): 1px solid black lines on navigation, form outlines, and structural dividers. The system's only architectural element.
- **Muted Border** (`{colors.border-muted}`): Softer section dividers, secondary form chrome.
- **Ghost Border** (`{colors.border-ghost}`): Was `rgba(0,0,0,0.10)` flattened to opaque hex — the lightest structural edge, used for inactive states and widget chrome.

### Shadow Tints
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0,0,0,0.12)` — a near-white approximation used in the rare panel shadow instance. The system is essentially shadowless.

### Semantic
- **Error** (`{colors.error}`): Standard destructive red for form validation only — not a brand token.

## Typography

### Font Family
- **Primary**: `neue-haas-grotesk-display` (Adobe Fonts ID), locally loaded as `NeueHaasDisplay-Roman` — a precision grotesque with humanist roots. Used at weight 500 (Medium) for virtually the entire system.
- **Fallbacks**: `Helvetica Neue, Arial, sans-serif`
- **Secondary weight in use**: Weight 400 appears only in the Klaviyo email widget layer; the brand's own interface uses 500 throughout. Weight 700 appears only in a third-party button override.
- **OpenType Features**: None declared explicitly. The typeface is used straight — no stylistic sets, no ligatures. The system trusts Neue Haas Grotesk's inherent neutrality.

*Note: For implementations where Neue Haas Grotesk is unavailable, `DM Sans` at weight 500 is the closest open substitute — similar humanist grotesque proportions. `Inter` at 500 is the fallback of last resort; it is slightly more geometric and less characterful.*

### Hierarchy

The complete type scale is in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 54px / 500 — primary hero headlines, campaign titles over photography |
| `display` | 36px / 500 — section openers, product category headers |
| `heading-section` | 26px / 500 — feature sub-headers, editorial callouts |
| `heading-sub` | 20px / 500 — product detail headers, sidebar section labels |
| `body-large` | 16px / 500 — lead copy, product descriptions, editorial intros |
| `body` | 14px / 500 — standard running copy, filter options, metadata |
| `nav-link` | 14px / 500 — primary navigation categories, footer links |
| `button-ui` | 14px / 500 / +0.5px — CTA labels, add-to-cart, form submits |
| `label-caps` | 12px / 500 / uppercase / +0.5px — product category tags, filter labels, annotation micro-type |
| `caption` | 12px / 500 — timestamps, secondary product data, fine print |

### Principles
- One typeface, one weight: Neue Haas Grotesk at 500 carries the entire system. There is no display face, no serif accent, no mono utility voice.
- Weight 500 (Medium) is the system's single register — not light luxury, not bold streetwear. A specification weight.
- Negative tracking at large sizes (`−0.5px` at 54px) creates measured compression without the aggressive tightness of hype streetwear.
- Uppercase 12px labels (`{typography.label-caps}`) with positive tracking (+0.5px) are the system's micro-annotation voice — clinical, precise, closer to technical drawings than editorial captions.
- No tracking variation in body or navigation text — Neue Haas Grotesk earns its neutrality by being set straight.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The spacing personality is structured and measured — generous at the section level, compact at the component level. The brand's industrial references inform whitespace as much as any aesthetic preference: these are not decorative gaps but functional clearances between elements that need to breathe without drifting. The 48px–64px scale handles inter-section rhythm; component internals stay tight in the 8–20px range.

### Grid & Container
- Max content width: approximately 1440px, with full-bleed photography breaking the container at hero scale
- Product grid: multi-column CSS grid, 3-up on desktop, collapsing to 2-up at tablet and 1-up at mobile
- Navigation: full-width strip, content-padded 20px on each side, 1px bottom border
- Product detail: split layout — photography spanning the majority left, specification and purchase details right

### Whitespace Philosophy
- Photography bleeds to the grid edge — no card padding, no offset white boxes around images
- Section spacing is structural, not decorative: 48px to 64px between major content blocks
- The system avoids large empty zones that would signal luxury distance — this is an accessible industrial brand, not a couture atelier

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, buttons, body elements — the default |
| Hairline (Level 1) | `1px solid {colors.border}` | Navigation bottom border, section dividers, input outlines |
| Panel (Level 2) | Diffuse `{colors.shadow-soft}` | Rare floating panels — navigation mega-menu, dropdowns |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard accessibility — pure black outline |

**Shadow Philosophy**: A-Cold-Wall* runs flat. The interface expresses no hierarchy through shadow or elevation — depth lives entirely in the photography (the material, the concrete, the light on fabric) rather than in UI layering. Not one product card lifts from the page. The cursor change and opacity fade on hover are the only signals that something is interactive. The brand's industrial references inform this: structural elements in architecture are not given fake depth to look "designed." They carry their actual weight.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every structural element — buttons, cards, inputs, image containers, modals |
| `xs` | 2px | Micro controls only — close-icon tap targets in third-party overlays |
| `sm` | 6px | Modal dialogs from the Klaviyo email capture widget — not a native ACW shape choice |
| `pill` | 9999px | Not in active use; reserved token only |

The shape philosophy is unambiguous: A-Cold-Wall* does not round corners. The `6px` that appears in the email modal comes from the Klaviyo widget layer — it is not a design decision made by the brand. The brand's own controls (buttons, navigation, product cards, filters) are uniformly sharp. A 0px radius is the only radius that reads as intentional in this system.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Pure black (`{colors.primary}`) fill, white text, zero radius, 6px/24px padding. 14px Neue Haas Grotesk weight 500, 0.5px tracking. The system's only CTA shape. Used for "Shop now," "Add to bag," checkout actions.
- **`button-secondary`** — White fill with a `{colors.border}` outline. Used for secondary actions (save, filter apply, secondary navigation). On hover, the border sharpens and background shifts to `{colors.surface}`.
- **`button-ghost`** — Transparent fill, white text, white 1px border — reserved for use over full-bleed photography or dark hero surfaces. On hover: white fill, dark text inversion.

### Cards

Product cards carry no structural chrome. Zero radius, zero shadow, zero border. They are photography-first rectangles: the full image above, then product name in `{typography.body}`, colour note and price in `{typography.caption}` below. On hover, image opacity fades to approximately 0.85 — a quiet signal, not a theatrical lift. The label zone below each card uses `{typography.label-caps}` (12px uppercase 500) for category and status annotations — a signature of the brand's CAD-annotation register.

### Inputs

Form inputs use `1px solid {colors.border}` as the default outline, snapping to `1px solid {colors.focus-ring}` on focus. Zero radius. Padding: 10px 16px. Font: `{typography.body}`. The visual signature is a thin black line — the same vocabulary as the navigation divider — not the softened box input common to SaaS systems.

### Badges / Tags

The product label badge uses `{typography.label-caps}`: 12px uppercase Neue Haas Grotesk Medium, minimal padding, no border radius, surface background. Used for "NEW," "SS26," colour-family labels above product names. The uppercase condensed weight feels more like a material specification than a marketing badge.

### Navigation

The full-width navigation strip sits fixed at top, with a single `1px solid {colors.border}` bottom border. Left: the A-COLD-WALL* wordmark. Right: cart, account, search icons. Center: category links in `{typography.nav-link}`. On hover, category links develop a 1px bottom border underline rather than changing colour — interaction feedback expressed entirely in the border vocabulary. On mobile, center links collapse behind a toggle. No mega-menu, no flyout panels.

## Do's and Don'ts

### Do
- Use `{colors.background}` full-bleed as the primary canvas — pure white, no off-white, no grey tints
- Apply `{rounded.none}` (0px) to all structural elements — buttons, cards, inputs, image containers — without exception
- Set all text in Neue Haas Grotesk weight 500; resist dropping to 400 or escalating to 700
- Use `{colors.ink}` as the single CTA fill — there is no accent colour in this system; black is the accent
- Apply `{typography.label-caps}` (12px uppercase 500, +0.5px tracking) for all product category and status labels
- Use negative tracking on display text: `{typography.display-hero}` at −0.5px creates measured compression at 54px
- Treat 1px `{colors.border}` lines as the only structural separator — the same vocabulary in nav, inputs, and dividers
- Let photography carry all visual warmth and texture — the UI chrome should be completely invisible beside it
- Apply the focus ring as `2px solid {colors.focus-ring}` — accessibility expressed in the system's own black vocabulary
- Keep product card hover to opacity fade only — no lift, no shadow, no border appearance

### Don't
- Don't introduce a chromatic accent colour — not teal, not red, not a muted tan. The system is monochrome and that IS the brand.
- Don't add border radius to brand-authored elements — the 6px that appears in the email modal is a widget override, not a design choice
- Don't use weight 700 or 400 in brand interfaces — 500 is the system's only intended weight
- Don't apply drop shadows or elevation to product cards — photography creates all depth
- Don't use pill-shaped buttons — zero radius is the only radius with brand authority in this system
- Don't add gradients to canvas or button fills — solid black and solid white only
- Don't apply hover transitions faster than 0.2s — the brand's pacing is measured, not reactive
- Don't use the label-caps register at body text sizes — 12px uppercase is a micro-annotation voice, not a headline
- Don't add decorative separators between sections — whitespace and photography handle transitions; hairline rules do not
- Don't mix sentence case into label or overline copy — uppercase is the annotation register; mixed case signals body text

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <374px | Single-column grid, navigation collapses, display hero reduces to ~32px |
| Mobile | 374–480px | Single-column, stacked nav, hero at ~36px, full-bleed photography maintained |
| Mobile Mid | 480–600px | Two-column product grid begins, condensed header |
| Tablet | 600–768px | Two to three columns, split product layout starts |
| Tablet Wide | 768–1000px | Three-column grid, full split product detail view |
| Desktop | 1000–1440px | Full multi-column grid, full navigation visible, max-container layout |
| Large Desktop | >1440px | Wide canvas, section padding at maximum, 54px hero at full scale |

### Touch Targets
- Buttons use 6px/24px padding on 14px type — yielding approximately 38–44px tap targets
- Product cards resolve the full photograph as the tap target — naturally oversized by design
- Navigation links reach 44px touch height at mobile via expanded tap area
- Close buttons in modal dialogs are at minimum 32px — the only xs-radius element in the system

### Collapsing Strategy
- Product grid: 3 columns → 2 → 1 at each major breakpoint
- Navigation: full horizontal categories collapse behind icon toggle below 768px; wordmark left-aligns at all widths
- Product detail: side-by-side split (photography | specs) stacks vertically below 768px
- Section padding contracts from `{spacing.3xl}` (64px) to `{spacing.lg}` (24px) at mobile
- Hero headline scales from 54px down to approximately 32px on mobile small, maintaining uppercase register

### Image Behavior
- Product photography is full-bleed in cards — no padding, no border, no border radius
- Hero campaign images maintain a landscape or near-square aspect ratio depending on the seasonal campaign
- Product thumbnails use `object-fit: cover` — subject centering is editorial, not mechanical
- Logo wordmark scales proportionally at all breakpoints; no icon-only fallback

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand accent: `{colors.primary}` (black — same as ink)
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Focus ring: `{colors.focus-ring}`
- Over photography: `{colors.on-dark}`

### Example Component Prompts

- "Build an A-Cold-Wall* product card on white (`{colors.background}`). No border, no shadow, zero radius. Full-bleed product photograph — zero-radius container — occupying the top two-thirds. Below: product name in Neue Haas Grotesk 14px weight 500 (`{typography.body}`), colour option in 12px weight 500 (`{typography.caption}`), price in 14px weight 500. Above the photo: a 12px uppercase Neue Haas Grotesk Medium label tag (`{typography.label-caps}`) — zero radius, `{colors.surface}` background, no border, 2px 0px padding. Hover: image opacity transitions to 0.85 over 0.3s ease. No border appearance on hover."
- "Create a primary A-Cold-Wall* button. Background: `{colors.primary}` (pure black). Text: `{colors.on-primary}` (white). Font: Neue Haas Grotesk 14px weight 500 (`{typography.button-ui}`), 0.5px letter-spacing. Padding: 6px 24px. Radius: `{rounded.none}` (0px). No shadow. Hover: background shifts to `{colors.text-hover}` (#222222) over 0.2s ease."
- "Design an A-Cold-Wall* header navigation on `{colors.background}`. Left: wordmark in `{colors.ink}`, all caps. Center: category links in Neue Haas Grotesk 14px weight 500 (`{typography.nav-link}`), `{colors.ink}`, no decoration. Right: cart, search, account icon glyphs in `{colors.ink}`. Bottom: single 1px solid `{colors.border}` — the only structural edge. Padding: 16px 20px. Link hover: a 1px `{colors.border}` bottom underline appears with 0.2s ease — no colour change, no background shift."
- "Build an A-Cold-Wall* hero section: full-bleed concrete-grey editorial photograph, no scrim, no overlay gradient, zero-radius container. Over it: 54px Neue Haas Grotesk weight 500 headline in `{colors.on-dark}`, −0.5px letter-spacing, line-height 1.0 (`{typography.display-hero}`). Below the headline: a ghost button — transparent fill, 1px `{colors.on-dark}` border, 6px 24px padding, 14px weight 500, 0.5px tracking (`{typography.button-ui}`). No shadow anywhere."
- "Create an A-Cold-Wall* email input for a newsletter zone. Input: `{colors.background}` fill, 1px solid `{colors.border}` outline, zero radius, padding 10px 16px, 14px Neue Haas Grotesk 500 (`{typography.body}`). Placeholder text: `{colors.ink-muted}`. Focus state: border remains `{colors.focus-ring}`, no fill change, `outline: 2px solid {colors.focus-ring}`. Submit button to the right: `{colors.primary}` fill, white text, zero radius, 6px 24px padding, `{typography.button-ui}`. No shadow on either element."
- "Create a category filter label strip for an A-Cold-Wall* product page. Each filter tag: `{colors.surface}` background, no border, zero radius, 3px 8px padding. Label text: 12px uppercase Neue Haas Grotesk weight 500, 0.5px letter-spacing (`{typography.label-caps}`), `{colors.ink-secondary}` colour. Active state: `{colors.ink}` background, `{colors.on-primary}` text — no radius change, no soft transition. Strip is a flat horizontal row with no visible container border."

### Iteration Guide

1. Start with `{colors.background}` as the full canvas — pure white, never cream or off-white. It is a blank construction specification, not a warm lifestyle surface.
2. Use `{colors.ink}` as the single accent for all CTAs, borders, and active states. There is no separate brand colour to reach for. If you are reaching for a hue, step back.
3. Set Neue Haas Grotesk at weight 500 throughout. Drop to 400 only if overriding a third-party widget. Never use 700 in brand-authored components.
4. Apply `{rounded.none}` (0px) to every structural element. Not 2px for friendliness, not 4px for modernity. Zero.
5. Use 1px `{colors.border}` lines as the only structural element — in navigation, inputs, and dividers. One vocabulary, one weight.
6. Let editorial photography carry all visual weight, texture, and temperature. The UI chrome should recede completely.
7. Motion: 0.2s–0.3s ease for state transitions (opacity, border appearance). Nothing faster (reactive) or slower (theatrical). One exception: the display hero may use a 0.5s ease-in-out entry on initial load only.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by A-Cold-Wall*. Brand names and trademarks belong to their respective owners.