---
title: "Reformation design system"
variant: extended
source: https://www.thereformation.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/thereformation-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Reformation · Design System

> Editorial fashion, framed by restraint.

**Theme:** light · **Industry:** fashion · **Source:** https://www.thereformation.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Reformation pairs a restrained black-and-white interface with immersive fashion photography and concise editorial copy. The homepage alternates full-bleed campaign imagery with compact category and product grids, then closes on a practical, pale footer.

## North star

Let campaign photography lead, while a quiet black-and-white interface keeps shopping navigation and product information immediate.

## Overview

The page uses white as its continuous canvas, with black navigation, product text, and solid CTA buttons providing crisp contrast. A pale gray footer marks the main shift in surface colour; the warm beige, brown, and burgundy seen in the first viewport belong to campaign photography rather than the interface palette. Newtime R Book carries compact product details and body copy, while Newtime R handles navigation and controls. TimesNow gives campaign headlines a refined editorial contrast. The layout moves between wide, full-bleed campaign frames and four-column category or product rows, keeping merchandise visible without adding decorative UI. Consistent white gutters and restrained spacing separate the image-led blocks. Text overlays sit directly on photography, while product names and prices return to plain black on white. Buttons are square-cornered black rectangles with white labels. The overall effect depends on strong photography, clear type hierarchy, and flat, uncluttered surfaces rather than colour accents or ornamental effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant canvas for navigation, product grids, and page sections; also appears in reversed text and button labels. |
| Ink | `#000000` | `--color-ink` | neutral | Primary navigation and product text, footer typography, and the solid background of primary buttons. |
| Gradient Mist | `#bfbfbf` | `--color-gradient-mist` | semantic | Measured only in gradient-related noise; not a defining visible interface colour. |
| Soft Fog | `#f7f7f7` | `--color-soft-fog` | surface | Pale footer band and subtle input surface, distinguishing the closing utility area from the white shopping canvas. |
| Rule Gray | `#acacac` | `--color-rule-gray` | neutral | Subtle footer and form border detail; use for hairlines rather than prominent dividers. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Fog) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#acacac` (Rule Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Newtime R Book | `--font-body` | webfont | 400 | Default body, product names and prices, and small supporting copy. | Inter |
| Newtime R | `--font-display` | webfont | 400, 500 | Navigation, section headings, buttons, and interactive labels. | DM Sans |
| TimesNow | `--font-timesnow` | webfont | 400 | Large campaign headlines and editorial display copy. | Cormorant Garamond |

- **Newtime R Book:** Regular weight with compact, readable sentence case; avoid heavy emphasis.
- **Newtime R:** Mostly regular weight; navigation and buttons use slightly tight tracking and lowercase labels.
- **TimesNow:** Regular serif display; use natural casing and generous visual contrast against sans-serif UI.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.3 | 0 | — | TimesNow | Large serif campaign headline over full-bleed hero photography. |
| h2 | 32px | 400 | 0.75 | 0.04em | — | Newtime R | Editorial section heading or prominent campaign copy. |
| h3 | 18px | 400 | 1.3 | 0 | — | Newtime R | Category and smaller feature headings. |
| body | 14px | 400 | 1.3 | 0 | — | Newtime R Book | Product details, descriptions, and general page copy. |
| caption | 11px | 400 | 1.2 | 0 | — | Newtime R Book | Small supporting labels and fine-print details. |
| button | 16px | 400 | 1.1 | -0.01em | — | Newtime R | Primary shopping and form action labels. |
| nav | 16px | 400 | 1.1 | -0.01em | — | Newtime R | Main category navigation and header utility links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 12, 16, 20, 24, 40 px.
- Section rhythm 58px · element gap 8px · card padding — · max content width 1392px.

