---
version: alpha
name: "SSENSE"
description: "Stark brutalist retail design system for SSENSE — pure black and white with maximum information density, editorial ambition, and an uncompromising refusal of decorative chrome."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f2f2f2"           # light section fill, hover lift on nav and cards /* estimated */
  surface-dark: "#000000"      # editorial hero backgrounds, inverted sections
  surface-mid: "#1a1a1a"       # dark editorial panels, footer background /* estimated */

  # Text / ink
  ink: "#000000"               # primary text, all headings, navigation, price labels
  ink-secondary: "#767676"     # captions, metadata, secondary labels, filter counts /* estimated */
  ink-muted: "#999999"         # placeholder text, disabled states, supplementary info /* estimated */
  on-dark: "#ffffff"           # text on dark surfaces and inverted sections
  on-background: "#000000"

  # Brand accent — SSENSE uses no chromatic accent; black IS the primary
  primary: "#000000"
  on-primary: "#ffffff"
  primary-container: "#f2f2f2"  # tinted container for secondary interactive surfaces

  # Interaction states
  text-hover: "#333333"         # link hover, near-black darkening /* estimated */
  focus-ring: "#000000"
  # was rgba(0, 0, 0, 0.08) — Google format requires hex; flattened on white
  focus-tint: "#ebebeb"

  # Borders
  border: "#000000"             # strong 1px hairline on inputs, key containers, nav underlines
  border-light: "#e8e8e8"       # subtle separator lines, card dividers /* estimated */
  # was rgba(0, 0, 0, 0.1) — Google format requires hex; flattened on white
  border-ghost: "#e5e5e5"       # near-invisible structural edge on product cards

  # Shadow (SSENSE runs essentially flat — no elevation)
  # was rgba(0, 0, 0, 0.05) — Google format requires hex; flattened on white
  shadow-soft: "#f2f2f2"

  # Semantic
  error: "#cc0000"              # form validation, destructive actions /* estimated */
  sale: "#cc0000"               # sale / reduced price labels /* estimated */

typography:
  display-hero:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.0px
  display:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  label:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.3px
  caption:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  price:
    fontFamily: "Akkurat, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.text-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-light}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
  badge-sale:
    backgroundColor: "{colors.background}"
    textColor: "{colors.sale}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 0px
  badge-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 0px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border-light}"
    padding: 0px 20px
  filter-tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 6px 12px
  filter-tag-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 6px 12px
---

# SSENSE Design System

## Overview

SSENSE operates at the intersection of luxury retail and cultural publishing, and its design system resolves that tension through radical reduction. The canvas is white (`{colors.background}`). The text is black (`{colors.ink}`). There are no accents, no gradients, no elevation. Where other luxury retailers soften the transaction with warm neutrals and humanist type, SSENSE hardens it: the grid is dense, the type is small and precise, and every centimetre of the interface is doing productive work. The system reads as a statement — that rigour and intelligence are themselves a form of luxury, more rarefied than any serif header could signal.

The typography is Akkurat, Lineto's neo-grotesque that occupies a precise position between Swiss rational and contemporary digital. Used exclusively at weight 400, it sets prices, editorial headlines, and filter labels in the same measured voice — hierarchy managed through size alone, never through contrast or weight. At 13px for body copy and nav links, the system runs deliberately small. Not inaccessibly small, but small enough to signal that its audience is willing to lean in. The negative tracking on display sizes (up to −1px at 72px) pulls headlines tight and gives large editorial text the compressed authority of a broadsheet.

