---
version: alpha
name: Acne Studios
description: "A fashion magazine laid flat on white — photography does the talking, the interface nearly disappears."
colors:
  on-surface-variant: "#6b6b6b"
  on-surface: "#000000"
  surface: "#ffffff"
  outline: "#f2f2f2"
  primary: "#0018a8"
  cloud-grey: "#f7f7f7"
typography:
  micro:
    fontFamily: Helvetica Now Text
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.033em
  body-ui:
    fontFamily: Helvetica Now Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.033em
  input:
    fontFamily: Helvetica Now Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  display:
    fontFamily: Acne Studios wordmark
    fontSize: 120px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  buttons: 0px
  inputs: 0px
  cards-images: 0px
  micro-elements: 2px
spacing:
  "4": 4px
  "9": 9px
  "10": 10px
  "11": 11px
  "18": 18px
  "19": 19px
  "20": 20px
  "30": 30px
  "60": 60px
---
# Acne Studios — Style Reference
> A fashion magazine laid flat on white — photography does the talking, the interface nearly disappears.

**Theme:** light

Acne Studios runs its storefront like a printed lookbook: an unbroken white ground, full-bleed editorial photography, and almost no interface chrome. The homepage is a 50/50 split hero with the custom "Acne Studios" wordmark set in heavy black across the seam — no CTA button, no overlay, no gradient. Everything functional is Helvetica Now, rendered small (12px), and the palette is ruthlessly neutral: black ink on white paper, two barely-there greys, and one electric cobalt reserved strictly for links and interactive states. There are no card surfaces, no rounded containers, and effectively no shadows — separation is done entirely with whitespace and 0px-radius hard edges, so adjacent product images butt together into a continuous editorial spread. Restraint is the whole system: the chrome recedes so the imagery can occupy the frame.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#000000` | `--color-ink-black` | Primary text, the wordmark, nav labels, icon strokes, footer copy. Runs at 21:1 on white for absolute legibility; also a full-bleed hero/background ground when a panel goes dark |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nav-bar surface, product backgrounds. The dominant ground that lets photography breathe |
| Cloud Grey | `#f7f7f7` | `--color-cloud-grey` | Search-field / input fill and quiet hover surface. The only tinted surface the system reaches for, and rarely |
| Hairline | `#f2f2f2` | `--color-hairline` | 1px hairline borders and the faint inset shadow tint on overlays. Used minimally — the system prefers space to lines |
| Graphite | `#6b6b6b` | `--color-graphite` | Muted secondary text: helper copy, placeholders, deemphasized labels. Never for primary content |
| Electric Cobalt | `#0018a8` | `--color-electric-cobalt` | The single accent — text links, active nav states, and inline interactive text. Never a filled button, never decorative; strictly a functional interactive signal |

## Tokens — Typography

### Helvetica Now Text — the functional workhorse for all UI and body copy · `--font-helvetica-now-text`
- **Substitute:** Helvetica Neue, Inter, Arial
- **Weights:** 400
- **Sizes:** 12px (nav, labels, captions, buttons); 18px (search / input fields)
- **Line height:** 1.15–1.4
- **Letter spacing:** ~0.033em on small uppercase labels; near-0 at larger sizes
- **Role:** Every functional string — nav links, section labels, product captions, footer. Small-uppercase labels with generous tracking are the single most recognizable non-photographic mark on the site.

### Helvetica Now Micro — the tiny-text cut for the smallest labels · `--font-helvetica-now-micro`
- **Substitute:** Helvetica Now Text, Helvetica Neue
- **Weights:** 400
- **Sizes:** 9px micro labels
- **Line height:** ~1.15
- **Letter spacing:** ~0.033em
- **Role:** Optically-corrected companion cut used where text drops to ~9px (legal, micro-captions) so hairline strokes stay legible.

### Helvetica Monospaced Pro — technical / tabular monospace · `--font-helvetica-mono-pro`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo, monospace
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** ~1.15
- **Letter spacing:** 0
- **Role:** Monospaced cut for technical strings — order numbers, sizes, codes — where character alignment matters.

