---
version: alpha
name: Mr Porter
description: Luxury menswear e-commerce rendered as a broadsheet — near-black ink on white, Times New Roman serif for editorial display, SackersGothicStd in tightly-tracked uppercase for all commerce UI, and absolute square corners throughout that signal tailoring over softness.

colors:
  # Surface / canvas
  background: "#ffffff"          # pure white — the editorial page ground
  surface: "#f4f4f4"             # product-grid tile background, filter panels  /* estimated */
  surface-mid: "#e8e8e8"         # divider bands, promo stripe  /* estimated */
  surface-dark: "#111111"        # footer, dark hero blocks, inverted CTAs

  # Ink / text
  ink: "#1a1a1a"                 # primary text — near-black, not pure black
  ink-secondary: "#666666"       # metadata, secondary labels, price secondary  /* estimated */
  ink-muted: "#999999"           # captions, helper text, disabled states  /* estimated */
  on-dark: "#ffffff"             # text on dark surface and inverted blocks
  on-primary: "#ffffff"          # text on primary CTA fill

  # Brand accent — Mr Porter uses a near-black as primary CTA
  primary: "#1a1a1a"             # primary CTA background; near-black — no chromatic brand color
  primary-hover: "#000000"       # hover deepens to pure black  /* estimated */

  # Secondary accent — used on sale/promotion callouts
  accent-red: "#cc0000"          # sale pricing, promotional flags  /* estimated */

  # Borders
  border: "#dddddd"              # hairline product-tile edges, panel dividers  /* estimated */
  border-strong: "#1a1a1a"       # active filter borders, focus outline, strong rules

  # Focus
  focus-ring: "#1a1a1a"          # inline focus outline on interactive elements

  # Shadow tint (opaque stand-in — elevation table below)
  shadow-soft: "#1a1a1a"         # was rgba(26,26,26,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-section:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Times New Roman, Times, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
  button-ui:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  label:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
  caption:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  price:
    fontFamily: "SackersGothicStd-Heavy, Futura, Century Gothic, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1px

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: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-ghost-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  badge-sale:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 6px 12px
  tag-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-secondary}"
---

# Mr Porter Design System

## Overview

Mr Porter operates as luxury retail distilled to its most compositional essentials. The canvas is white (`{colors.background}`) — not ivory, not warm — and the ink that sits on it is a near-black (`{colors.ink}`) drawn from a tradition of fine print rather than digital UI defaults. There are no gradients, no drop shadows on product cards, no ambient glows. The page is built the way a well-dressed man dresses: with deliberate restraint, in which every element present has earned its place and every element absent is conspicuously, intentionally missing.

The typographic architecture is the brand's most decisive statement. Editorial display lines — section headers, feature headlines, story titles — are set in **Times New Roman** (`{typography.display-hero}`, `{typography.display}`), an old-style serif that carries decades of newspaper and publishing authority. Beneath it, all commerce: navigation labels, CTA copy, filter text, prices, product names — runs in **SackersGothicStd-Heavy** (`{typography.nav-link}`, `{typography.button-ui}`), a geometric uppercase gothic spaced wide. The pairing is studied and deliberate: the serif names things worth reading; the gothic transacts. They never compete because they occupy entirely separate registers.

There is no chromatic brand accent. The Mr Porter CTA is near-black (`{colors.primary}`) — the same tone as the page's headline type — which means the add-to-bag button is visually indistinguishable from the editorial hierarchy until you read it. This is a confident statement: at Mr Porter, purchase is an editorial act, not a promotional one. A red accent (`{colors.accent-red}`) appears only for sale pricing, and its presence reads as an intrusion — which is precisely the point.

