---
name: Acne Studios
description: "This site is a definitive example of high-fashion minimalism, demonstrating how extreme typographic scale and a restricted palette can create a powerful brand identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#6B6B6B"
  neutral: "#6B6B6B"
  bg-soft: "#F7F7F7"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 120px
    lineHeight: 0.9
    fontWeight: 500
    letterSpacing: "-2px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.3px"

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

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

---

## Overview

Minimalist high-fashion retail defined by massive scale, monochrome palette, and clinical photography.

*A monochromatic gallery where the clothes are the only color.*

## Colors

Strictly monochrome with the product providing the only visual variance.

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

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Uppercase transformation is standard for all navigation and category labels.
- Tight letter-spacing is applied to both massive display text and small utility text.
- Typography is purely functional, serving as a neutral grid for the imagery.

## Layout

A borderless, fluid grid that favors full-bleed editorial imagery over structured containers.

*Rhythm:* A tight, consistent 4px base scale is used for micro-spacing, while macro-spacing is dictated by the massive imagery.

## Elevation & Depth

- 0px 1px 0px 0px rgb(242, 242, 242) inset
- Borders: 1px solid black for interactive elements, otherwise borderless.

## Shapes

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

## Components

- **button:** Borderless text links or minimal boxes defined only by 1px borders and tight padding.
- **card:** Borderless image containers with minimal text labels floating above.
- **chip:** N/A
- **input:** Minimal underline or bordered text fields with tight padding.
- **hero:** Full-bleed, high-resolution photography with massive typographic overlays.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners or soft shadows — screenshot shows sharp edges and flat, inset shadows.
- Don't use a vibrant or diverse color palette — screenshot shows strictly monochrome elements.
- Don't use medium-sized headings — screenshot shows a binary scale of massive display or tiny captions.
- Don't use sentence-case navigation — screenshot shows all text in uppercase.
- Don't use decorative serif or script fonts — screenshot shows purely functional grotesque and monospace fonts.
- Don't center-align all text — screenshot shows a strict left-aligned grid for navigation and labels.

---

## System Prompt (paste into AI agent)

```
This is a premium fashion e-commerce site for Acne Studios. It features a stark, monochromatic palette of black (#000000) and off-white (#F7F7F7). The typography is strictly utilitarian, using grotesque-sans for massive hero overlays and humanist-sans (Helvetica Now) for tiny, uppercase navigation labels. The layout is borderless and full-bleed, letting editorial photography dominate. Critical donts: Never use rounded corners; avoid sentence-case text; do not use medium font sizes; keep the palette strictly black and white. Use this for high-fashion, editorial, and minimalist luxury UI patterns.
```