A wide desktop composition uses a measured maximum content width of 1392px, with the header spanning the page and campaign sections running full bleed. Category and product content appears in four-column grids; editorial campaigns use broad image panels with overlaid copy. The measured base spacing is 8px, with a comfortable density and clear separation between major blocks. Alignment is mostly left-led, while product grids keep captions directly beneath imagery.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.213s ease-in-out` on interactive elements.

The interface is predominantly flat: no measured shadows or rounded component radii. White space and shifts between white and pale gray separate sections, while fine gray rules appear in the footer. Black buttons provide the strongest UI emphasis without relying on raised effects.

## Imagery

The page is driven by fashion photography, not illustration or 3D. Full-width campaign images show models in styled environments, with short white headlines positioned over the image. Category and merchandise photography is cleaner and more evenly lit, presented in consistent grid cells against light backgrounds. The warm tones in the hero and other campaign panels come from the photographs rather than interface accents.

## Components

### Announcement strip

A narrow black bar sits above the white navigation, carrying a short white shipping message.

### Store navigation

A white horizontal header pairs lowercase black category links on the left with search, sustainability, account, and bag utilities on the right.

### Campaign hero

A full-bleed fashion image carries an oversized white brand wordmark and a TimesNow headline with a short underlined link.

### Category tiles

Four image-led category links form a compact row, with small lowercase labels beneath each image.

### Product grid

Four-column merchandise rows use product photography, black name and price text, and a square-cornered black show more button.

### Search prompt

A pale search field overlays the lower-right edge of the hero, with a search icon and concise prompt.

### Footer signup

A pale gray two-column footer combines a large black wordmark and sustainability statement with email signup and utility links.

### Measured component styles

- **Primary button** (“show more”): background #000000 · text #ffffff · border 1px solid #000000 · radius 0px · padding 0px 40px · 400 14px Newtime R
- **Link** (“Justina Silk Dress $378”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Newtime R
- **Input**: background #f5f5f5 · text #000000 · radius 0px · padding 0px 0px 0px 24px · 300 16px Newtime R
- **Navigation item** (“Read our latest Sustainability Report. R”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Newtime R Book

## Do

- Keep the shopping canvas white and visually quiet.
- Use full-bleed campaign photography for major editorial moments.
- Set campaign headlines in an elegant serif display face.
- Use compact sans-serif navigation and product details.
- Keep category and merchandise layouts in four-column rows.
- Use square black buttons with white labels.
- Reserve pale gray for the footer and understated form surfaces.

## Don't

- Do not treat photographic beige or burgundy as interface accents.
- Do not add rounded cards or decorative shadows.
- Do not clutter campaign images with multiple controls.
- Do not replace the simple product captions with oversized copy.
- Do not introduce bright accent colours into the interface.
- Do not use heavy, uppercase navigation styling.

## Agent prompt

Build a new fashion-commerce page using Reformation’s restrained editorial system. Use Gallery White (#ffffff) as the dominant canvas and Ink (#000000) for navigation, product copy, and square-cornered primary buttons. Set major campaign headlines in a TimesNow-like serif and use a clean Newtime R-like sans for navigation, controls, and product details. Let large fashion photographs carry the visual character; keep image colours photographic rather than turning them into UI accents. Alternate full-width campaign blocks with compact four-column category or product grids, leaving clear white separation between sections. Use Soft Fog (#f7f7f7) sparingly for a footer or input surface and Rule Gray (#acacac) only for subtle hairlines. Keep the page flat, avoid shadows and rounded cards, and make labels concise and lowercase where appropriate.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with overlaid wordmark and copy. | editorial campaign, image-linked CTA | white serif headline, oversized wordmark, overlay search field |
| 2 | category-nav | Four image-led category links in a single row. | visual category browsing, direct category links | four-column grid, small labels below images |
| 3 | feature-split | Two broad campaign images side by side with copy overlaid. | occasion-led discovery, image-linked shopping | paired photography, serif overlay heading |
| 4 | product-grid | Four-column product row with captions and centered show-more control. | product discovery, show more | product photography, name and price captions, black CTA |
| 5 | feature-split | Full-width paired campaign photography with overlaid text. | back-in-stock promotion, image-linked shopping | large campaign images, white overlay copy |
| 6 | product-grid | Four-column product row with captions and show-more control. | product discovery, show more | merchandise thumbnails, black name and price text, black CTA |
| 7 | footer | Pale gray footer in two columns, with brand copy and signup utilities. | email signup, policy and help links | large black wordmark, gray form surface, thin rules |

## Source CSS custom properties (selected)

```css
--ref-font-display: "TimesNow", Times, serif;
--ref-font-ui: "Newtime R", Helvetica, Arial, sans-serif;
--ref-font-sans-book: "Newtime R Book", Helvetica, Arial, sans-serif;
--gle_font_family: 'Newtime R',sans-serif;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/thereformation-com