---
version: alpha
name: "The Row"
description: "An achromatic quiet-luxury system built on a single humanist sans-serif, a near-white canvas, and the kind of restraint that treats whitespace itself as the primary design material."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # faint off-white used for secondary section fills

  # Ink / text
  ink: "#212121"               # primary text — warm near-black from CSS var (rgb 33,33,33)
  ink-secondary: "#6a6a6a"     # secondary labels, muted nav items, captions
  ink-ghost: "#999999"         # placeholder text, disabled states, fine print

  # Brand — The Row has no chromatic accent; near-black carries all authority
  primary: "#212121"           # CTA fill, primary button — near-black, not pure
  on-primary: "#ffffff"        # text on dark CTA surface

  # Interactive states (all rgba flattened to opaque hex)
  primary-hover: "#000000"     # button hover deepens from near-black to absolute black
  text-hover: "#000000"        # was rgba(0,0,0,0.7) — Google format requires hex

  # Semantic
  error: "#f94c43"             # sale price, form validation (--product-sale-price-color)

  # Borders
  border: "#212121"            # 1px bottom-rule on inputs, button outlines, dividers
  border-subtle: "#d8d7d5"     # light hairline rules between sections (rgb 216,215,213)

  # Shadow tints
  shadow-soft: "#999999"       # was rgba(0,0,0,0.2) — modals, cart drawer

typography:
  display-hero:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.05em
  display:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.04em
  heading-section:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.03em
  heading-sub:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  body:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  nav-link:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.01em
  button-ui:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.08em
  caption:
    fontFamily: "Basic Commercial, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.02em

spacing:
  xs: 5px
  sm: 10px
  md: 16px
  lg: 20px
  xl: 50px
  2xl: 80px
  3xl: 110px

rounded:
  none: 0px
  sm: 2px           # buttons and close controls — nearly imperceptible
  pill: 9999px      # cookie-consent search and toggle switches only

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 0.08em
  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.none}"
    padding: 14px 24px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  input-focus:
    borderBottom: "1px solid {colors.border}"
    outline: "1px solid {colors.border}"

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

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 6px
    textTransform: uppercase
---

# The Row Design System

## Overview

The Row's digital presence is an exercise in negative space as a luxury signal. The canvas is absolute white (`{colors.background}`), unbroken by tint bands or section fills, and the only permanent presence on screen is a model standing in an almost-studio void — no props, no environment, no narrative distraction. The brand name appears in small, spaced letterspacing at the top of the page: `THE ROW` in `{typography.nav-link}`-weight Basic Commercial, so understated it reads as a whisper. Everything about this interface communicates that the clothes — photographed against a near-white sweep — carry all the authority and require no merchandising scaffolding.

The typographic choice is Basic Commercial (self-hosted, Roman and Bold weights), a humanist sans that sits somewhere between classic grotesque rationalism and the warmth of a printed editorial page. Where Jacquemus chooses Futura PTT for its geometric rigor, The Row chooses Basic Commercial for its organic quality — slightly variable stroke widths, a gentle inkiness in counters that recalls letterpress rather than screen rendering. At 13px with a hair of tracking, the navigation vanishes into the white. At 20px with a loose line-height of 1.75, the body copy feels read rather than scanned. The scale is deliberately compressed: nothing shouts.

Color is barely a concept here. The entire chromatic range spans `{colors.background}` (white), `{colors.ink}` (a warm near-black at rgb 33, 33, 33), `{colors.ink-secondary}` (a midgray), and `{colors.error}` (a tomato red reserved exclusively for sale prices). There is no brand hue, no seasonal accent, no hover color change that introduces new chroma. Interaction states work by opacity and line weight alone. The system's single most expressive chromatic moment is a red sale price — a small but revealing act of restraint: when the brand finally uses color, it signals reduction, not aspiration.