What makes SSENSE visually distinctive is the dual personality it sustains at scale: a brutalist product grid where 4–5 columns of photography are separated by nothing but gutters, operating alongside a full editorial magazine — long-form interviews, art criticism, fashion reviews — all within the same design system. The product grid and the editorial spread are made from identical atoms. Same typeface. Same colour. Same radius (zero). This formal coherence is the brand's design signature: the cultural authority of the editorial and the commercial authority of the grid are indistinguishable in the design language. SSENSE is a store that reads like a magazine and a magazine that sells like a store.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with pure black (`{colors.ink}`) as the only colour — no cream, no off-white, no warm neutrals
- Akkurat at weight 400 throughout — no bold, no italic, no weight contrast anywhere in the system
- Zero border-radius on every element (`{rounded.none}`) — buttons, cards, inputs, modals are all orthogonal
- Product grid runs 4–5 columns on desktop with tight gutters, collapsing progressively to 2 on mobile
- Editorial and retail share identical design atoms — the magazine and the store are one surface
- Sale price displayed in red (`{colors.sale}`) — the only chromatic colour permitted in the UI
- Navigation is a single compressed strip with category links, no mega-menu flyouts on mobile
- All text sizes run small: body at 13px, labels at 11px — density as design intent, not constraint
- No box shadows anywhere — elevation is entirely absent; depth comes from photography and negative space
- Filter system uses rectangular toggle tags with sharp `{rounded.none}` corners — no pills
- `{colors.ink}` is simultaneously the text colour, the button colour, the border colour, and the brand accent — there is no distinction
- Page-level animation is minimal: discrete opacity transitions, no transforms, no parallax

## Colors

### Primary
- **Pure White** (`{colors.background}`): The dominant canvas. Every page, every product card, every editorial spread starts here. No tinting, no graining, no texture.
- **Light Surface** (`{colors.surface}`): Section bands for nav hover states, filter panel backgrounds, subtle lift where a secondary surface is needed without introducing colour.
- **Black** (`{colors.ink}`): All text, all borders, all button fills. The system uses one foreground colour for every purpose.

### Dark Surfaces
- **Full Black** (`{colors.surface-dark}`): Inverted editorial hero sections, full-bleed campaign banners, footer background. A hard inversion of the default canvas.
- **Near-Black** (`{colors.surface-mid}`): Deep editorial panels, dark mode hints in photo-heavy sections.

### Brand Accent
- **Black** (`{colors.primary}`): CTAs, primary buttons, icon fills, active filter states. SSENSE has no chromatic accent colour. Black performs every accent function.

### Text States
- **Secondary Ink** (`{colors.ink-secondary}`): Filter counts, secondary metadata, brand names under product images, non-price labels.
- **Muted Ink** (`{colors.ink-muted}`): Placeholder text, disabled form states, supporting captions in editorial layouts.
- **On Dark** (`{colors.on-dark}`): All text on `{colors.surface-dark}` and `{colors.surface-mid}` backgrounds.

### Borders
- **Primary Border** (`{colors.border}`): Hard 1px on inputs (focused), active filter tags, key structural containers.
- **Light Border** (`{colors.border-light}`): Navigation bottom rule, card-row separators, subtle dividers. The everyday structural edge.
- **Ghost Border** (`{colors.border-ghost}`): Near-invisible separators; was `rgba(0,0,0,0.1)` flattened on white.

### Semantic
- **Error / Sale** (`{colors.error}`, `{colors.sale}`): The only chromatic colour permitted in the system. Reduced prices display in this red; form errors use the same value. Its scarcity gives it weight — when red appears, it matters.

## Typography

### Font Family
- **Primary**: `Akkurat`, with fallbacks: `Helvetica Neue`, `Helvetica`, `Arial`, `sans-serif`
- Akkurat is a proprietary typeface from Lineto. It sits between the rational Swiss grotesque (Helvetica, Aktiv Grotesk) and more contemporary digital grotesques (Inter, Plus Jakarta Sans). Its distinguishing feature at small sizes is the open apertures that resist closed-counter confusion — critical at the 11–13px sizes SSENSE favours.
- *For external implementations where Akkurat is unavailable, `Inter` at weight 400 is the closest web match. `DM Sans` has a similar neutrality; `Neue Haas Grotesk Text Pro` is a warmer, premium alternative.*
- **No secondary typeface**: The system uses one font family for editorial headers at 72px and product label captions at 11px alike. Weight variation does not exist.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign headers, editorial section titles, major editorial headlines |
| `display` | Designer profile names, large editorial headlines, homepage feature headers |
| `heading-section` | Product category headings, article section titles |
| `heading-sub` | Product brand names, sub-category labels |
| `body-large` | Editorial article body copy, long-form interview text |
| `body` | Product descriptions, navigation links, UI prose at 13px |
| `nav-link` | Primary and secondary navigation |
| `button-ui` | CTAs, checkout actions, filter apply — 12px with 0.5px tracking |
| `label` | Product brand attribution below images, filter tag labels at 11px |
| `caption` | Timestamps, article metadata, editorial credit lines |
| `price` | Product pricing — same size as body, no weight or colour boost (except sale red) |

