---
version: alpha
name: "Acne Studios"
description: "A Stockholm fashion house that pairs a near-zero chromatic palette with Helvetica Now Text and a signature pale-salmon hero band — art-gallery restraint punctuated by one warm, deliberate flush of heritage color."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f7f7"           # light section fill; rgb(247, 247, 247) — input default bg
  surface-warm: "#f2c4b2"      # signature salmon hero band — Acne's heritage blush

  # Ink / text
  ink: "#000000"               # primary text, nav links, headlines — pure black throughout
  ink-muted: "#6b6b6b"         # secondary labels, captions, muted navigation
  ink-ghost: "#bbbbbb"         # was rgb(187,187,187) — disabled state, fine print, inactive

  # Accent — utility blue (accessibility / skip links only; NOT a brand CTA color)
  primary: "#000000"           # CTA fill — black is the commerce accent
  on-primary: "#ffffff"        # text on black CTA
  primary-hover: "#6b6b6b"     # hover color-shift on nav buttons (black → muted grey)

  # Highlight — Acne Studios' electric sky-blue focus accent
  focus-ring: "#1eaedb"        # was rgb(30,174,219) — newsletter input focus bg; distinctive
  on-focus: "#ffffff"          # text on sky-blue focus surface

  # Interactive
  link-accent: "#0018a8"       # skip-links / contact utility links — a11y blue, not a brand color
  link-accent-hover: "#3860be" # hover on utility links

  # Semantic
  success: "#32ae88"           # was rgb(50,174,136) — form confirmation border
  error: "#ff0000"             # was implied by system defaults — validation error text /* estimated */

  # Borders
  border: "#000000"            # 1px hairline on buttons, section dividers (border-bottom)
  border-subtle: "#f2f2f2"     # was rgb(242,242,242) — hairline top-rules on footer, nav rows
  border-mid: "#6f6f6f"        # was rgb(111,111,111) — mid-weight border on spans / swatch chips

  # Shadow
  shadow-soft: "#000000"       # was rgba(0,0,0,0.2) — drawer shadow; Google format requires hex

typography:
  display-hero:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  display:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.16px
  body:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0.3px
  button-ui:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.144px
  label-uppercase:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0.3px
  caption:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0.3px
  caption-mono:
    fontFamily: "Helvetica Monospaced Pro, Courier New, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 10px
  md: 18px
  lg: 20px
  xl: 30px
  2xl: 60px
  3xl: 150px

rounded:
  none: 0px
  xs: 2px      # button and close-button radius — the only brand radius in use
  pill: 9999px # cookie consent search pill only; not used in product UI

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 20px
    border: "1px solid {colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 20px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
    border: "none"
  button-ghost-hover:
    textColor: "{colors.ink-muted}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 19px 10px
    border: "1px solid {colors.surface}"
  input-focus:
    backgroundColor: "{colors.focus-ring}"
    textColor: "{colors.on-focus}"
    border: "1px solid {colors.border}"
    outline: "1px solid {colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 18px
    borderBottom: "none"

  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.none}"
    padding: 4px 0px
    textTransform: uppercase
---

# Acne Studios Design System

## Overview

Acne Studios arrives on screen with the confidence of a gallery opening in Södermalm. The homepage presents a near-white canvas (`{colors.background}`) under a full-width hero band in a pale, warm salmon (`{colors.surface-warm}`) — Acne's most persistent heritage color, carried across decades of denim labels, seasonal look-books, and Stockholm flagship walls. This blush is not decoration; it is the brand's signature mark, as identifiable as a monogram. Everything else recedes: black text, white space, and product photography that needs no chrome to do its work.

The typographic system is built entirely on **Helvetica Now Text**, self-hosted in two weights. At display scale — sometimes 80px or larger for campaign numerals — the typeface runs at near-zero tracking with a light 400 weight, landing in the same territory as an art-museum wall label: informative, unsentimental, and entirely sure of itself. At 12px with `letter-spacing: 0.3px` and `text-transform: uppercase`, the same face becomes a product taxonomy system — "WOMEN'S JEANS", "BAGS", "T-SHIRTS" — sorting the catalogue with Swiss-poster precision. The range of one typeface doing both jobs is Acne's typographic feat.

