# Acne Studios — Marketing site Design Spec

> Source: acnestudios.com (live DOM, computed styles), 2026-07-28. Salesforce
> Commerce Cloud; no `:root` design tokens, palette read from the census.
> Coverage: home (geo-redirects to region; captured at /au/en). 0 sheets blocked.
> `claude-pulse` in the motion census is the Claude-in-Chrome extension (excluded);
> `onetrust-*`, `#32ae88`/`#007701` greens and `#3860be` are third-party widget
> chrome, excluded.
> Reality check: hint ("stark minimal with a signature orange-pink and a bespoke
> logotype") is **half wrong**. Stark minimal ✓. But (1) there is NO orange-pink
> anywhere in the computed styles — that is the packaging/bag colour, absent here;
> the site's one signature accent is a royal **BLUE #0018a8** (`.color--blue`, on
> uppercase utility/editorial labels, hover → #051574). (2) The "bespoke logotype"
> is a full-bleed campaign RASTER image, not a font — the working typeface is
> **Helvetica Now** (Text/Micro/Monospaced), and the whole live type scale sits at
> a single **12/20px, weight 400, +0.3px** — a Byredo-like radical restraint with
> no display type at all.

## 1. Visual Theme & Atmosphere

Radical editorial restraint. The site is black-on-white with a single royal-blue
accent, every scrap of live text set in Helvetica Now at one size — 12px — so the
whole page reads as a quiet caption layer floating over full-bleed campaign
photography. The recognisable "Acne Studios" wordmark is a raster overlaid across
the imagery, not type you can select. Structure is 1px hairlines and near-square
corners; there are no shadows on content, no gradients except loading skeletons,
and colour is rationed to one blue (#0018a8) on utility and editorial links.
Feels: austere, editorial, fashion-serious, confident.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | primary text, nav, borders (791×) |
| grey | #6b6b6b | secondary text |
| grey-2 | #555555 | tertiary text |
| border-grey | #6f6f6f | 1px control borders |
| accent-blue | #0018a8 | utility/editorial links, `.color--blue` labels |
| accent-blue-dark | #051574 | link :hover |
| visited | #500550 | visited-link state (opt-in) |
| focus-tint | #e8f0fe | input :focus background |
| surface | #f7f7f7 | skeleton stripe / panel |
| surface-2 | #f2f2f2 | hairline fill / skeleton |
| surface-3 | #e8e8e8 | soft grey block |
| canvas | #ffffff | page background |

Rules: the chrome is monochrome black-on-white; the ONE chromatic value is blue
#0018a8 (never orange-pink), reserved for interactive/editorial labels and
darkening to #051574 on hover. Greys are text/hairlines only.

## 3. Typography Rules

One family: **Helvetica Now** — Text (body/labels), Micro (small UI),
Monospaced Pro (utility). Specimen stand-in: the **system Helvetica stack**
(Helvetica Neue, Arial) — the site ships licensed Helvetica Now; note the swap.
The giant "Acne Studios" wordmark is a campaign raster, not a webfont.

| Role | Family | Size/Line | Weight | Tracking / case |
|---|---|---|---|---|
| Wordmark | (raster image) | full-bleed | — | bespoke logotype, N/A live |
| Heading h1/h2 | Helvetica Now Text | 12/20px | 400 | +0.3px, some UPPER |
| Body / UI | Helvetica Now Text | 12/20px | 400 | +0.3px |
| Link (blue) | Helvetica Now Text | 12/20px | 400 | +0.3px, #0018a8 |
| Micro label | Helvetica Now Micro | ~11/16px | 400 | +0.3px UPPER |
| Mono | Helvetica Monospaced Pro | 12px | 400 | +0.3px |

Patterns: the ENTIRE live scale is 12/20 at weight 400 — no display sizes, no
bold. Hierarchy comes from position, uppercase and the campaign raster, not size
or weight. Tracking is a constant +0.3px. Nav and labels are UPPERCASE.

## 4. Component Stylings

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Nav / label link | transparent, #000, 0px radius, uppercase, 12/20 +0.3px | underline via `inset 0 -1px 0 #000` | — | — | — |
| Utility link (blue) | #0018a8, 0px radius | color → #051574 | — | — | — |
| Email input | transparent, 1px border, ~square | border → #000 | border #000, bg #e8f0fe, `outline:none` (anti-pattern) | — | opacity 0.5 |
| Primary CTA (checkout) | #000 fill, #fff text, near-square | (darkens) | — | — | opacity 0.5 |

Links reveal an underline via an **inset bottom box-shadow** (`inset 0 -1px 0
#000`), not text-decoration. Input focus removes the outline but darkens the
border to black and tints the field #e8f0fe — recommend restoring
`outline:2px solid #0018a8; outline-offset:2px`.

## 5. Layout Principles

Edge-to-edge: a thin white top nav (uppercase Helvetica Now, left categories /
right utilities) over full-bleed split campaign panels (Shop Woman | Shop Man)
with tiny uppercase corner labels. No max-width container on the hero — imagery
bleeds to the viewport. Content sits on a fine hairline grid; the campaign
wordmark spans both panels as a raster.

## 6. Depth & Elevation

Near-SQUARE: dominant radius 2px, with rare 3px/17px/20px/50px one-offs — most
elements are 0px. **No content shadows** — the recorded shadows are a link
underline (`inset 0 -1px 0 #000`), a modal overlay (`rgba(0,0,0,.2) 0 0 18px`)
and third-party product-card glows. Structure is 1px borders: #000000 (10×),
#f2f2f2 (7×), #6f6f6f (3×), plus a 293× transparent-1px placeholder. Elevation
is refused; borders + whitespace do all the work.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.15s | ease-in | hover chrome |
| all | 0.25s | ease-out | menu reveals |
| opacity | 0.5s | ease-in-out | image fades |
| padding-bottom | 0.15s | ease | underline expand |

No animation library. Keyframes include `marqueeText` (ticker), `blink`,
`shimmer`/`moveBackground`/`checkoutShimmer` (loading skeletons),
`textBlink`/`backgroundTileBlink`/`cycleDisplay`. Notably uses **stepped
easings** — `steps(1)`, `steps(2)`, `step-start`, `step-end` — for the blink/tile
effects, alongside `cubic-bezier(0,0,0.2,1)`. Ships **1 `prefers-reduced-motion`
block**. Nothing decorative animates at rest beyond skeleton loaders.

## 8. Backgrounds, Effects & WebGL

Flat and photographic: **no decorative gradients** (the only gradients are
skeleton-loader `repeating-linear-gradient` stripes in #f7f7f7/#f2f2f2 and a 1px
underline gradient), no backdrop-filter, no canvas/WebGL, no grain, 0 background
raster layers (hero images are `<img>`, not backgrounds), 0 videos on load.
Atmosphere is entirely full-bleed campaign photography.

## 9. Do's and Don'ts

### Do
- Keep it black-on-white; use blue #0018a8 as the ONE accent (hover #051574).
- Set everything in Helvetica Now at 12/20, weight 400, +0.3px tracking.
- Build hierarchy from position, uppercase and campaign imagery — not size/weight.
- Reveal link underlines with an inset bottom box-shadow.
- Keep corners near-square (0–2px) and separate with 1px hairlines.

### Don't
- Don't use orange-pink in the chrome — that is packaging, absent from the site.
- Don't add display type, bold weights, or a size above ~12px for live text.
- Don't add drop shadows to content.
- Don't strip focus (the input does `outline:none` — add a ring instead).

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| ≤767 | mobile: nav → menu, split panels stack |
| min 768 / min 992 | tablet → desktop split |
| min 1280 / 1440 | wide campaign layout |

Device-targeted ladder (360/375/400/425/500/530/576/600/767/768/896/991/992/
1280/1440, ~22 seams). 0 `prefers-color-scheme: dark` blocks, 0 container
queries, 1 reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#000000` · Muted `#6b6b6b` · Border `#6f6f6f`/`#f2f2f2` · Accent `#0018a8` (hover `#051574`)
- Font: Helvetica Now (system Helvetica stand-in) · Everything 12/20px 400 +0.3px · Radius 0–2px (near-square) · Borders 1px
- Focus: none shipped — recommend `outline:2px solid #0018a8; offset 2px` · Link hover: `#051574` · Underline: `inset 0 -1px 0 #000`

<acne-studios-marketing_design_language>
Austere fashion-editorial storefront: black #000000 on white with ONE royal-blue
accent #0018a8 (hover #051574) reserved for utility and editorial links — no
orange-pink anywhere (that is packaging, not the site). Every scrap of live text
is Helvetica Now (system-Helvetica stand-in) at a single 12/20px, weight 400,
+0.3px tracking, some UPPERCASE — a radical no-display-type restraint where
hierarchy comes from position, case and full-bleed campaign photography (the
giant "Acne Studios" wordmark is a raster, not a font). Corners are near-square
(0–2px), structure is 1px hairlines (#000000, #f2f2f2, #6f6f6f), and there are no
content shadows — links reveal an underline via an inset bottom box-shadow
(inset 0 -1px 0 #000). Input focus darkens the border to black and tints the
field #e8f0fe. Motion is short (all 0.15–0.25s) with stepped easings for
blink/marquee loaders; ships one reduced-motion block. Feels: austere, editorial,
fashion-serious. Avoid: orange-pink in the chrome, any display type or bold
weight, live text above ~12px, drop shadows, and stripped focus rings.
</acne-studios-marketing_design_language>