### Principles
- One typeface at one weight for the entire system — hierarchy is size only
- Body and nav text runs at 13px: information-dense, editorial-confident, deliberately unfed-back-to-luxury
- Display text pulls tight with negative tracking (−1px at 72px, −0.5px at 48px) — condensed authority, not airy luxury
- No italic anywhere in the editorial or retail system — the voice is declarative, not inflected
- Button labels at 12px with 0.5px letter-spacing remain modest; they don't shout

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

SSENSE's spacing is dense at the micro scale and generous only at macro section breaks. Product cards are tight-guttered — the grid breathes through photography, not through padding. Section transitions use 64–96px vertical space to signal editorial breathing room between content types.

### Grid & Container
- Max content width: approximately 1400–1500px on large displays; full-width photography bleeds edge-to-edge
- Product grid: 4–5 columns on desktop (responsive to viewport), 2–3 on tablet, 2 on mobile
- Editorial layout: single or two-column depending on content type; long-form articles use a centred narrow column (~680px) for readability
- Navigation: full-width strip, content-padded 20px; category links in a horizontal row with no mega-menu flyouts

### Whitespace Philosophy
- Product photography is the whitespace — products are close-cropped on white background, creating a seamless grid
- Section-level padding runs generous (48–96px) to separate the editorial from the retail contexts
- In-card padding is zero — photography bleeds edge to edge within each grid cell
- Filter panel and sidebar elements use tight 16–24px internal padding to maximise visible inventory

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, buttons, inputs, nav — the default for everything |
| Structural (Level 1) | `1px solid {colors.border-light}` | Navigation bottom rule, section dividers, list separators |
| Overlay (Level 2) | `1px solid {colors.border}` | Modal dialogs, drawer overlays, filter panels |
| Focus Ring | `1px solid {colors.focus-ring}` inset | Form inputs and interactive elements on keyboard focus |

**Shadow Philosophy**: SSENSE does not use elevation. There are no box shadows, no drop shadows, no blurred backgrounds. Depth is entirely photographic — the product images themselves carry three-dimensional visual weight; the UI surfaces stay strictly flat. This is not an oversight. The absence of shadows is a position: SSENSE's interface refuses to simulate physicality with CSS effects and asks photography to do that work instead.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every element in the system — buttons, cards, inputs, modals, filter tags, badges |
| `pill` | 9999px | Reserved for loading states and avatar/icon fallbacks only /* estimated */ |

SSENSE is orthogonal by conviction. The zero-radius stance is one of the most uncompromising in luxury retail — it reads as architectural. A 2px or 4px radius would soften and humanise; zero declares that this is a structure, not a friendly surface. Every button, every filter tag, every input field, every product card shares this grammar. It is also a practical decision: at the information density SSENSE operates, rounded corners eat into already-tight grid cells.

## Components

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

### Button variants

- **`button-primary`** — Solid black fill, white text, zero radius, 12px type at 0.5px tracking. Used for "Add to Bag," checkout, newsletter subscribe. No hover lift, no shadow. Hover darkens slightly to `{colors.text-hover}`.
- **`button-secondary`** — White fill with `{colors.border-light}` outline. Used for secondary retail actions (wishlist, save, filter apply in light mode). On hover, outline sharpens to full `{colors.border}`.
- **`button-ghost`** — No background, no border. Text in `{colors.ink}` with an underline-on-hover affordance. Used for editorial navigation links, "Read more" actions in articles, tertiary UI elements.

### Cards

Product cards are fully flat: no border, no radius, no shadow. Photography fills the card completely — a square or portrait crop depending on product category. Below the photograph: brand name in `{typography.label}` `{colors.ink-secondary}`, product name in `{typography.body}` `{colors.ink}`, then price. Sale pricing shows the reduced price in `{colors.sale}` with original price struck through in `{colors.ink-muted}`. Card hover state is subtle — a quick-add affordance may appear, but the card itself does not lift or gain shadow. The images are the entire visual vocabulary of the product grid.

### Inputs

