---
name: A-COLD-WALL*
description: "Worth including as a prime example of a brutalist, premium fashion e-commerce aesthetic with extreme restraint."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#2B2B2B"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  display-sm:
    fontFamily: grotesque-sans
    fontSize: 26px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.16
    fontWeight: 500
    letterSpacing: "0px"
  body-lg:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

Industrial-brutalist luxury fashion e-commerce

*Concrete architecture meets high fashion*

## Colors

High contrast monochrome with image-driven accents

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#2B2B2B`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- 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

## Layout

Full-bleed hero imagery with minimal UI overlay

*Rhythm:* Consistent with tight spacing reflecting industrial brutalist aesthetic

## Elevation & Depth

- rgba(0, 0, 0, 0.3) 0px 0px 24px 0px
- Borders: 0px solid transparent — minimal use of visible borders

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Simple uppercase text buttons with no background or border, hover state only
- **card:** Product cards with full-bleed imagery and minimal text overlay
- **chip:** N/A — chips are not a primary component in this design
- **input:** Minimal text inputs with bottom-border only style
- **hero:** Full-viewport cinematic photography with large, left-aligned typography

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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