**Key Characteristics:**
- Absolute white canvas (`{colors.background}`) — no tinted sections, no dark commerce theme, no patterned backgrounds
- Single typeface, **Basic Commercial**, across all typographic roles — display, body, navigation, button, caption alike
- No chromatic brand accent — `{colors.ink}` near-black and white carry every CTA and structural role
- Near-zero border-radius (`{rounded.none}` on all UI elements, `{rounded.sm}` only on functional controls)
- Bottom-border-only inputs: a `1px solid {colors.border-subtle}` underline, no box or background
- Compressed uppercase button labels (`{typography.button-ui}`) at 11px with `0.08em` tracking — authority through restraint, not size
- Hairline `{colors.border-subtle}` dividers between sections — so faint they register as a breath, not a wall
- Motion as economy: `0.2s ease-in-out` on color and opacity only; no transforms, no parallax, no lift shadows on hover
- Photography always full-bleed or full-width, always against a near-white sweep backdrop — the image IS the page
- Sale price (`{colors.error}`) is the system's only chromatic departure — color appears only to signal discount
- Generous vertical rhythm: section gaps at 110px (`{spacing.3xl}`) on desktop — more fashion editorial than e-commerce

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The only page background. Not varied, not tinted — absolute white across every context.
- **Off-White Surface** (`{colors.surface}`): A faint cool step used in secondary section fills and hover states on ghost buttons.

### Ink / Text
- **The Row Ink** (`{colors.ink}`): Warm near-black, all primary text, the brand wordmark, navigation links, and CTA fill. `#212121` — perceptibly warmer than pure black, which would read as graphic rather than refined.
- **Secondary Ink** (`{colors.ink-secondary}`): Midgray for supporting labels, sub-navigation items, product metadata, and caption text.
- **Ghost Ink** (`{colors.ink-ghost}`): Lowest-contrast tier — placeholders, disabled states, fine legal copy.

### Brand Accent
- **Near-Black CTA** (`{colors.primary}`): Button fill and all primary interactive surfaces. The Row has no chromatic brand color; `{colors.ink}` does every accent job.
- **White on Dark** (`{colors.on-primary}`): Button label text on the near-black primary fill.

### Text States
- **Hover Deepening** (`{colors.text-hover}`): On link hover, near-black deepens to absolute black — a change too subtle to consciously notice, but felt.
- **Button Hover** (`{colors.primary-hover}`): CTA hover deepens from `{colors.ink}` to pure black.

### Semantic
- **Sale Red** (`{colors.error}`): `#f94c43` — the CSS variable `--product-sale-price-color`. The system's only chromatic moment; appears only on reduced price indicators.

### Borders
- **Structural Border** (`{colors.border}`): 1px rules on inputs (focus state) and primary button outlines.
- **Subtle Divider** (`{colors.border-subtle}`): Very light hairline used on section rules, resting input underlines, and content partitions.

## Typography

### Font Family
- **Primary**: `Basic Commercial`, with fallbacks: `Arial, sans-serif`. Self-hosted in two weights: Roman (400, `BasicCommercialRoman_normal_normal.woff2`) and Bold (700, `BasicCommercialBold_normal_normal.woff2`). Every typographic role uses this face.
- **Utility fallback**: Arimo (self-hosted, `arimo_n4...woff2`) — a metrically-compatible open substitute for Arial. Likely used as the accessible fallback for Arimo-supporting contexts.
- **OpenType Features**: Default; no tracked small-caps or stylistic alternates applied in CSS. Personality comes from weight and spacing, not OpenType features.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 48px — campaign editorial headers, seasonal collection openers |
| `display` | 32px — secondary feature moments, category page headings |
| `heading-section` | 20px — main section titles, editorial subheadings |
| `heading-sub` | 16px / weight 700 — product card names, list group headers |
| `body-large` | 20px / line-height 1.75 — editorial paragraphs, expanded descriptions |
| `body` | 14px — product descriptions, form labels, running copy |
| `nav-link` | 13px — desktop top navigation, footer link lists |
| `button-ui` | 11px / uppercase / 0.08em tracking — CTA and action labels |
| `caption` | 10px — size selectors, color swatch labels, legal fine print |