Search and form inputs use `{colors.border-light}` as the resting border, snapping to `1px solid {colors.focus-ring}` on focus. No radius. Padding is tight at 10px vertical, 12px horizontal — these are utility inputs, not luxury form fields. The search bar in the navigation uses the same border-snap focus treatment.

### Badges / Tags

Sale badges are text-only in `{colors.sale}` with no background container. "New" or category labels render in `{typography.label}` `{colors.ink-secondary}` below the product image — a plain typographic label, not a pill or chip. Filter toggle tags use `{rounded.none}` with a 1px border that inverts to white-on-black when active. The system has no rounded pills anywhere in the retail surface.

### Navigation

The header is a flat full-width strip with a single 1px bottom rule. Left anchor: the SSENSE wordmark logotype. Center: primary navigation links (Menswear, Womenswear, Everything Else, Sale) in `{typography.nav-link}`. Right: search, wishlist, account, and bag icons. On mobile, center links collapse into an icon-triggered drawer. Sale link renders in `{colors.sale}` — the only chromatic element in the navigation. No sticky shadow on scroll; the border holds structure without decoration.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the full canvas without exception — no cream, warm white, or off-white variants
- Keep all shapes at `{rounded.none}` — zero radius is the system's most visible commitment
- Run body and nav text at 13px (`{typography.body}`) — the density is intentional, not a bug
- Use `{colors.ink}` for every foreground role: text, borders, button fills, icon strokes
- Reserve `{colors.sale}` for reduced prices and form errors only — this is the system's only chromatic accent
- Let product photography carry all visual energy — the chrome should disappear
- Apply `{colors.on-dark}` text on any `{colors.surface-dark}` or `{colors.surface-mid}` background
- Use `{typography.button-ui}` at 12px with 0.5px letter-spacing for all CTAs — modest, not loud
- Maintain the flat elevation model — no `box-shadow` except structural 1px borders
- Apply negative tracking to display headings — `{typography.display-hero}` at −1px, `{typography.display}` at −0.5px

### Don't
- Don't add a chromatic accent colour (tan, blush, forest green, brand blue) — the monochrome IS the brand
- Don't introduce any border-radius above 0 on product cards, buttons, inputs, or filter tags
- Don't use font-weight above 400 (`normal`) anywhere in the system — there is no bold in SSENSE's vocabulary
- Don't add box shadows or drop shadows to any UI element — elevation is not in the design language
- Don't scale body text above 13px for product grid UI — density is intentional
- Don't use italic anywhere in the UI or editorial surface — the voice is declarative
- Don't add hover animations that lift, scale, or translate cards — photography stays flat on the grid
- Don't pill-shape filter tags — rectangular `{rounded.none}` is mandatory for the filter system
- Don't break the sale-red rule: `{colors.sale}` is for reduced prices and errors; it should not appear in nav banners or decorative contexts
- Don't introduce photographic overlays with gradient scrim — SSENSE uses full-bleed photography with no CSS overlay treatments

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <375px | Single-column editorial, 2-column product grid, nav collapses to icon drawer |
| Mobile Large | 375–767px | 2-column product grid, condensed navigation strip |
| Tablet | 768–1023px | 3-column product grid, split editorial begins, filter sidebar visible |
| Desktop | 1024–1439px | 4-column product grid, full horizontal navigation, editorial multi-column |
| Large Desktop | ≥1440px | 5-column product grid, editorial max-width container centred |

### Touch Targets
- Product cards target the full photograph — naturally large tap areas by grid geometry
- Navigation links have a minimum 44px vertical tap target on mobile even at 13px type
- Filter tag taps include 6px padding above and below the 11px label — borderline but usable
- Bag and icon taps in the nav use 44×44px minimum touch areas

### Collapsing Strategy
- Product grid: 5 → 4 → 3 → 2 columns across breakpoints with consistent gutter maintenance
- Navigation: horizontal category strip collapses behind icon drawer below 768px; wordmark stays left-aligned
- Editorial: centred narrow-column articles (680px) stack to full-width below 768px; multi-column editorial layouts collapse to single column
- Filter panel: persistent sidebar on desktop (≥1024px) collapses to a full-screen overlay drawer on mobile

