---
version: alpha
name: Reformation
description: Stark black-and-white editorial retail where two colors do everything — self-hosted Newtime R carries display through caption, negative space is the art direction, and sustainable fashion wit lives entirely in the words, never the chrome.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f2f2f2"           # was rgba(242,242,242,0.8) — Google format requires hex; search input fill
  surface-warm: "#f5f0eb"      # warm blush tint seen in hero imagery and promo band /* estimated */
  surface-dark: "#1a1a1a"      # near-black for dark promo banners /* estimated */

  # Ink / text
  ink: "#000000"               # pure black — the dominant text and CTA color
  ink-secondary: "#6b6b6b"     # secondary labels, captions, metadata /* estimated */
  on-dark: "#ffffff"           # text on black surfaces and the dark nav

  # Accent — Reformation uses no chromatic brand hue; black IS the accent
  primary: "#000000"           # CTA fill, active states, focus ring
  on-primary: "#ffffff"        # text on black CTA

  # Interaction / state
  accent-hover: "#333333"      # CTA hover darkens slightly /* estimated */
  link-hover: "#6b6b6b"        # inline link hover dims to gray /* estimated */

  # Borders
  border: "#e5e5e5"            # hairline dividers and card edges /* estimated */
  border-strong: "#000000"     # button outline and active input border

  # Shadow tints (opaque approximations for elevation table)
  shadow-soft: "#000000"       # was rgba(50,50,93,0.1) on Stripe card form — Google format requires hex
  shadow-card: "#c7c5c7"       # rgb(199,197,199) — dropdown/card lift shadow

  # Status / semantic
  error: "#d32f2f"             # form validation red /* estimated */
  success: "#388e3c"           # confirmation green /* estimated */
  focus-ring: "#000000"        # 1px solid black focus outline — brand consistent

typography:
  display-hero:
    fontFamily: "TimesNow, Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.3
    letterSpacing: -0.5px
  display:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 1.28px
  heading-section:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Newtime R Book, Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "Newtime R Book, Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.64px
  body-tight:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.71
    letterSpacing: 0.56px
  nav-link:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.14px
  caption:
    fontFamily: "Newtime R Book, Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  caption-small:
    fontFamily: "Newtime R, Georgia, Times New Roman, Times, serif"
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.09px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 58px
  5xl: 74px

rounded:
  none: 0px
  badge: 2px        # pill badges on product cards
  tab: 3px          # filter / tab indicator underline radius
  pill: 20px        # cookie / tag chip pills

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: "1px solid {colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    textColor: "{colors.link-hover}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 4px 16px
    border: "0px 0px 1px solid {colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.focus-ring}"

  input-search:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 24px
  input-search-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.focus-ring}"

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.badge}"
    padding: 2px 6px

  tag-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

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

  modal:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
---

# Reformation Design System

## Overview

Reformation's site distills sustainable fashion into its most radical visual proposition: two colors and a great deal of empty space. The canvas is pure white (`{colors.background}`) and the ink is pure black (`{colors.ink}`) — no chromatic brand accent anywhere, no blush-pink brand color, no nature-green sustainability palette. The brand trusts that restraint is the most articulate statement about sustainability it can make, and lets the wit and warmth live in the copy instead of the chrome.

The typographic engine is Newtime R (with TimesNow SemiLight for display moments) — a refined old-style serif that splits the difference between editorial magazine and boutique label. Unlike its minimal retail contemporaries who reach for neo-grotesque precision (Maison Neue, Helvetica) as a signal of seriousness, Reformation chose a serif to stay warm and literary. The face runs at weight 400 for nearly everything, with 600 and 700 reserved for structural emphasis, and a distinctive lowercase text-transform on certain UI labels that reads as deliberate and self-aware rather than casual. Negative letter-spacing tightens the tight-leading display moments; a faint positive track opens up the body copy.

Every container corner is squared off. Buttons, inputs, product cards, image frames — 0px radius throughout. The only exceptions are the smallest utility objects: 2px on product badges, 3px on filter tabs, 20px on cookie chips. This is not a binary system by accident; it matches the brand's overall commitment to directness. Nothing is softened, nothing is rounded to make you more comfortable, and the product photography — earthy, sun-drenched, often shot against warm Mediterranean or Californian light — provides all the warmth and friendliness the brand needs without the chrome doing any work.

