# Acne Studios · Design system migration spec

> Source: https://www.acnestudios.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

The system operates like a monochromatic gallery, where the architecture recedes to let the garments be the only source of visual variance. It is a study in restraint, defined by massive scale and a clinical precision that feels both Scandinavian and avant-garde.

**One-liner:** Minimalist high-fashion retail defined by massive scale, monochrome palette, and clinical photography.
**Keywords:** minimalist · avant-garde · scandinavian · high-fashion · clean
**Analogy:** A monochromatic gallery where the clothes are the only color.

## 2. Color

The palette is a strict binary of pure black and soft off-white, creating a neutral backdrop that pushes product imagery to the forefront. There is no decorative color; the entire environment is engineered to serve the editorial photograph.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#6B6B6B` | secondary text |
| `--muted` | `#6B6B6B` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strictly monochrome with the product providing the only visual variance.

This chromatic discipline ensures the product is the sole narrative variable.

## 3. Typography

Typography is treated as a functional grid, not a voice, employing a binary scale of massive grotesque-sans overlays and tiny, uppercase humanist-sans labels. The rules are simple: uppercase is standard, letter-spacing is tight, and the typeface exists solely to frame the imagery.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 500 | -2px | Hero brand name overlay |
| caption | 12px | 1.0 | 400 | 0.3px | Global navigation and labels |

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

## 4. Spacing

Micro-spacing follows a tight, consistent 4px base scale, while macro-spacing is dictated by the massive, full-bleed imagery.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A tight, consistent 4px base scale is used for micro-spacing, while macro-spacing is dictated by the massive imagery.

## 5. Surfaces

Surfaces are defined by sharp edges and flat, inset shadows, avoiding any suggestion of soft depth. Borders are used surgically—only 1px solid black for interactive elements—leaving the default state entirely borderless.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - 0px 1px 0px 0px rgb(242, 242, 242) inset
- **Borders:** 1px solid black for interactive elements, otherwise borderless.

## 6. Layout

The structural skeleton is a borderless, fluid grid that favors full-bleed editorial imagery over any traditional container logic. This creates a layout where photography defines the architecture, and the UI is the negative space around it.

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

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

## 7. Motion & Interaction

Motion is restrained and purposeful, focusing on smooth page-state changes and fast, functional transitions for menus and image swaps. Animations are not decorative; they are the brief, clean mechanical shifts of a gallery lighting system.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover
  - Full-bleed image swaps

- **Hover:** Subtle opacity reduction or color inversion on text links.
- **Click:** Immediate transition without heavy tactile feedback.
- **Transition:** Smooth, fast transitions for menu reveals and page states.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is direct, detached, and authoritative, matching the stark visual environment. Headlines are massive, heavy overlays, while calls to action are small, uppercase, and highly tracked utility text.

- **Tone:** Direct, detached, and authoritative.
- **Headline style:** Massive, heavy grotesque sans-serif overlays.
- **CTA style:** Small, uppercase, highly tracked utility text.
- **Avoid:** Soft curves or decorative elements / Warm color palettes / Excessive padding or breathing room / Descriptive or marketing-heavy copy

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

The system deliberately avoids soft curves, warm palettes, excessive padding, and all descriptive or marketing-heavy copy.

## System Prompt (paste into AI tool)

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