**Key Characteristics:**
- **Times New Roman** for all editorial display and section headings (`{typography.display-hero}`, `{typography.display}`) — newspaper authority in a menswear context
- **SackersGothicStd-Heavy** (self-hosted geometric gothic) runs all navigation, CTAs, labels, and commerce UI (`{typography.nav-link}`, `{typography.button-ui}`) — uppercase only, tracked wide
- No chromatic brand color: primary CTA is near-black (`{colors.primary}`), the same tone as headline ink
- Absolute square corners (`{rounded.none}`) on every interactive element — buttons, inputs, product tiles, filter chips
- Pure white canvas (`{colors.background}`) with a near-black ink (`{colors.ink}`) — zero tinting, maximum contrast
- Sale red (`{colors.accent-red}`) is the only chromatic color, reserved for reduced pricing
- Hairline borders (`{colors.border}`) divide the product grid; product tiles carry no resting shadow
- Spacing on an 8px base with generous editorial breathing room (`{spacing.3xl}`–`{spacing.4xl}`) around section changes
- Typography tracked at 2px on nav and button labels — the gothic text reads as architectural lettering
- Dark footer block (`{colors.surface-dark}`) with reversed-out white text — the only major tonal inversion
- Product photography is the primary visual ornament; UI chrome is subordinate to the image
- The pencil-moustache logomark and the MR PORTER wordmark are set in spaced small-caps gothic — no logotype gimmick

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Product grid, editorial features, and navigation all live here.
- **Light Gray** (`{colors.surface}`): Product tile hover state, filter panel backgrounds, secondary surfaces.
- **Mid Gray** (`{colors.surface-mid}`): Divider bands, promotional stripe backgrounds, subtle section breaks.
- **Near-Black** (`{colors.surface-dark}`): The footer and any dark editorial inversion blocks.

### Ink / Text
- **Near-Black** (`{colors.ink}`): The primary typographic tone — slightly off pure black, the color of quality printing ink.
- **Mid Gray** (`{colors.ink-secondary}`): Metadata, secondary labels, price subcopy — supporting information.
- **Muted Gray** (`{colors.ink-muted}`): Captions, placeholder text, disabled UI states.
- **White** (`{colors.on-dark}`): Text on dark surface blocks and footer.

### Brand Accent
- **Near-Black-as-Accent** (`{colors.primary}`): Mr Porter has no chromatic brand color. The near-black that anchors headlines fills the primary CTA, active borders, and selected states. Hover deepens to pure black (`{colors.primary-hover}`). This restraint is intentional — it treats purchase as a continuation of editorial, not a promotional interruption.

### Promotional Accent
- **Sale Red** (`{colors.accent-red}`): Reserved entirely for reduced price markers and sale event flags. Its chromatic presence is an exception that punctuates an otherwise achromatic system — a visual alarm, not a brand color.

### Borders & Focus
- **Hairline** (`{colors.border}`): Panel and tile edges — structural but invisible at rest.
- **Strong Border** (`{colors.border-strong}`): Active input frames, filter selection outlines.
- **Focus Ring** (`{colors.focus-ring}`): Inline focus outline on all interactive elements.

### Shadow Tint
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for the rare flyout shadow (originally `rgba(26,26,26,0.08)` — flattened for spec compliance).

## Typography

### Font Family
- **Editorial Display**: `Times New Roman` with fallbacks `Times, Georgia, serif`. Carries feature headlines, section display lines, and editorial story titles.
- **Commerce UI**: `SackersGothicStd-Heavy` (self-hosted), a narrow uppercase geometric gothic — with fallbacks `Futura, Century Gothic, Helvetica Neue, sans-serif`. Runs all navigation labels, CTA copy, product names, prices, and filter text.
- **Casing**: SackersGothicStd is always uppercase. The wide tracking (2px on nav and buttons) is non-negotiable — it is the visual signature of the brand's commerce layer.

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / Times New Roman / feature editorial heroes, campaign titles |
| `display` | 32px / Times New Roman / section display heads, story titles |
| `heading-section` | 24px / Times New Roman / section category heads |
| `heading-sub` | 18px / Times New Roman / editorial sub-section titles |
| `body-large` | 16px / SackersGothicStd / introductory commerce body |
| `body` | 14px / SackersGothicStd / product descriptions, metadata body |
| `nav-link` | 11px / SackersGothicStd / 2px tracking — navigation labels |
| `button-ui` | 11px / SackersGothicStd / 2px tracking — CTA and button labels |
| `label` | 10px / SackersGothicStd / 2px tracking — badges, tags, filter chips |
| `caption` | 10px / SackersGothicStd / 1px tracking — size guides, care labels |
| `price` | 13px / SackersGothicStd / 1px tracking — product pricing display |