The interactive detail that sets this system apart is a sky-blue focus accent (`{colors.focus-ring}`, `#1eaedb`) that floods the newsletter email input on focus — white text reversed on turquoise, a sudden warmth in a predominantly achromatic interface. This is not an accidental accessibility artifact; it is an editorial punctuation mark that feels consistent with Acne's culture of unexpected color insertions into otherwise restrained contexts. Hover states reduce `{colors.ink}` to `{colors.ink-muted}` with a smooth 0.15s ease-in, no underlines, no scale — just tonal fade, as if the element is politely stepping aside.

**Key Characteristics:**
- Full-bleed salmon hero band (`{colors.surface-warm}`) as the brand's one chromatic signature — present on launch but not repeated through the product catalog
- White (`{colors.background}`) as the universal product and navigation canvas — clean, achromatic, gallery-appropriate
- **Helvetica Now Text** across every typographic role — no second typeface, no display serif counterpart
- Uppercase `letter-spacing: 0.3px` labels (`{typography.label-uppercase}`) as the navigation and section taxonomy system
- Large-scale display numerals and campaign text in weight 400 at near-negative tracking — editorial confidence, not retail loudness
- Sky-blue input focus state (`{colors.focus-ring}`) — the most surprising interaction color in the system; reverses white text on electric blue fill
- Hover color-shifts from black to mid-grey (`{colors.ink}` → `{colors.ink-muted}`) at 0.15s ease-in — no underlines, no shadow lifts
- 1px solid `{colors.border}` (black) on CTAs, section bottom-rules, and dialog borders — structural hairlines, not decorative chrome
- `{rounded.xs}` (2px) is the only brand radius in product UI — near-square, not truly rounded
- Full-bleed product photography with zero card chrome — images sit directly on `{colors.background}`
- A Helvetica Monospaced Pro accent (`{typography.caption-mono}`) appears in tabular or code-like UI contexts
- SVG icon system throughout — no icon fonts; hover shifts icon color alongside text at `{colors.ink-muted}`

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): Universal page and product canvas. Every product tile, navigation bar, and editorial section rests on pure white.
- **Light Fill** (`{colors.surface}`): A near-white fill (`#f7f7f7`) used for the email input background in its default state — visible on close inspection but not a compositional color.
- **Salmon Blush** (`{colors.surface-warm}`): Acne Studios' heritage signature. A pale warm salmon that covers the hero banner — one of the most recognized brand colors in contemporary fashion. It appears season after season on everything from website headers to paper shopping bags to denim labels.

### Ink / Text
- **Pure Black** (`{colors.ink}`): The only text color for all navigation, product names, prices, headline text, and body copy. No warmer near-black; Acne Studios uses true zero-luminance black throughout.
- **Muted Grey** (`{colors.ink-muted}`): Secondary text and hover state. Applied to captions, subcategory labels, and as the destination color for all hover transitions in the navigation.
- **Ghost** (`{colors.ink-ghost}`): Inactive, disabled, and fine-print text — the lowest tier of the ink scale.

### Brand Accent
- **Primary CTA** (`{colors.primary}`): Black, full stop. Acne Studios has no chromatic brand accent applied to commerce CTAs — black buttons close the sale.
- **Sky-Blue Focus** (`{colors.focus-ring}`): The system's most distinctive color moment. The newsletter email input floods this electric blue on focus, reversing text to `{colors.on-focus}` white. Not a utility default — a deliberate, editorial choice.

### Utility & Semantic
- **Link Blue** (`{colors.link-accent}`): A deep cobalt appears only on skip-links and accessibility anchor elements — visible to keyboard users, invisible in the main commerce experience.
- **Success Green** (`{colors.success}`): A warm teal border that confirms form success — barely used, but present in the component library.

### Borders & Structure
- **Black Hairline** (`{colors.border}`): 1px rules on buttons, section dividers, and dialog tops. The structural skeleton.
- **Subtle Rule** (`{colors.border-subtle}`): Near-white hairlines separating footer rows and nav subsections — visible only on close inspection.

## Typography