### Acne Studios wordmark (custom display) — oversized brand mark on the hero · `--font-acne-wordmark`
- **Substitute:** GT Walsheim or Manrope at matching optical size and weight *(the true face is proprietary)*
- **Weights:** 400–500
- **Sizes:** display, ~120px+ *(inferred — not measured in scan)*
- **Line height:** 1
- **Letter spacing:** tight, 0 to −0.02em at display
- **Role:** The oversized black "Acne Studios" wordmark centered across the split hero, overlapping both photographs. A wide-aperture geometric sans with humanist terminals; no system font replicates it.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| micro | 9px | 1.15 | 0.033em | `--text-micro` *(from curated)* |
| body / UI | 12px | 1.2 | 0.033em (uppercase) | `--text-body` |
| input | 18px | 1.3 | 0 | `--text-input` |
| display (wordmark) | ~120px | 1 | −0.02em | `--text-display` *(inferred)* |

## Tokens — Spacing & Shapes

**Base unit:** ~10px (measured paddings cluster on 9/10/11/18/19/20)   **Density:** compact

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 18 | 18px | `--spacing-18` |
| 19 | 19px | `--spacing-19` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 60 | 60px | `--spacing-60` |

### Border Radius
| Element | Value |
|---------|-------|
| buttons | 0px |
| inputs | 0px |
| cards / images | 0px |
| micro elements (e.g. small chips/toggles) | 2px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Hairline inset | `inset 0 1px 0 #f2f2f2, inset 0 -1px 0 #f2f2f2` | `--shadow-hairline` |
| Bottom rule inset | `inset 0 -1px 0 #000000` | `--shadow-underline` |
| Dropdown float | `0 0 18px rgba(0,0,0,0.2)` | `--shadow-dropdown` |

### Layout
- **Page max-width:** none — full-bleed to the viewport edge
- **Section gap:** 60px
- **Card padding:** 0px
- **Element gap:** 10px

## Components

### Top Navigation Bar
**Role:** Minimal text-only site header
Full-bleed white bar. Left cluster: WOMAN, MAN, DENIM, BAGS, SALE % at 12px uppercase, ~0.033em tracking, #000000. Right cluster: SEARCH, HELP, ACCOUNT, and a cart icon with a 2-digit counter (00) at the same spec. No background fill, no border, no shadow.

### Section Label
**Role:** Category indicator over each half of the split hero
Tiny uppercase label (SHOP WOMAN, SHOP MAN) at ~10–12px, 0.033em tracking, #000000, sitting top-left of its panel and acting as a text link. ~10px inset from the panel edge.

### Full-Bleed Split Hero
**Role:** Primary landing visual
Two equal-width editorial photographs spanning the full viewport with 0px gap. The custom Acne Studios wordmark in heavy black sits centered across the seam, overlapping both images. No overlay, no gradient, no CTA — the wordmark and the photographs carry the whole frame.

### Product Grid Cell
**Role:** Individual product listing in the category grid
Full-bleed product photograph, 0px radius, no border, no background. Caption above the image: category name at ~10–12px uppercase, 0.033em tracking, #000000. No price chip, no quick-add, no badge. Cells butt against neighbors at 0px gutter to read as one seamless spread.

### Editorial Tile Row
**Role:** Brand-storytelling strip beneath the product grid
A single row of equal-width tiles, each a full-bleed photograph (packaging, storefront, lookbook, architecture). No captions, no borders, no chrome — a mood board rather than navigation.

### Text Link
**Role:** Inline interactive link in body and nav
Inherits body size (12px), colored #0018a8 with no default underline; 1px underline appears on hover. No pill, no background, no border.

### Search / Input Field
**Role:** Search box and form inputs
Filled #f7f7f7 background, #f7f7f7 1px border (borderless read), 0px radius, ~19px×10px padding, 18px Helvetica Now Text, #000000 text with #6b6b6b placeholder. No focus ring beyond a subtle inset rule.

### Icon Button
**Role:** Search, help, account, and cart triggers
12px uppercase label with 0.033em tracking; the cart carries a 2-digit counter at the same size. Icons are 1px stroke, #000000, no fill and no container.

### Ghost / Text Button
**Role:** Low-emphasis actions
No fill and no radius; #000000 (or #0018a8 for interactive) 12px label, ~4px 9px padding. Emphasis comes from position and whitespace, not from a filled shape.