**Key Characteristics:**
- Two-color system: `{colors.background}` white canvas + `{colors.ink}` pure black accent — no chromatic hue anywhere in the brand chrome
- Self-hosted **Newtime R** and **TimesNow** serifs — old-style warmth that signals editorial and literary, not corporate precision
- **Zero border-radius on structural elements** (`{rounded.none}`) — buttons, cards, inputs, image frames all squared off; only utility pills (badges, tag chips) carry radius
- Lowercase text-transform on select UI labels — a witty, deliberate choice that reads as confident informality
- Tight negative letter-spacing on large display type (`{typography.display}` at 1.28px positive); tight `-0.16px` on small body-tight scale
- Negative space is the art direction — photography does the talking, chrome steps back
- 8px-based spacing scale with generous section rhythm (`{spacing.5xl}` = 74px between major bands)
- Flat elevation: hairline borders and whitespace handle separation; shadows appear only on dropdowns and transient overlays
- Motion is measured and considered: `0.107s ease-out` for card interactions, `0.213s ease-in-out` for link opacity
- Product cards are squared image frames with quiet type beneath — no card chrome, no radius, no resting shadow
- Font weight discipline: 400 for body/nav, 500 for CTAs, 600–700 for structural headings only
- "Being naked is the #1 most sustainable option" — the brand voice is embedded in copy, not in visual ornamentation

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Effectively the entire site sits on pure white — the absence of any tinted background IS the brand position.
- **Soft Gray** (`{colors.surface}`): A near-transparent fill (flattened from rgba 242/0.8) used in the search input field — the only surface variation the system needs.
- **Warm Blush** (`{colors.surface-warm}`): Occasionally appears in editorial hero bands and promo strips, borrowed from the sun-drenched photography palette.
- **Near-Black Surface** (`{colors.surface-dark}`): Dark promotional banners and announcement bars.

### Ink / Text
- **Pure Black** (`{colors.ink}`): Headings, body, nav, CTAs, border-strong, and the focus ring. A single color does everything a full palette of accent colors would normally handle.
- **Gray Secondary** (`{colors.ink-secondary}`): Captions, metadata, and the dimmed hover state.
- **White-on-Dark** (`{colors.on-dark}`): Text on black surfaces and promotional dark strips.

### Accent
- **Black-as-Accent** (`{colors.primary}`): There is no chromatic brand color. Black and its negative space serve every accent function — CTA fill, active states, border emphasis. The single most distinctive brand decision in the palette.

### Borders & Shadows
- **Hairline** (`{colors.border}`): Structural separation — card edges, input bottom borders, dividers.
- **Strong Border** (`{colors.border-strong}`): Outlined button and focused input borders — pure black.
- **Soft Shadow** (`{colors.shadow-soft}`): Rare modal and Stripe card-form shadow (flattened from rgba — original was 10% black).
- **Card Shadow** (`{colors.shadow-card}`): The subtle dropdown lift, rgb(199,197,199).

### Status & Focus
- **Error Red** (`{colors.error}`): Form validation text only.
- **Success Green** (`{colors.success}`): Confirmation states only.
- **Focus Ring** (`{colors.focus-ring}`): Pure black 1px solid outline — the system stays monochrome even in accessibility states.

## Typography