### Principles
- **Serif reads, gothic transacts**: Times New Roman names editorial content; SackersGothicStd handles all commerce interaction. These roles must not cross.
- **Gothic is always uppercase**: SackersGothicStd is not used sentence-case. Lowercase would dissolve the architectural quality of the label layer.
- **Tracking is load-bearing**: the 2px letter-spacing on navigation and button labels is not decorative — it is the primary personality gesture of the system. Do not reduce it.
- **No bold weights in the commerce layer**: SackersGothicStd-Heavy already carries visual weight via its uppercase geometry; additional bolding is not used.
- **Serif weights stay at 400**: Times New Roman display lines are always regular weight. The scale and serif character do the hierarchical work.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The system is generous at macro scale — editorial section transitions use `{spacing.3xl}` and `{spacing.4xl}` to create the white-space pause that luxury retail requires. Within the product grid, tile spacing tightens to `{spacing.sm}`–`{spacing.md}`, consistent with a catalog that wants product density without visual crowding.

### Grid & Container
- Max content width: approximately 1440px, centered
- Product grid: 4-column desktop, collapsing to 2-column tablet and 1-column mobile
- Navigation: persistent sticky header with mega-nav dropdown on desktop
- Editorial features break to full-bleed, overriding the centered container

### Whitespace Philosophy
- **White is the luxury signal**: generous whitespace between sections is not empty space — it is a deliberate statement of unhurried confidence
- **Product density is controlled**: the grid is 4 columns, not 6; breathing room between tiles is `{spacing.md}` minimum
- **Photography drives rhythm**: whitespace yields when editorial imagery demands it; the grid steps aside for full-bleed moments

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all product tiles, nav, and content blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Product tile edges, panel dividers, filter group separators |
| Strong Rule (Level 2) | `1px solid {colors.border-strong}` | Active states, selected filters, strong section rules |
| Flyout (Level 3) | `0 4px 20px` at ~8% `{colors.shadow-soft}` | Mega-nav dropdowns, cart drawer, size-selector flyout |

**Shadow Philosophy**: Mr Porter is effectively shadowless on its product surface. Like a well-designed print catalogue, depth is expressed through contrast, white space, and rule weight — not through z-axis illusion. The single shadow value appears exclusively on overlaid navigation and drawer elements; applying it to product cards or hero sections would introduce a softness inconsistent with the tailored register the brand maintains.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every structural element — buttons, inputs, product tiles, badges, filter chips |
| `pill` | 9999px | Reserved for circular icon buttons (wishlist, account avatar) only |

The system is binary and unambiguous: square or circle. There is no soft middle register. This squareness is not a UI convention — it is the digital equivalent of a sharp lapel and a clean shirt collar. Any rounded rectangle at 4–16px would read as casualwear; Mr Porter only sells tailoring.

## Components

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

### Button Variants

- **`button-primary`** — Near-black (`{colors.primary}`) fill, white text, **0px radius**, wide-tracked uppercase gothic (`{typography.button-ui}`), `14px 28px` padding. The add-to-bag action. Hover deepens to pure black.
- **`button-secondary`** — White fill, near-black text, same form. Quieter alternate action (e.g., "Save to Wishlist").
- **`button-outline`** — White fill with 1px near-black border; hover inverts to filled black. Used for editorial CTAs that need to be present but not dominant.
- **`button-ghost`** — Transparent with white text; used on dark hero sections and footer blocks.