### Dropdown / Overlay Menu
**Role:** Expanded nav and account panels
White surface floating over content with a soft `0 0 18px rgba(0,0,0,0.2)` shadow — the one place the system permits real elevation, so the menu reads as lifted above the photography beneath it.

## Do's and Don'ts

### Do
- Reserve #0018a8 exclusively for text links, active nav states, and inline interactive text — never a filled button
- Set nav and label text to 12px (or 9px micro) uppercase with ~0.033em tracking for the signature editorial voice
- Let product and editorial images span full width at 0px gutter so cells bleed into one continuous spread
- Default every surface to #ffffff; reach for #f7f7f7 only for input fills and quiet hovers
- Keep buttons, inputs, cards, and images at 0px radius — hard edges are what make it read as a printed page
- Use #000000 at 21:1 for primary text; hold #6b6b6b to genuinely secondary copy and placeholders
- Reserve real elevation for overlays only — the `0 0 18px rgba(0,0,0,0.2)` dropdown shadow

### Don't
- Do not introduce filled CTA buttons, pill shapes, or rounded containers — they break the editorial-flat aesthetic
- Do not drop box-shadows on product cards, nav, or tiles; in-flow separation comes from whitespace alone
- Do not add colors outside this palette for interface chrome — photography supplies all the chromatic richness
- Do not set body text below 9px, and keep nav-adjacent labels uppercase with tracking
- Do not constrain layouts to a max-width or center body content — full-bleed is the point
- Do not put borders, dividers, or fills between product cells — they must touch and bleed
- Do not use #0018a8 as a decorative or illustration color; it is a functional interactive signal only

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper White | `#ffffff` | Page canvas and the dominant background across every section |
| 1 | Cloud Grey | `#f7f7f7` | Input fills and quiet hover surfaces — the only tinted surface used |
| — | Hairline | `#f2f2f2` | Near-imperceptible border / inset-shadow tint on overlays |

## Elevation

The in-flow system avoids elevation entirely — whitespace, not depth, separates elements, and product/editorial content sits perfectly flat. The single exception is floating overlays (dropdown and account menus), which use a soft `0 0 18px rgba(0,0,0,0.2)` shadow to lift above the photography. Hairline `#f2f2f2` insets and a `#000000` bottom-rule inset are used sparingly to mark active or bounded fields, not to imply layers.

## Imagery

Photography is the product. Full-bleed editorial fashion shots dominate: models in avant-garde styling against neutral studio backdrops (grey seamless, muted interiors), shot with rich, warm, slightly cinematic color. E-commerce product shots sit on pure white with zero lifestyle context. Every image is rectangular with sharp 0px corners — no masking, no rounded crops, no overlap beyond the wordmark. Imagery occupies roughly 90% of the visible frame; the interface is the thin black-on-white margin around it. Note: the SALE % label may render as a red tag in some states, but that red belongs to merchandising, not the frozen interface palette.

## Layout

Full-bleed, edge-to-edge, no max-width. The homepage rhythm: (1) a text-only sticky top nav, (2) a 50/50 full-viewport split hero with the wordmark overlaid across the seam, (3) a multi-column product grid at 0px gutters, (4) an editorial tile row at 0px gutters. Sections stack vertically on a consistent 60px gap. The grid is always even — no masonry, no asymmetry. Navigation is a single minimal top bar (expanding to a soft-shadowed dropdown), never a sidebar. It reads left-to-right, top-to-bottom like a printed magazine spread.

## Typography Signature

Two registers, one family. The **display register** is a single custom wordmark — the black "Acne Studios" set enormous and tight across the hero, doing the work most sites hand to a headline system. The **functional register** is Helvetica Now at a resolutely small 12px (dropping to a 9px Micro cut, rising to 18px only inside search), almost always uppercase with ~0.033em tracking. That tiny-tracked-caps treatment is the site's fingerprint: it signals "editorial catalog," keeps the chrome quiet, and lets the oversized wordmark and full-bleed photography own all the visual scale. Monospaced Pro handles codes and sizes where alignment matters. The move that makes it work is the extreme scale gap — display-huge against label-tiny with nothing in between.

## Agent Prompt Guide