### Font Family
- **Display**: `TimesNow` (SemiLight), with fallback `Times New Roman, Times, serif`. A refined editorial serif reserved for hero moments — carries the literary, magazine-editorial register.
- **Primary**: `Newtime R` and `Newtime R Book`, with fallbacks `Georgia, Times New Roman, Times, serif`. The workhorse carrying navigation, body, buttons, captions — Book weight for reading text, regular for UI labels.
- **Weights used**: 300 (TimesNow display), 400 (body, nav), 500 (CTA), 600 (section headings), 700 (emphasis)
- **Notable transforms**: `text-transform: lowercase` on certain UI labels — the brand's most self-aware typographic gesture

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 48px / 300 / TimesNow — editorial hero headlines, campaign statements |
| `display` | 32px / 400 / Newtime R / 1.28px tracking — section titles, feature headings |
| `heading-section` | 22px / 600 — sub-section headings, product category titles |
| `heading-sub` | 16px / 700 — structural inline headings |
| `body-large` | 18px / 400 / Book — introductory and editorial body copy |
| `body` | 16px / 400 / Book / 0.64px — standard body copy, form labels |
| `body-tight` | 16px / 400 / -0.16px — tight-leading body in dense UI contexts, lowercase UI labels |
| `button-ui` | 14px / 500 / 0.56px — CTA button text |
| `nav-link` | 14px / 400 / 0.14px — primary navigation items |
| `caption` | 11px / 400 / Book — product metadata, helper text |
| `caption-small` | 9px / 400 / -0.09px — the smallest legal/tag text |

### Principles
- **The serif is the warmth.** In a field of neo-grotesque minimalism, Newtime R's old-style character is what keeps the restraint from reading as cold.
- **Lowercase as wit.** `text-transform: lowercase` on select UI labels reads as confident informality — the same register as the brand copy.
- **Weight discipline.** 400 is the default; 500 enters only for CTAs; 600–700 for structural headings. The system rarely raises its typographic voice.
- **Letter-spacing polarity.** Large display type uses positive tracking (editorial openness); small UI text uses negative tracking (dense precision) — they don't conflict because they never coexist at the same scale.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block. Base unit: 4px (though the dominant rhythm is 8px multiples). Vertical section rhythm is generous — `{spacing.5xl}` (74px) between major editorial zones; component internals stay measured at `{spacing.md}`–`{spacing.xl}`.

### Grid & Container
- Max content width: ~1280px, centered, with full-bleed editorial photography breaking the container
- Primary pattern: a squared product grid (2–3 columns) of full-width image cards with quiet serif type beneath
- Hero is typically a full-bleed campaign image with a short editorial headline in TimesNow SemiLight and a single black CTA
- Narrative pages (sustainability, brand story) run a single editorial column with generous left/right margin

### Whitespace Philosophy
- **Negative space is the medium.** The page is structured around what isn't there — white margins are not empty, they are the design.
- **Photography-forward.** Earthy, warm imagery carries the emotional register; the UI chrome provides nothing but legibility.
- **Rigor without stiffness.** Squared corners and tight grids signal precision; the serif typeface stops it reading as cold.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow — pure white surface | The default for the entire site |
| Hairline (Level 1) | `1px solid {colors.border}` | Input bottom borders, card edges, structural dividers |
| Dropdown (Level 2) | `rgb(199,197,199) -3px -3px 5px -2px` + `0px 0px 12px 2px` | Navigation flyout menus, floating filter panels |
| Modal (Level 3) | `rgba(50,50,93,0.1) 0px 7px 14px 0px` | Lightboxes, the email-capture modal |
| Focus Ring | `1px solid {colors.focus-ring}` (pure black) | Accessibility focus — monochrome consistent with brand |

**Shadow Philosophy**: Reformation is essentially flat. Elevation is not used for hierarchy or brand feel — it appears only where the functional need is clear (a floating dropdown, a transient modal). Even those shadows are light and cool. The brand communicates depth and warmth through photography, not layer blur.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs, cards, image frames — everything structural |
| `badge` | 2px | Product status badges (e.g. "Low stock"), nearly imperceptible softening |
| `tab` | 3px | Filter tab indicator pill — the smallest softening that reads as a rounded UI element |
| `pill` | 20px | Cookie consent chips and filter tag pills — fully soft, clearly distinct from structure |

The system is effectively binary: structural elements (buttons, cards, inputs, images) are hard-cornered at 0px, while small utility objects (tags, cookie chips) use a pill that signals their transient or removable nature. The gap between 3px and 20px means there is no mid-range radius confusion in the system.

## Components

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