### Font Family
- **Primary**: `Helvetica Now Text`, with fallbacks: `Helvetica, Arial, sans-serif`. Self-hosted in Regular (weight 400, `helvetica-now-w05-text-regular.woff2`) and Medium (the functional "bold" at weight 700 in Micro cut, `helvetica-now-w05-micro-medium.woff2`).
- **Monospace accent**: `Helvetica Monospaced Pro`, self-hosted (`helvetica-monospaced-w05-paneuropean-roman.woff2`). Used for tabular or code-adjacent UI contexts — product reference numbers, SKU labels.
- **OpenType features**: Default ligatures only. No variable axis; fixed instance weights at 400 and 700. Tracking handled entirely via `letter-spacing` declarations.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 80px — campaign numerals, seasonal year marks, editorial heroes |
| `display` | 40px — secondary editorial section titles |
| `heading-section` | 18px — editorial content headings, product section titles |
| `heading-sub` | 16px / weight 700 — bold subsection labels, filter panel titles |
| `body-large` | 16px / 0.16px tracking — product descriptions, editorial body copy |
| `body` | 13px — product card labels, navigation secondary items |
| `nav-link` | 12px / 0.3px tracking — primary navigation links, footer category links |
| `button-ui` | 14px / weight 700 / 0.144px tracking — CTA labels, form submit buttons |
| `label-uppercase` | 12px / 0.3px / uppercase — product category labels, section taxonomy |
| `caption` | 12px / 0.3px — product sub-details, color names, size labels |
| `caption-mono` | 12px Helvetica Monospaced Pro / uppercase — reference codes, SKU strings |

### Principles
- **Single typeface, full hierarchy**: Helvetica Now Text carries every role from 80px campaign hero to 12px caption — no decorative serif, no display variant, no secondary grotesque.
- **Uppercase as taxonomy, not style**: `text-transform: uppercase` is reserved for navigational and categorial labels — it signals classification, not emphasis.
- **Weight restraint**: Only two weights deployed — Regular (400) for all reading contexts and Medium/Bold (700) for UI buttons and bold subsection markers. No light weights, no ultra-bold.
- **Tracking as formality**: Low-tracking large text (editorial) versus slight positive-tracking small text (nav, labels) creates register shifts without changing the typeface.
- **Monospace as precision**: Helvetica Monospaced Pro appearing in product reference contexts signals the presence of technical, stable data — a design-world equivalent of a barcode.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block. Base unit: 4px (though the practical rhythm is closer to 10px steps).

Acne Studios layouts read as generous and editorial. The hero band is full-bleed and tall; product grids breathe with consistent gutters; section labels sit on their own row with abundant surrounding air. The site does not feel like a discount retailer stacking product density — it feels like a well-curated showroom where each object has room to be considered individually.

### Grid & Container
- Max content width: 1440px, with product content constrained to approximately 1280px
- Desktop product grid: 4-column layout with wide equal gutters; occasionally 3-up for featured editorial items
- Hero band: full-bleed (`width: 100vw`), no padding, content centered; hosts campaign text over `{colors.surface-warm}` fill
- Navigation: minimal top bar with category tabs ("Woman", "Man", "Denim", "Bags", "Sale") left-aligned; search, help, account icons right-aligned; no logotype in nav (brand identity carried by the full-page context)

### Whitespace Philosophy
- Sections are divided by generous vertical air, not background color alternation or visible rules
- Product tiles allow the photography to dominate — minimal label padding, no card borders
- Navigation is compact and utilitarian; the generous whitespace is reserved for product display

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product tiles, editorial sections, navigation |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Section dividers, heading underrules, dialog tops |
| Inset rule (Level 1) | `box-shadow: inset 0 -1px 0 {colors.border}` | Active nav items, selected category tabs |
| Row separator (Level 1) | `border-top: 1px solid {colors.border-subtle}` | Footer row dividers, nav category separators |
| Drawer (Level 3) | Soft ambient shadow (`{colors.shadow-soft}`) | Side drawer panels and modal overlays |

**Shadow Philosophy**: Acne Studios is architecturally flat. No product card lifts. No button throws a shadow. The 1px hairlines do all the structural work; the drawer-level shadow exists only to separate a slide-in panel from the page content behind it. This flatness is consistent with the art-gallery spatial model — objects rest on a surface, they don't float above it.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, product tiles, nav bar, image frames, section containers |
| `xs` | 2px | Buttons (primary and secondary), close buttons in preference dialogs |
| `pill` | 9999px | Cookie consent search input — not a product UI radius |

The system is effectively square. The 2px on buttons is a whisper of softness — enough to avoid the harsh corner on a thick CTA but invisible at arm's length. Acne Studios uses far less radius than most contemporary retail sites; the near-square language is part of what positions the brand as design-literate rather than friendly or approachable.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Pure `{colors.primary}` (black) fill, `{colors.on-primary}` white text, 14px Helvetica Now Text Medium at `0.144px` tracking, `{rounded.xs}` (2px), `1px solid {colors.border}` outline. Hover transitions text and border to `{colors.primary-hover}` grey in 0.15s ease-in. Used for "Add to cart", "Continue", "Apply" — decisive commerce actions.
- **`button-secondary`** — `{colors.background}` white fill, `{colors.ink}` black text, matching border geometry. Hover fills to `{colors.surface}`. Secondary commerce actions and form alternatives.
- **`button-ghost`** — Transparent background, `{colors.ink}` text, no border, no radius. Navigation category switchers ("Woman", "Man", "Denim") behave as ghost buttons — hover fades to `{colors.ink-muted}` at 0.15s ease-in.

