Electric Cobalt
#0018a8Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Acne Studios
acnestudios.comWebsite preview
The design language
Acne Studios operates as a digital fashion magazine rather than a conventional storefront: white canvas, full-bleed editorial photography, and almost no UI chrome. The entire page reads as curated art-direction — product images sit edge-to-edge in tight grids, and the only typographic punctuation is tiny uppercase labels with generous letter-spacing. The signature electric cobalt (#0018a8) is used sparingly on links and interactive accents, never as a filled button, letting the photography own attention. Components are deliberately weightless: no shadows, no card surfaces, no rounded containers, no decorative borders. Space between elements does the structural work that elevation does elsewhere.
Color palette
brand
neutral
Ink Black
#000000Primary text, logo wordmark, icon strokes, nav labels, and footer copy. Used at 21:1 contrast on white for absolute legibility
Graphite
#6b6b6bSupporting neutral for secondary UI, dividers, and muted labels.
Paper White
#ffffffPage canvas, product card backgrounds, and nav bar surface. The dominant ground that lets editorial photography breathe
Bone
#f2f2f2Subtle box-shadow tint and hairline border for elevated overlays. Used minimally — the system prefers whitespace to tinted surfaces
Typography
Type scale
Minor Second (1.067) · 12px basedisplay
120px · 1 · -1.2px trackingThe quick brown fox jumps
text-18
18px · 400 · 1.11The quick brown fox jumps
text-12
12px · 400 · 1.67The quick brown fox jumps
text-9
9px · 400 · 1.15The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica Monospaced Pro
- Weights
- 400
- Sizes
- 9px
- Line height
- 1.15
- Letter spacing
- 0.033
Helvetica Monospaced Pro — detected in extracted data but not described by AI
Additional typeface
Acne Studios (custom wordmark)
- Weights
- 400-500
- Letter spacing
- tight (0 to -0.02em at display)
- Fallback
- GT Walsheim or Manrope at matching optical size and weight
Oversized brand wordmark overlaid on hero photography. The custom face has geometric construction with humanist terminals; no system font replicates it, but its character is closest to a wide-aperture geometric sans.
Additional typeface
Helvetica Neue / system sans
- Weights
- 400
- Line height
- 1.15-1.4
- Letter spacing
- 0.0330em across small sizes; 0.02em on slightly larger
- Fallback
- Helvetica or Inter
All functional UI text: nav links, section labels, product captions, footer. Always rendered uppercase with generous tracking — this typographic treatment is the single most recognizable non-photographic element on the site.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Section gap
- 60px
- Card padding
- 0px
- Element gap
- 10px
Border radius
tags
0pxcards
0pximages
0pxbuttons
0pxSpacing scale
2px4px9px10px11px18px19px20px30px60pxGuidelines
Do
- Use #0018a8 only for text links, active nav states, and icon strokes — never as a filled button background
- Set body and nav text to 10-11px uppercase with 0.0330em letter-spacing for the signature editorial voice
- Let product and editorial images span full viewport width with 0px gap between adjacent cells
- Default page background to #ffffff and avoid any tinted surface unless absolutely necessary
- Keep card and image radius at 0px — the system uses hard edges to read as printed magazine spreads
- Use #000000 at 21:1 contrast for all primary text on white; reserve #6b6b6b for genuinely secondary copy
- Maintain 60px vertical section gaps and 30px nav padding as the structural rhythm
Don’t
- Do not introduce filled CTA buttons, pill shapes, or rounded containers — they break the editorial-flat aesthetic
- Do not apply box-shadow to product cards, nav, or content tiles; separation comes from whitespace alone
- Do not use colors outside the five-token palette for interface chrome — photography supplies all chromatic richness
- Do not set type below 9px or render body text in anything other than uppercase with tracking for nav-adjacent labels
- Do not center body content or constrain to a max-width — layouts should be full-bleed to feel like a magazine spread
- Do not add borders, dividers, or background fills to product cells — they must bleed into each other
- Do not use #0018a8 as decorative illustration color; it is reserved for functional interactive states
Components
Top Navigation Bar
Minimal text-only site headerFull-bleed white bar, 30px vertical padding. Left: WOMAN, MAN, BAGS, RUNWAY at 10-11px uppercase, 0.0330em tracking, #000000. Right: SEARCH, HELP, ACCOUNT, cart icon with counter at same spec. No background fill, no border, no shadow. Sticky to top on scroll.
Section Label
Category indicator above editorial splitsTiny uppercase label (SHOP WOMAN, SHOP MAN) at 10px, 0.0330em letter-spacing, #000000. Sits at the top-left of each half of a split hero, functioning as a clickable text link. 9-10px horizontal padding from viewport edge.
Full-Bleed Split Hero
Primary landing visualTwo equal-width editorial photographs spanning full viewport width with no gap. The Acne Studios wordmark in custom display face is centered across the seam at 120px+, #000000, overlapping both images. No overlay, no gradient, no CTA button — the wordmark and the photographs do all the work.
Product Grid Cell
Individual product listing in the category gridFull-bleed product photograph with no border, radius, or background. Caption above image: category name (WOMEN'S JEANS, BAGS, T-SHIRTS) at 10px uppercase, 0.0330em tracking, #000000. No visible price, no quick-add button, no badge. Cells butt directly against neighbors with 0px gap to create a seamless editorial spread.
Editorial Tile Row
Brand storytelling content beneath product gridFive equal-width tiles in a single row, each containing a full-bleed photograph (packaging, storefront, lookbook, building). No captions, no borders, no interactive chrome — purely atmospheric. Functions as a mood board rather than navigation.
Text Link
Interactive inline link in body copy and navInherits body type and size, colored #0018a8 with no underline by default. On hover, underline appears at 1px. No pill shape, no background, no border.
Icon Button
Search, help, account, and cart triggersText label at 10-11px uppercase with 0.0330em tracking. Cart includes a 2-digit counter at the same size. Icons are 1px stroke, #000000, no fill, no background container.
Surfaces & elevation
Level 1
Paper White
#ffffffPage canvas and dominant background across all sections
Level 2
Bone
#f2f2f2Imperceptible shadow and border tint for subtle UI lift
The system intentionally avoids shadows and elevation. White space, not depth, creates separation between elements. The only shadow token (#f2f2f2) is nearly imperceptible — used only for overlays that must float above photography.
Layout & imagery
Layout
Full-bleed, edge-to-edge viewport layouts with no max-width constraint. The page follows a strict editorial rhythm: (1) sticky top nav with text links and cart counter, (2) full-viewport split hero (50/50) with overlaid wordmark, (3) 4-column product grid with zero gutters, (4) 5-column editorial tile row with zero gutters. All sections stack vertically with consistent 60px gaps. The grid is always even — no asymmetric or masonry compositions. Navigation is minimal top bar only, no sidebar or mega-menu. The layout reads left-to-right, top-to-bottom like a printed fashion magazine spread.
Imagery
Photography is the entire product. Editorial fashion shots dominate at full-bleed scale: models in avant-garde styling against neutral studio backdrops (gray, striped fabric, muted interiors). Products are shot on pure white with zero lifestyle context. Secondary imagery includes brand packaging (pink Acne Studios boxes), storefront photography, and architectural shots. No illustrations, no icons beyond simple line glyphs, no gradients, no 3D renders. Images are always rectangular with sharp corners — no masking, no rounded crops, no overlapping. The role of imagery is not decorative atmosphere but primary content; it occupies roughly 90% of visible pixel area.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 - background: #ffffff - border/shadow tint: #f2f2f2 - accent/brand: #0018a8 - muted text: #6b6b6b - primary action: no distinct CTA color ## 3-5 Example Component Prompts 1. **Top Nav Bar**: Full-width white bar, 30px top/bottom padding. Left-aligned links (WOMAN, MAN, BAGS, RUNWAY) at 10px uppercase, letter-spacing 0.33px, #000000. Right-aligned SEARCH, HELP, ACCOUNT, cart icon at same spec, 10px horizontal gap between items. No background fill, no border, sticky to top. 2. **Product Grid Cell**: Full-bleed photograph with 0px radius and no border. Caption 30px above image: category name at 10px uppercase, 0.33px letter-spacing, #000000. No price visible, no button. Cell width is 25% of viewport in a 4-column row with 0px gaps. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 4. **Editorial Tile Row**: 5 equal-width tiles in a single row, each containing one full-bleed photograph (0px radius, no border). No captions, no interactive elements within tiles. Tiles touch at 0px gap to form a continuous strip. 5. **Text Link**: Inline at 10px uppercase, 0.33px letter-spacing. Color #0018a8, no underline by default. 1px underline on hover. No background, no padding, no border.
Similar brands
SSENSE
Same editorial-fashion e-commerce language: full-bleed photography, minimal UI chrome, uppercase tracked-out nav text, and white-dominant canvas
COS
Identical restraint philosophy — large whitespace, flat product photography, no decorative elevation, and a near-monochrome interface that lets imagery dominate
Lemaire
Shared art-direction approach: tiny uppercase labels, zero-radius image crops, no card containers, and editorial tile grids beneath product listings
The Row
Same digital-magazine-as-storefront structure with full-viewport hero splits, 4-column product grids, and complete absence of traditional e-commerce UI affordances
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