### Buttons
- **`button-primary`** — Pure black (`{colors.primary}`) fill, white text, 0px radius, `12px 16px` padding. The CTA — no radius, no shadow, just a sharp black rectangle. Hover transitions to `{colors.accent-hover}`.
- **`button-outline`** — White fill, black text, `1px solid {colors.border-strong}` outline, 0px radius. Same weight as the primary in visual footprint, different register.
- **`button-ghost`** — Text-only link style, `{typography.nav-link}`, no fill, no padding. Hover dims to `{colors.link-hover}`.

### Cards
- **`card`** — White surface, 0px radius, no resting shadow. Product cards are full-width squared image frames with quiet serif type beneath. The hover state is a filter/opacity transition on the image (`0.107s ease-out`), not a card lift.

### Inputs
- **`input`** — White fill, bottom-only `1px solid {colors.border-strong}` (not a full box border), 0px radius, minimal `4px 16px` padding. The bottom-border-only treatment is the Reformation-specific typographic gesture — an underline, not a box.
- **`input-focus`** — Full 1px solid black box border appears on focus; `{colors.focus-ring}` keeps the system monochrome.
- **`input-search`** — `{colors.surface}` fill, no border, left padding for the search icon, 0px radius.

### Badges & Tags
- **`badge`** — Black fill, white text, 2px radius — barely a rounding. Used for product status indicators ("New", "Low stock").
- **`tag-pill`** — Gray surface, black text, 20px full pill — clearly a removable/filter chip, visually distinct from structural elements.

### Navigation
- **`nav-bar`** — White, pure black type in `{typography.nav-link}` (14px / 400). Link opacity fades `0.213s ease-in-out` on hover — the most prominent motion in the system.

### Links
- **`link`** — Pure black, body weight, text-decoration underline on hover. Ghost hover to `{colors.link-hover}` gray.

## Do's and Don'ts

### Do
- Square every structural corner (`{rounded.none}`) — buttons, cards, inputs, image frames. The brand's defining geometric commitment.
- Let pure white (`{colors.background}`) breathe. Generous negative space IS the design; resist adding fills, bands, or tinted surfaces.
- Use `{colors.ink}` (pure black) for all CTAs, accents, and active states — there is no brand hue to reach for.
- Set display headlines in TimesNow SemiLight (or `{typography.display-hero}`) at the largest sizes — the old-style serif warmth is load-bearing.
- Apply `text-transform: lowercase` on select UI labels where the brand voice calls for confident informality.
- Use bottom-border-only treatment on text inputs — the underline input is a specific brand gesture, not a full box.
- Separate sections with whitespace and hairline borders (`{colors.border}`) before reaching for any shadow.
- Let photography carry the warmth — the chrome should recede, not decorate.

### Don't
- Don't introduce a chromatic brand color — no blush, no earth green, no sage. Black is the only accent and that is the point.
- Don't add border-radius to buttons, cards, image frames, or inputs — even a 4px radius reads wrong in this system.
- Don't add resting shadows to product cards or sections — the system is flat; elevation appears only on transient overlays.
- Don't mix in a sans-serif typeface for body or navigation — Newtime R's serif warmth is the counterweight to the stark palette.
- Don't crowd the photography. Full-bleed imagery requires the same frame of negative space the print layout gives it.
- Don't use uppercase tracking on the primary body copy — Everlane does uppercase; Reformation's body copy is sentence-case with a faint positive track.
- Don't raise the typographic voice with bold above `font-weight: 700` — and even 700 is reserved for structural headings, not for emphasis in copy.
- Don't introduce mid-range border-radius (4–16px) — the system is effectively binary (`{rounded.none}` for structure, `{rounded.pill}` for utility chips).

---

## Responsive Behavior

### Breakpoints