### Cards

- **`card`** — White surface, **0px radius**, zero padding on the card container itself. Product tiles are essentially frameless — the image leads and the product name and price sit directly below in the SackersGothicStd label register.
- **`card-hover`** — Subtle light gray fill (`{colors.surface}`) on tile hover; no shadow introduced.

### Inputs

- **`input`** — White fill, near-black 1px border, **0px radius**, `12px 16px` padding. Focus tightens the border to `{colors.border-strong}` without adding a glow — maintaining the system's hard-edged discipline.

### Badges / Tags

- **`badge`** — Near-black fill, white text, **0px radius**, label-size gothic. Used for "New Season," "Exclusive," status callouts.
- **`badge-sale`** — Sale red (`{colors.accent-red}`) fill with white text — the only chromatic badge in the system.
- **`tag`** — Light gray fill, near-black text. Filter chips and category tags in their resting state. Active state inverts to near-black fill.

### Navigation

- **`nav-bar`** — White background, near-black gothic nav labels at 2px tracking (`{typography.nav-link}`), sticky on scroll. Mega-nav expands on hover with a subtle flyout shadow.

## Do's and Don'ts

### Do
- Set all editorial display lines and section headers in **Times New Roman** (`{typography.display-hero}`, `{typography.display}`) — the serif is the editorial register
- Use **SackersGothicStd-Heavy** uppercase with 2px tracking for all navigation, CTAs, product names, and UI labels (`{typography.nav-link}`, `{typography.button-ui}`)
- Keep corners at **0px radius** (`{rounded.none}`) on every button, input, tile, and badge — squareness is the design signature
- Let near-black (`{colors.primary}`) be the sole CTA color — preserve its connection to the editorial ink register
- Use sale red (`{colors.accent-red}`) only for reduced-price markers — it is a punctuation mark, not a brand color
- Separate product tiles with hairline borders (`{colors.border}`), no card shadows
- Allow full-bleed editorial photography to override the centered container — product images are never cropped or padded as thumbnails
- Apply generous whitespace at section transitions (`{spacing.3xl}`–`{spacing.4xl}`) — the editorial pause is the luxury signal

### Don't
- Don't introduce any chromatic color other than the sale red — the system is achromatic by design
- Don't round any interactive element above 0px — even 2px of rounding disconnects from the tailored aesthetic
- Don't set navigation or button labels in lowercase — SackersGothicStd is always uppercase
- Don't reduce the 2px letter-spacing on gothic UI labels — compressed gothic loses the architectural authority
- Don't apply drop shadows to product cards or page content — the system is shadowless; use hairlines and contrast
- Don't use Times New Roman for CTA copy or product metadata — serif and gothic each have strict domain ownership
- Don't introduce a third typeface for any reason — the serif/gothic split is the entire typographic system
- Don't use bold weight Times New Roman in display roles — the regular weight is the editorial standard; bold would read as tabloid, not broadsheet

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hamburger nav; hero scales down; product tile labels truncate |
| Tablet | 640–1023px | Two-column product grid; horizontal filter scroll; section nav wraps |
| Desktop | 1024–1279px | Four-column grid; sticky mega-nav; editorial features full-bleed |
| Large Desktop | ≥1280px | Max container ~1440px; generous column gutters; full editorial layout |

### Touch Targets
- Primary buttons use `14px 28px` padding — full-width on mobile for comfortable thumb reach
- Navigation links at 11px uppercase gothic get augmented tap row heights (minimum 44px)
- Product tile images are the primary tap target; the text block below adds minimal additional height

### Collapsing Strategy
- **Navigation**: persistent mega-nav → hamburger drawer on mobile; MR PORTER wordmark centered throughout
- **Product Grid**: 4 → 2 → 1 column; product image aspect ratios maintained as column width narrows
- **Typography**: Times New Roman display (`{typography.display-hero}`) scales down to approximately 32px on mobile; gothic labels (`{typography.nav-link}`) hold size with tracking preserved
- **Spacing**: editorial section gaps compress from `{spacing.4xl}` toward `{spacing.xl}`; product grid gutter holds at `{spacing.sm}` minimum

