Acne Studios design specConsumer

A fashion house storefront of radical editorial restraint, and the entry that breaks the library’s achromatic-luxury cluster not with the expected orange-pink but with a royal BLUE. There is no orange-pink anywhere in the computed styles — that famous salmon is packaging and shopping-bag colour, entirely absent from the site — and the one chromatic value is Acne blue #0018a8, applied through a .color--blue class to uppercase utility and editorial labels (free shipping, Acne Paper) and darkening to #051574 on hover, with an opt-in #500550 for visited links. The second correction to the brief: the giant “Acne Studios” wordmark spanning the split campaign hero is a full-bleed RASTER image, not a font, and the working typeface is Helvetica Now (Text, Micro and Monospaced Pro). The most distinctive move is a Byredo-like refusal of scale: the ENTIRE live type system sits at a single 12px on 20px line, weight 400, with a constant +0.3px tracking and selective uppercase, so hierarchy is built from position, case and full-bleed campaign photography rather than size or weight — there is no display type on the page at all. Corners are near-square (a 2px dominant with most elements at 0px), structure is carried by 1px hairlines (#000000, #f2f2f2, #6f6f6f) with a 293-use transparent 1px placeholder, and there are no content shadows whatsoever: links reveal an underline through an inset bottom box-shadow (inset 0 -1px 0 #000), and the only recorded shadows are that underline and a modal overlay. Motion is short (all 0.15 to 0.25s) and unusually uses STEPPED easings — steps(1), steps(2), step-start, step-end — for blink, marquee-ticker and tile loaders, backed by one reduced-motion block; there are no decorative gradients, only skeleton-loader stripes.

⚠ site only

Browse Acne Studios in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

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.

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.

Color Palette & Roles

TokenHexRole / usage
ink#000000primary text, nav, borders (791×)
grey#6b6b6bsecondary text
grey-2#555555tertiary text
border-grey#6f6f6f1px control borders
accent-blue#0018a8utility/editorial links, .color--blue labels
accent-blue-dark#051574link :hover
visited#500550visited-link state (opt-in)
focus-tint#e8f0feinput :focus background
surface#f7f7f7skeleton stripe / panel
surface-2#f2f2f2hairline fill / skeleton
surface-3#e8e8e8soft grey block
canvas#ffffffpage 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.

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.

RoleFamilySize/LineWeightTracking / case
Wordmark(raster image)full-bleedbespoke logotype, N/A live
Heading h1/h2Helvetica Now Text12/20px400+0.3px, some UPPER
Body / UIHelvetica Now Text12/20px400+0.3px
Link (blue)Helvetica Now Text12/20px400+0.3px, #0018a8
Micro labelHelvetica Now Micro~11/16px400+0.3px UPPER
MonoHelvetica Monospaced Pro12px400+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.

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.