*(The dembrandt extraction surfaced 18 breakpoints; the table below consolidates meaningful stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single-column product grid; nav collapses to hamburger; type scales to `{typography.body-tight}`; generous tap padding |
| Mobile | 400–639px | Single column; hero goes full-bleed; display text scales down but keeps serif warmth |
| Tablet | 640–767px | Two-column product grid; navigation starts to expand; editorial sections remain single-column |
| Tablet Wide | 768–991px | Two-to-three column grid; hero layout widens; editorial features gain side-by-side treatment |
| Desktop | 992–1279px | Full multi-column product grid; navigation fully expanded; editorial spreads use full width |
| Large Desktop | ≥1280px | ~1280px max container centered; full-bleed imagery breaks the container edges |

### Touch Targets
- Primary buttons run at `12px 16px` padding — generous enough for comfortable tap at 14px type
- Product cards carry full-width tap area across the image and text block beneath
- Nav items at 14px stay legible and maintain comfortable touch spacing via the nav-bar `16px 24px` padding

### Collapsing Strategy
- **Navigation**: Full horizontal nav → hamburger menu toggle on mobile; the black CTA persists across all breakpoints
- **Grid**: Product grid steps from 3–4 columns → 2 → 1 on mobile
- **Type**: `{typography.display-hero}` scales down proportionally; serif warmth is preserved at every size
- **Spacing**: Section padding compresses from `{spacing.5xl}` (74px) toward `{spacing.xl}` (24px) on mobile

### Image Behavior
- Photography is the hero at every breakpoint — full-bleed on mobile, gridded on desktop
- Product images always squared-off (0px radius), always on white, always the focal point
- Hover image transitions (`0.107s ease-out` filter/opacity) are desktop-only; no hover effects on touch

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Pure Black (`{colors.ink}`)
- Brand accent: **Black** (`{colors.primary}`) — there is no chromatic brand color
- Secondary text: Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- CTA fill: `{colors.primary}` (black), text: `{colors.on-primary}` (white)
- Focus ring: `{colors.focus-ring}` (pure black — monochrome in all accessibility states)

### Example Component Prompts

- "Create a hero section: full-bleed editorial photo on white (`{colors.background}`), a 48px TimesNow SemiLight headline (`font-weight: 300`, `line-height: 1.3`, `letter-spacing: -0.5px`) in pure black, and a single black CTA button (`{colors.primary}` fill, white text, **0px border-radius**, `12px 16px` padding) — no shadows, no decorative elements"
- "Build a primary button: `{colors.primary}` (black) fill, `{colors.on-primary}` (white) text, 14px Newtime R at weight 500 with 0.56px letter-spacing, **0px border-radius**, `12px 16px` padding; hover transitions background to `{colors.accent-hover}` — never add radius or shadow"
- "Create a product card: white (`{colors.background}`) surface, **0px border-radius**, no shadow, full-width squared product image on top with an `0.107s ease-out` opacity/filter hover transition, and a 14px Newtime R Book label (`{colors.ink}`, 0.14px tracking) beneath the image"
- "Design a text input: white fill, **bottom-border only** (`1px solid {colors.border-strong}` — not a full box), **0px border-radius**, `4px 16px` padding, 16px Newtime R Book; on focus, add a full `1px solid {colors.focus-ring}` box — the underline opening into a full frame"
- "Build the navigation bar: white (`{colors.background}`), pure black 14px Newtime R links at weight 400 with 0.14px tracking, `16px 24px` padding; link opacity fades `0.213s ease-in-out` on hover to `{colors.link-hover}` gray — no border-radius, no shadow on the bar itself"
- "Create a product grid section: 3-column (responsive: 2 tablet, 1 mobile) with squared-off (`0px radius`) product card images, 16px Newtime R caption beneath each, `{spacing.xl}` gap between cards, pure white background — the grid is the architecture, photography is the art"

### Iteration Guide

1. Start on pure white (`{colors.background}`). If you reached for a tinted surface or a dark background, stop — the default Reformation canvas is flat white.
2. **There is no brand color.** If a chromatic hue appeared in your design, remove it. Pure black (`{colors.primary}`) is the only accent; negative space provides all warmth.
3. **Square every structural corner.** Buttons, cards, inputs, image frames: `border-radius: 0`. Only small utility chips (tags, badges) carry radius.
4. Set display text in TimesNow or Newtime R. If a sans-serif appeared, swap it for the serif — the warmth is load-bearing in a two-color system.
5. Hold weight discipline: 400 body/nav → 500 CTA → 600–700 headings only. Bold is structural, never decorative.
6. Check the input style: it should use a bottom-border-only treatment (underline), not a box — that's the brand-specific input gesture.
7. Let photography dominate. If the chrome competes with the image for attention, the chrome loses.

---

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