## Quick Color Reference
- background: #ffffff
- text: #000000
- surface: #f7f7f7
- border: #f2f2f2
- muted text: #6b6b6b
- accent: #0018a8
- primary action: no distinct CTA color (use black or cobalt text, never a filled button)

## Example Component Prompts
1. **Top Nav Bar**: Full-width white bar. Left-aligned links (WOMAN, MAN, DENIM, BAGS, SALE %) at 12px uppercase Helvetica Now Text, letter-spacing 0.033em, #000000. Right-aligned SEARCH, HELP, ACCOUNT and a cart icon with a 2-digit counter at the same spec. No background fill, no border, no shadow; sticky to top.
2. **Full-Bleed Split Hero**: Two equal-width editorial photos spanning 100vw with 0px gap. Centered across the seam, an oversized black wordmark (~120px, weight 500, letter-spacing −0.02em) overlapping both images. No overlay, no gradient, no button.
3. **Product Grid Cell**: Full-bleed photograph, 0px radius, no border/background. Caption above the image: category name at 12px uppercase, 0.033em tracking, #000000. No price, no button. Cells at 0px gutter in an even multi-column row.
4. **Search Field**: #f7f7f7 fill, 1px #f7f7f7 border, 0px radius, 19px×10px padding, 18px Helvetica Now Text, #000000 text with #6b6b6b placeholder. No focus ring beyond a subtle inset rule.
5. **Text Link**: Inline at 12px, color #0018a8, no default underline; 1px underline on hover. No background, no padding, no border.

## Similar Brands
- **SSENSE** — Same editorial-fashion e-commerce language: full-bleed photography, minimal chrome, tracked-out uppercase nav, white-dominant canvas.
- **COS** — Identical restraint philosophy: large whitespace, flat product photography, no decorative elevation, near-monochrome interface.
- **Lemaire** — Shared art direction: tiny uppercase labels, 0px-radius crops, no card containers, editorial tile grids beneath the listings.
- **The Row** — Same digital-magazine-as-storefront structure: full-viewport hero splits, even product grids, and a near-total absence of conventional e-commerce affordances.
- **Jil Sander** — Kindred minimalist-luxury voice: black-on-white type, extreme whitespace, and a single restrained accent.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-cloud-grey: #f7f7f7;
  --color-hairline: #f2f2f2;
  --color-graphite: #6b6b6b;
  --color-electric-cobalt: #0018a8;

  /* Typography — Families */
  --font-helvetica-now-text: 'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-helvetica-now-micro: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  --font-helvetica-mono-pro: 'Helvetica Monospaced Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-acne-wordmark: 'Acne Studios', 'GT Walsheim', Manrope, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-micro: 9px;
  --text-body: 12px;
  --text-input: 18px;
  --text-display: 120px;
  --leading-tight: 1.15;
  --leading-body: 1.2;
  --leading-display: 1;
  --tracking-label: 0.033em;
  --tracking-display: -0.02em;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-18: 18px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-60: 60px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;

  /* Shadows */
  --shadow-hairline: inset 0 1px 0 #f2f2f2, inset 0 -1px 0 #f2f2f2;
  --shadow-underline: inset 0 -1px 0 #000000;
  --shadow-dropdown: 0 0 18px rgba(0, 0, 0, 0.2);

  /* Layout */
  --section-gap: 60px;
  --card-padding: 0px;
  --element-gap: 10px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-cloud-grey: #f7f7f7;
  --color-hairline: #f2f2f2;
  --color-graphite: #6b6b6b;
  --color-electric-cobalt: #0018a8;

  /* Typography — Families */
  --font-helvetica-now-text: 'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-helvetica-now-micro: 'Helvetica Now Micro', 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  --font-helvetica-mono-pro: 'Helvetica Monospaced Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-acne-wordmark: 'Acne Studios', 'GT Walsheim', Manrope, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-micro: 9px;
  --text-body: 12px;
  --text-input: 18px;
  --text-display: 120px;
  --leading-tight: 1.15;
  --leading-body: 1.2;
  --leading-display: 1;
  --tracking-label: 0.033em;
  --tracking-display: -0.02em;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-18: 18px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-60: 60px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;

  /* Shadows */
  --shadow-dropdown: 0 0 18px rgba(0, 0, 0, 0.2);
}
```