### Cards
- **`card`** — Pure white surface, no border, no shadow, `{rounded.none}`. Product photography sits edge-to-edge above a minimal caption row. Cards are viewfinders, not containers.

### Inputs
- **`input`** — `{colors.surface}` fill in default state — barely distinguishable from white, creating an elegant flush-field aesthetic. Focus is the system's most dramatic moment: the entire field fills `{colors.focus-ring}` (sky blue `#1eaedb`), text reverses to `{colors.on-focus}` white, and a `1px solid {colors.border}` outline appears. 0px radius. 19px vertical padding.

### Navigation
- **`nav-bar`** — White background, pure black text, 12px Helvetica Now Text at `letter-spacing: 0.3px`. Category labels rendered as ghost buttons with hover-fade to `{colors.ink-muted}`. No sticky shadow on scroll; the header docks cleanly. Sub-navigation reveals on hover with uppercase category grid — no animation, instant display.

### Badges / Labels
- **`badge`** — No fill, `{typography.label-uppercase}` in `{colors.ink}`. Section category labels ("WOMEN'S JEANS", "BAGS") are pure typographic markers — no chip background, no border, no padding beyond the flow.

## Do's and Don'ts

### Do
- Use `{colors.surface-warm}` (salmon) for hero and campaign moments only — it is the brand's singular chromatic signature and loses power if overused
- Set all navigation links and category labels in `{typography.nav-link}` or `{typography.label-uppercase}` — 12px Helvetica Now Text at `letter-spacing: 0.3px` with uppercase for category labels
- Allow `{colors.focus-ring}` (sky blue) to flood the input field on focus — this is an intentional signature, not an error; white text on blue is the desired state
- Apply `{rounded.xs}` (2px) to buttons only — all image frames, cards, and containers stay at `{rounded.none}`
- Use `{colors.ink}` → `{colors.ink-muted}` hover fade at 0.15s ease-in for all interactive elements — no underlines, no scale, no lift
- Let full-bleed product photography carry visual weight; chrome recedes to 1px hairlines
- Keep large-scale campaign text in weight 400 — editorial confidence comes from precision, not weight

### Don't
- Don't repurpose `{colors.link-accent}` (cobalt blue `#0018a8`) as a brand CTA color — it belongs to accessibility skip-links only
- Don't round any container, card, or image frame beyond `{rounded.xs}` — the near-square language is intentional
- Don't introduce a second typeface; Helvetica Now Text alone handles every role from 80px editorial to 12px caption
- Don't add hover lifts, card shadows, or border-box glow effects — the system is architecturally flat except for drawer overlays
- Don't reproduce `{colors.surface-warm}` salmon as a button fill, text color, or secondary tint — it is a hero-band material, not a token for general accent use
- Don't use `{colors.ink-muted}` for primary text or CTA labels — it signals secondary hierarchy and disabled-adjacent states
- Don't animate with durations longer than 0.15s ease-in; the system has one speed and one easing

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile S | < 375px | Single-column grid; all type scales down ~20%; full-screen nav drawer |
| Mobile | 375–576px | Single-column product grid; hamburger nav; hero band full-bleed |
| Tablet | 576–992px | Two-column product grid; category nav condensed |
| Desktop | 992–1440px | Full horizontal nav; 4-column product grid; hero at full 80px scale |
| Large Desktop | > 1440px | Max container at 1440px; grid maintains 4-column; hero type scales up |

### Touch Targets
- CTA buttons have 19px vertical padding, resulting in approximately 50px tap height — comfortable on mobile
- Ghost button nav tabs span full category width for easy touch on mobile nav drawer
- Product tiles are fully tappable card regions, not just the title link
- Input fields have 19px vertical padding providing ample touch area

### Collapsing Strategy
- **Navigation**: full horizontal tab bar → hamburger menu revealing a full-screen drawer with uppercase category grid; sub-navigation becomes an expandable accordion within the drawer
- **Hero band**: `{colors.surface-warm}` salmon band remains full-bleed at all breakpoints; campaign text scales proportionally
- **Product grid**: 4-column desktop → 2-column tablet → 1 or 2-column mobile depending on page
- **Typography**: display hero scales from ~80px down to ~48px on mobile while maintaining weight-400 restraint