### Image Behavior
- Editorial campaign heroes run full-bleed at all breakpoints, breaking the centered container
- Product images maintain portrait aspect ratio (approximately 4:5); no rounding, no shadow
- Secondary editorial imagery sits within column constraints with hard square corners

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent / CTA: Near-Black (`{colors.primary}`) — no chromatic color
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Sale callout: Red (`{colors.accent-red}`)
- Dark surface: Near-Black (`{colors.surface-dark}`)

### Example Component Prompts

- "Create a Mr Porter product hero: full-bleed editorial photography with a 48px Times New Roman 400 headline (`{typography.display-hero}`, `{colors.ink}`) overlaid at the lower left, white canvas (`{colors.background}`) below with a single near-black CTA using `{typography.button-ui}` (11px / SackersGothicStd / uppercase / 2px tracking) at `{rounded.none}` — no gradient overlay, no shadow on the text block"
- "Build the primary add-to-bag button: near-black (`{colors.primary}`) fill, white text (`{colors.on-primary}`), `{typography.button-ui}` (uppercase, 2px tracking), **0px border-radius** (`{rounded.none}`), `14px 28px` padding; hover deepens fill to `{colors.primary-hover}` (pure black)"
- "Design a product tile: white (`{colors.background}`) surface, **0px radius**, no shadow, full-width portrait product image with square corners; below, the product designer name in `{typography.label}` (uppercase, 10px, 2px tracking) and product name in `{typography.body}` (14px SackersGothicStd), then price in `{typography.price}` (13px) — tight `{spacing.sm}` between rows"
- "Create a site navigation bar: white (`{colors.background}`) with a 1px `{colors.border}` bottom rule, MR PORTER wordmark left-aligned, navigation links in `{typography.nav-link}` (11px / SackersGothicStd / uppercase / 2px tracking / `{colors.ink}`), account and wishlist icons right — no hover color change on links, only underline on focus"
- "Build a sale badge: red (`{colors.accent-red}`) fill, white text (`{colors.on-dark}`), `{typography.label}` (10px / uppercase / 2px tracking), **0px border-radius** (`{rounded.none}`), `4px 8px` padding — position at the top-left corner of the product tile image"
- "Design a filter chip in active state: near-black (`{colors.ink}`) fill, white text (`{colors.on-dark}`), `{typography.label}` (10px / uppercase / 2px tracking), **0px radius** (`{rounded.none}`), `6px 12px` padding; resting state uses light gray fill (`{colors.surface}`) with near-black text"

### Iteration Guide

1. Start with pure white (`{colors.background}`) and near-black ink (`{colors.ink}`). There is no brand color. If you reached for a hue for the CTA or nav, replace it with `{colors.primary}` (near-black).
2. **Set editorial display text in Times New Roman** (`{typography.display-hero}`, `{typography.display}`). If it reads like UI, it's in the wrong typeface.
3. **Set all interaction text — navigation, CTAs, labels, prices — in SackersGothicStd uppercase** (`{typography.nav-link}`, `{typography.button-ui}`). If it's lowercase, it has left the system.
4. Apply `{rounded.none}` (0px) to every button, input, tile, and badge. If any element has a border-radius above 0px, the design has drifted into casualwear territory.
5. Add the 2px tracking (`{typography.button-ui}`, `{typography.nav-link}`). Compressed uppercase gothic is not Mr Porter — the wide spacing is the visual register.
6. Separate product tiles with hairlines (`{colors.border}`), not shadows. If you added a box-shadow to a card, remove it.
7. The only chromatic color permitted is sale red (`{colors.accent-red}`), and only on reduced-price markers. If anything else is colored, it violates the achromatic premise.

---

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