# The Row · Design system migration spec

> Source: https://www.therow.com  ·  Curated by OpenDesign  ·  en

> The site is a masterclass in restraint, using negative space and monochrome simplicity to signal extreme luxury.

## 1. Identity DNA

The Row's design system operates like a quiet gallery where the clothes are the only art. Every decision is made to recede, to create a space of absolute focus where the product exists without visual competition. This is luxury expressed not through addition, but through deliberate subtraction.

**One-liner:** Quiet luxury fashion e-commerce with extreme restraint
**Keywords:** Luxury · Minimalism · Fashion · High-End · Refined
**Analogy:** A quiet gallery where the clothes are the only art

## 2. Color

The color system is a strict monochrome discipline: black, white, and a narrow range of functional grays. This isn't a limitation but a core principle, using absence of hue to signal ultimate refinement.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#1C1B1B` | secondary text |
| `--muted` | `#6A6A6A` | placeholder |
| `--muted-soft` | `#212121` | weak hint |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strict monochrome with extreme restraint

The rule is absolute: color is never decorative, only structural.

## 3. Typography

Typography is set in a clean transitional serif, chosen for its quiet authority rather than expressive flair. The scale is deliberately small and understated, with all text set in sentence case or title case and no bold weights used anywhere.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.0 | 400 | 2px | Brand logo and main headlines |
| body | 13px | 1.5 | 400 | 0 | All UI text, navigation, and body copy |

**Type rules:**
- All text is sentence case or title case
- No bold weights are used anywhere
- Typography is small and understated

## 4. Spacing

Rhythm is defined not by pattern, but by generous, breathing whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 110 / 150 px
- **Rhythm:** Generous whitespace between elements, creating a sense of luxury

## 5. Surfaces

Surfaces are rigorously flat, devoid of shadows or depth cues. Borders are minimal and functional—a consistent 1px solid black line that defines inputs and structure without ornamentation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid black, consistently used for inputs and structural elements

## 6. Layout

The layout skeleton is a minimal grid built around a single, powerful element: full-bleed, edge-to-edge photographic heroes. This structural choice places the product as the sole focal point, with all supporting navigation and text yielding to the imagery.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Minimal grid, heavy use of full-width hero imagery

## 7. Motion & Interaction

Motion philosophy is one of ghosting in and out, not of arriving. Transitions are smooth but brief, limited to 0.2s opacity and color fades that acknowledge interaction without performing it.

- **Durations:** micro 200ms · small 200ms · medium 300ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Subtle color transitions on hover
  - Opacity fades for focus states

- **Hover:** Color transitions to a slightly lighter gray
- **Click:** Immediate state change
- **Transition:** All properties transition smoothly at 0.2s
- **Keyboard:** Standard focus outlines implied but not visually heavy

## 8. Voice & Don'ts

The editorial voice is quiet, confident, and exclusive. Headlines are short and declarative; calls to action are subtle text links or simple arrows, avoiding any promotional shouting.

- **Tone:** Quiet, confident, exclusive
- **Headline style:** Short, declarative, no exclamation
- **CTA style:** Subtle, often just a text link or simple arrow
- **Avoid:** Shouting / Promotional language / Bright colors / Heavy ornamentation / Dense text blocks

### Don'ts
- ❌ Don't use bold typography — screenshot shows all text is regular weight
- ❌ Don't add drop shadows or heavy depth — screenshot shows completely flat surfaces
- ❌ Don't use bright accent colors — screenshot shows a strict monochrome palette
- ❌ Don't use rounded corners — screenshot shows perfectly sharp edges
- ❌ Don't clutter the interface — screenshot shows vast empty whitespace
- ❌ Don't use decorative borders — screenshot shows only functional underlines

What is deliberately omitted—bold type, rounded corners, bright accents, heavy ornamentation—defines the system as much as what remains.

## System Prompt (paste into AI tool)

```
This is a luxury fashion e-commerce site defined by extreme minimalism and restraint. The visual language is strictly monochrome, using only black, white, and a few shades of gray. The typography is a clean transitional serif, used at a small scale and regular weight to convey quiet confidence. The layout relies on massive whitespace and full-bleed photography, with no visual clutter. Critical constraints include: no bold text, no rounded corners, no decorative elements, and no bright colors. Interactions are subtle, limited to smooth color fades.
```