### Image Behavior
- Product photography is always full-width within its grid column — no max-width cap on tile images
- Hero images and campaign photography remain full-bleed at all viewports
- Image frames maintain `{rounded.none}` at all breakpoints — no rounded container on mobile
- Lazy loading defers off-screen images; aspect ratios are preserved with height reservations

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Hero / campaign band: Salmon blush (`{colors.surface-warm}`)
- Primary text: Pure black (`{colors.ink}`)
- Secondary / hover text: Mid grey (`{colors.ink-muted}`)
- CTA fill: Pure black (`{colors.primary}`)
- CTA text: White (`{colors.on-primary}`)
- Input focus fill: Sky blue (`{colors.focus-ring}`)
- Border / hairline: Black (`{colors.border}`)
- Subtle divider: Near-white (`{colors.border-subtle}`)

### Example Component Prompts

- "Create a full-bleed hero banner with `background-color: {colors.surface-warm}` (pale salmon). Center a campaign numeral or short headline in 80px Helvetica Now Text Regular at `letter-spacing: -0.5px`, `color: {colors.ink}`. Below the hero, transition to `{colors.background}` white with no divider — the color change is the section break."

- "Build a primary CTA button: `background-color: {colors.primary}` (black), `color: {colors.on-primary}` (white), 14px Helvetica Now Text weight 700 at `letter-spacing: 0.144px`, `border-radius: 2px`, `padding: 12px 20px`, `border: 1px solid {colors.border}`. Hover: transition `background-color` to `{colors.primary-hover}` (grey) at 0.15s ease-in — no shadow, no scale."

- "Design a product card: `background: {colors.background}`, `border-radius: 0`, no shadow, no border. Product image fills the card top edge-to-edge. Below: 13px Helvetica Now Text product name in `{colors.ink}`, then price in `{colors.ink-muted}` at same size. Keep caption row padding minimal — 10px top, 0px horizontal."

- "Create a newsletter email input: `background-color: {colors.surface}` (near-white `#f7f7f7`), `color: {colors.ink}`, 16px Helvetica Now Text Regular, `padding: 19px 10px`, `border-radius: 0`, `border: 1px solid {colors.surface}`. On focus: swap `background-color` to `{colors.focus-ring}` (sky blue `#1eaedb`), `color: {colors.on-focus}` (white), and `border: 1px solid {colors.border}` plus `outline: 1px solid {colors.border}`."

- "Build a navigation category bar: `background: {colors.background}`, links at 12px Helvetica Now Text, `letter-spacing: 0.3px`, `color: {colors.ink}`. On hover: transition `color` to `{colors.ink-muted}` at `transition: color 0.15s ease-in`. Uppercase category labels (Women, Men, Denim, Bags) are ghost buttons — `background: transparent`, `border: none`, `padding: 0`."

- "Generate an editorial section with a full-width `{colors.surface-warm}` salmon band containing a 40px Helvetica Now Text 400 headline in `{colors.ink}`. Below: product grid on `{colors.background}` white, 4 columns, equal gutters, images full-width in each cell, 13px captions in `{colors.ink}` below each image."

### Iteration Guide

1. Start with `{colors.background}` pure white as the universal canvas. Add the `{colors.surface-warm}` salmon band for hero sections only — one deliberate warmth, then return to white.
2. Apply Helvetica Now Text to every type element. If a second typeface appears, replace it — the system is mono-typographic by design.
3. Scale display text to weight 400 at negative or zero tracking; set nav and label text to uppercase at `letter-spacing: 0.3px`. No weight above 700, no weight below 400.
4. All hover interactions: color-fade from `{colors.ink}` to `{colors.ink-muted}` at 0.15s ease-in. No underlines, no lifts, no shadows.
5. Input focus: flood the entire input field with `{colors.focus-ring}` sky blue and reverse text to `{colors.on-focus}` white. This is a signature moment — do not soften it with a partial border approach.
6. Keep all cards and containers at `{rounded.none}`. Apply `{rounded.xs}` (2px) to buttons only.
7. Use 1px hairlines in `{colors.border}` (black) for structural dividers, button outlines, and dialog separators. `{colors.border-subtle}` (near-white) for secondary row rules.
8. There is one chromatic moment per page — the salmon hero. Everything else is black, white, and grey.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Acne Studios. Brand names and trademarks belong to their respective owners.