### Principles
- **Single-face discipline**: Basic Commercial alone, across every typographic role. No contrasting serif, no monospace code block, no display alternative.
- **Weight as information**: only two weights deployed — Regular (400) for reading, Bold (700) for emphasis on headings and utility labels. No intermediate weights.
- **Tracking as status**: `0.08em` on button labels and `0.05em` on display type telegraphs formality without requiring bold. Body and nav run tighter — tracking is a role signal, not a blanket setting.
- **Size restraint**: 11px buttons, 13px navigation, 10px captions — The Row trusts imagery and space over type size to command attention.
- **Capitalize with purpose**: `text-transform: uppercase` on CTAs and badge labels only. Editorial body and navigation always sentence case.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 5px (the site's most common small increment is 5px / 8.75px, not a standard 4px or 8px grid).

The Row's pages breathe at an editorial pace. Campaign section gaps run to 110px (`{spacing.3xl}`) on desktop. Product grids maintain generous gutters. The spacing scale is intentionally wide — proximity would feel commercial; distance communicates value.

### Grid & Container
- Max content width: approximately 1500–1800px at large breakpoints, with interior grid gutters around 20px
- Desktop product grid: typically 3–4 columns, clean equal gutters, no card chrome
- Hero sections: full-bleed photography (model against white sweep), type overlaid with near-invisible contrast
- Navigation: flat horizontal bar; THE ROW wordmark centered; left nav (Women, Men, Handbags, Sale, etc.) and right utilities (Search, Stores, News, Login, Bag)

### Whitespace Philosophy
- White space is the medium, not the absence of design — sections breathe rather than stack
- Photography-first: the product image occupies the full viewport; UI elements orbit at the edges
- No decorative chrome between sections — no rule-fills, no color alternation, no background bands

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every page surface — the entire site is categorically flat |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting inputs, light section rules |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` + `outline: 1px solid {colors.border}` | Input focus state |
| Button Outline (Level 1) | `1px solid {colors.border}` | Secondary button border, primary button border |
| Modal / Cart (Level 3) | `box-shadow: 0 26px 80px {colors.shadow-soft}` | Cart drawer, modal overlay |

**Shadow Philosophy**: The Row uses shadow only to separate floating layers (cart drawer, modal overlays) from the page surface. Every product card, every content section, every navigation element rests flat. The brand's physical garments have sculptural depth; the digital stage must not compete with it.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs, panels, image frames — all primary UI |
| `sm` | 2px | Close buttons, functional toggles — nearly imperceptible |
| `pill` | 9999px | Cookie consent search input and cookie toggle switches only |

The system is effectively square. The 2px radius on functional controls is barely a softening — more a concession to pixel-rendering than an intentional language. Buttons, cards, and inputs are hard-cornered. The Row's aesthetic is architectural: sharp angles, clean perimeters.

## Components

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

### Button variants
- **`button-primary`** — `{colors.primary}` fill (near-black), `{colors.on-primary}` white text, `{rounded.none}`, 11px Basic Commercial uppercase at `0.08em` tracking, `1px solid {colors.border}` outline. Hover deepens to `{colors.primary-hover}`. The system's primary CTA — "Add to Cart", "Subscribe".
- **`button-secondary`** — White (`{colors.background}`) fill, `{colors.ink}` text, same geometry and 1px border. Hover fills `{colors.surface}`. Used for secondary actions — "Save to Wishlist", "Notify Me".

### Cards
- **`card`** — Flat white surface, no border, no shadow, `{rounded.none}`. Product photography sits edge-to-edge; `{typography.heading-sub}` name text and `{typography.body}` price appear below with minimal padding. Cards are presentational frames, not chrome containers.

### Inputs
- **`input`** — White fill, `border-bottom: 1px solid {colors.border-subtle}` only, `{rounded.none}`. 14px Basic Commercial Regular. Focus switches the underline to `{colors.border}` and adds a `1px solid` outline — no background change, no glow, no box-shadow.

### Badges / Tags
- **`badge`** — No fill, 10px uppercase Basic Commercial in `{colors.ink-secondary}`. Absolute-positioned over product tiles for "NEW", "SALE" labels — typographic-only, no chip background.

### Navigation
- **`nav-bar`** — White background, `{colors.ink}` text, `{typography.nav-link}` (13px, `0.01em` tracking). THE ROW wordmark centered in spaced tracking. Link hover transitions `color` from `{colors.ink}` to `{colors.text-hover}` in `0.2s ease-in-out`. No underline animation, no background change — motion is opacity and color only.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the only canvas — never introduce tinted bands, section fills, or dark-mode variants
- Keep all UI elements at `{rounded.none}` — buttons, cards, inputs, image frames, modals are all square-cornered
- Use Basic Commercial for every typographic role — no secondary face, no display substitute
- Uppercase CTAs and badges only — editorial and navigation copy stays sentence case
- Apply `{typography.button-ui}` (11px, 0.08em tracking, uppercase) to every action label — do not increase size for emphasis
- Let photography carry visual weight — position type at the periphery; never overlay text on complex image regions
- Use `{colors.error}` exclusively for sale and reduced-price signals — never as a general accent or hover state
- Animate only via color and opacity (`0.2s ease-in-out`) — no transforms, no scale lifts, no parallax

### Don't
- Don't introduce a chromatic brand accent — `{colors.ink}` near-black is the only accent color
- Don't add box-shadows, hover lifts, or card borders — every surface is flat except floating drawers/modals
- Don't round corners beyond `{rounded.sm}` (2px) on any designed element — the 2px is functional, not stylistic
- Don't increase type weight beyond 700 or introduce a condensed or display variant of Basic Commercial
- Don't use `{colors.error}` for anything other than price reduction — color as attention mechanism undermines the system's restraint
- Don't tighten line-height below 1.5 for body copy — the generous rhythm is an explicit quality signal
- Don't use `{colors.ink-ghost}` for interactive text — reserved for placeholders and disabled/fine-print only
- Don't introduce decorative rules, ornamental dividers, or texture — `{colors.border-subtle}` hairlines are the only structural marks

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 425px | Single-column; hamburger nav; hero type ~28px; bottom nav utilities |
| Mobile | 425–767px | Single-column product grid; nav collapsed; spacing scale compressed |
| Tablet | 768–1023px | Two-column product grid; nav still collapsed; wider hero padding |
| Desktop | 1024–1499px | Full horizontal nav visible; 3-column product grid; section gaps at full scale |
| Large Desktop | ≥ 1500px | 4-column grid; max container ~1800px; full 110px vertical section gaps |

### Touch Targets
- Primary buttons use 14px vertical padding — effective target height around 44–48px
- Navigation links on mobile render at 20px+ with generous surrounding tap zones
- Product tiles are fully tappable card regions, not just the title text
- Input fields expand to full-width on mobile with minimum 44px effective height

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger drawer on mobile; full-screen slide-in panel with flat links in `{typography.nav-link}` style
- **Type scale**: display-hero scales from 48px toward 28–32px on mobile; body holds at 14px; captions may reduce to 10px
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; equal gutters maintained proportionally
- **Spacing**: 110px vertical gaps compress to 50–60px on mobile while preserving breathing-room character

### Image Behavior
- Campaign photography is always full-bleed — no max-width caps on hero images
- Product tile images maintain consistent portrait aspect ratio across breakpoints
- Image frames are always `{rounded.none}` — photography never clips to a rounded container
- White-sweep studio imagery: the near-white background of photography blends seamlessly into `{colors.background}`, creating no visual border between image and page

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: The Row Ink (`{colors.ink}`)
- CTA fill: Near-Black (`{colors.primary}`)
- CTA text: White (`{colors.on-primary}`)
- Secondary text: Midgray (`{colors.ink-secondary}`)
- Section divider: `{colors.border-subtle}`
- Input border (resting): `{colors.border-subtle}`
- Input border (focus): `{colors.border}`
- Sale / error: `{colors.error}`

### Example Component Prompts

- "Build a full-bleed campaign hero on `{colors.background}` white. Center a model image against a white studio sweep — the image should fill the viewport height. Position `{typography.display-hero}` (48px Basic Commercial, `letter-spacing: 0.05em`) as a page-level heading, sentence case, in `{colors.ink}`. No overlay, no tint, no decorative element. Navigation floats at the top in `{typography.nav-link}` 13px with THE ROW wordmark centered."

- "Create a primary CTA button: `{colors.primary}` fill (near-black `#212121`), `{colors.on-primary}` white text, `{typography.button-ui}` (11px Basic Commercial, `text-transform: uppercase`, `letter-spacing: 0.08em`), `border-radius: 0`, `padding: 14px 24px`, `border: 1px solid {colors.border}`. Hover deepens fill to `{colors.primary-hover}` (#000000) via `0.2s ease-in-out` on background-color. No scale, no lift, no shadow."

- "Design a product card: white (`{colors.background}`) surface, `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge at top (white-sweep studio photo blends with page). Below: `{typography.heading-sub}` product name in `{colors.ink}`, then `{typography.body}` price in `{colors.ink-secondary}`. No card chrome — frame, not container."

- "Build a desktop navigation bar: white background. THE ROW wordmark centered in `{typography.nav-link}` spaced tracking, `{colors.ink}` fill. Left nav items (Women, Men, Handbags, Sale, Home, Collections, Guests) and right utilities (Search, Stores, News, Login, Bag) — all in `{typography.nav-link}` 13px. Hover transitions `color` to `{colors.text-hover}` in `0.2s ease-in-out`. No underline, no background highlight."

- "Create a newsletter email input: white fill, no visible border on three sides, `border-bottom: 1px solid {colors.border-subtle}`, `border-radius: 0`, `{typography.body}` 14px Basic Commercial, `{colors.ink}` text, `{colors.ink-ghost}` placeholder. Focus: bottom border updates to `{colors.border}` + `outline: 1px solid {colors.border}`. No glow, no background change, no box-shadow. Pair with a `{components.button-primary}` Subscribe button to the right."

- "Render a product grid: 4-column layout on desktop, `{spacing.md}` gutters, white surface throughout. Each tile is a `{components.card}` — zero chrome, portrait image top, product name in `{typography.heading-sub}` and price in `{typography.body}` below. Sale items show price in `{colors.error}` only. No hover elevation — image may fade to 0.9 opacity via `0.2s ease-in-out` as the only hover signal."

### Iteration Guide

1. Start on absolute white (`{colors.background}`) — no tints, no dark sections. If any element carries a background color other than white, a black CTA, or a model photograph, remove it.
2. Set all type in Basic Commercial. If a second typeface appears, replace it. One face, two weights only.
3. Apply `border-radius: 0` to every UI element except functional toggles. If any corner is visibly rounded on a button, card, or input, flatten it.
4. Limit motion to `transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out`. Remove any transform, translate, or scale animation.
5. Confirm CTAs use `{typography.button-ui}`: 11px, uppercase, `0.08em` tracking. Do not increase font-size for prominence — that is not this brand's mechanism.
6. Check that `{colors.error}` appears only on sale/reduced prices. If it appears elsewhere, replace with `{colors.ink-secondary}` or remove.
7. Verify all photography uses a white-sweep studio backdrop so images bleed invisibly into `{colors.background}`.
8. Enforce section rhythm: desktop vertical gaps between major sections should approach `{spacing.3xl}` (110px). If sections feel cramped, add air — whitespace is the luxury signal.

---

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