### Image Behavior
- Product photography uses `object-fit: cover` with a consistent aspect ratio per grid context (typically 4:5 portrait for apparel)
- Editorial photography is full-bleed with no CSS crop or filter treatment
- The wordmark SVG scales proportionally; no icon-only fallback at any breakpoint
- Sale overlay text (if used in editorial banners) maintains contrast against the inverted surface

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}` (black)
- Sale / error: `{colors.sale}`
- Border: `{colors.border-light}`
- CTA: `{colors.primary}`
- On dark surfaces: `{colors.on-dark}`

### Example Component Prompts

- "Build an SSENSE product card on white (`{colors.background}`). No border, no radius, no shadow. Full-bleed photography in a 4:5 portrait aspect ratio. Below the image: brand name in Akkurat 11px weight 400 (`{typography.label}`) in `{colors.ink-secondary}`, product name in Akkurat 13px weight 400 (`{typography.body}`) in `{colors.ink}`, price in `{typography.price}` `{colors.ink}`. If on sale: reduced price in `{colors.sale}`, original price struck through in `{colors.ink-muted}`. Zero radius on all elements. No hover animation beyond a quick-add button appearing at the base of the image at 0.2s ease."
- "Create an SSENSE primary CTA button. Background: `{colors.primary}` (pure black). Text: `{colors.on-primary}` (white). Font: Akkurat 12px weight 400, 0.5px letter-spacing (`{typography.button-ui}`). Padding: 12px 20px. Radius: `{rounded.none}` (zero). No box-shadow. Hover: background softens to `{colors.text-hover}` over 0.2s ease."
- "Design the SSENSE navigation strip. Full-width, `{colors.background}` fill, `1px solid {colors.border-light}` bottom rule. Left: SSENSE logotype in `{colors.ink}`. Center: Menswear, Womenswear, Everything Else links in Akkurat 13px weight 400 (`{typography.nav-link}`), `{colors.ink}`, no underline. 'Sale' link in `{colors.sale}`. Right: search, wishlist, account, bag icons in `{colors.ink}`. Padding: 0px 20px. No shadow on scroll, no background tint."
- "Build a filter tag toggle for SSENSE. Resting state: white (`{colors.background}`) fill, 1px `{colors.border-light}` border, Akkurat 11px weight 400 (`{typography.label}`) `{colors.ink}`, `{rounded.none}`, padding 6px 12px. Active/selected state: `{colors.primary}` fill, `{colors.on-primary}` text, `{colors.primary}` border. No border-radius at any state. Transition: background 0.15s ease."
- "Create an SSENSE search input field. Background: `{colors.background}`, 1px bottom border in `{colors.border-light}` (underline style, no full box border). Akkurat 13px weight 400 (`{typography.body}`), `{colors.ink}` text, `{colors.ink-muted}` placeholder. No radius. On focus: bottom border snaps to `1px solid {colors.focus-ring}`. Padding: 8px 0px. No shadow. The input should feel editorial, not e-commerce."
- "Generate an editorial feature block in SSENSE style. Dark inverted section, `{colors.surface-dark}` background. Headline: Akkurat 48px weight 400 negative-tracked (`{typography.display}`) in `{colors.on-dark}`. Subhead: Akkurat 13px weight 400 (`{typography.body}`) in `{colors.on-dark}` at reduced opacity (approx `{colors.ink-secondary}` lightened for dark context). A secondary CTA button: `{colors.on-dark}` background, `{colors.surface-dark}` text, `{rounded.none}`, `{typography.button-ui}`. No gradients on the background, no overlay scrim."

### Iteration Guide

1. Start with `{colors.background}` as the total canvas — not warm white, not cream. Any tint breaks the system.
2. Set zero radius everywhere (`{rounded.none}`) before adding any other style. The orthogonal grid IS SSENSE.
3. Use Akkurat weight 400 at 13px for all UI text. Scale up through size alone for hierarchy — never weight.
4. Apply negative tracking only at display sizes: −1px at 72px, −0.5px at 48px. Body and label text: tracking at 0 or +0.3–0.5px.
5. Keep `{colors.ink}` as the single foreground colour — text, borders, button fills, icon strokes all share it.
6. Reserve `{colors.sale}` for discounted prices and form errors only. Its scarcity IS the signal.
7. Build the product grid with zero card chrome — no border, no shadow, no radius. Photography creates the grid's visual rhythm.

---

## 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 SSENSE. Brand names and trademarks belong to their respective owners.