---
version: alpha
name: The Gentlewoman
description: Fashion intelligence on a white page — Futura TGW set in a single weight across an undecorated grid, with one decisive teal reserved for the masthead, and black rules doing the structural work that other magazines leave to imagery.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"             # light section alternation, archive bands

  # Ink / text
  ink: "#000000"
  ink-secondary: "#555555"       # captions, supporting copy  /* estimated */
  ink-muted: "#999999"           # metadata, disabled         /* estimated */
  on-dark: "#ffffff"             # text on dark/inverted surfaces

  # Brand accent — the teal masthead
  primary: "#2bdbcf"             # the gentlewoman wordmark teal
  on-primary: "#000000"          # near-black on teal (teal never carries white)
  primary-container: "#d4f7f5"   # very light teal tint for selected states /* estimated */

  # Editorial red
  accent-red: "#ff3623"          # section flags, sale badges, alerts

  # Borders & rules
  border: "#000000"              # 2px top-rules on divs, footer
  border-light: "#e0e0e0"        # hairline between items       /* estimated */

  # Interactive states
  focus-ring: "#2bdbcf"          # teal focus ring on interactive elements

  # Shadow (flat system — minimal use)
  shadow-soft: "#cccccc"         # was rgba — opaque approximate /* estimated */

typography:
  display-hero:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 83px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: 0px
  body-large:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.31
    letterSpacing: 0px
  nav-link:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "Futura TGW, Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.51
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 80px
  4xl: 163px

rounded:
  none: 0px

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

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

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 15px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 15px

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

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

  rule-divider:
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.none}"
    padding: 0px
---

# The Gentlewoman Design System

## Overview

The Gentlewoman's digital presence operates on the same conviction as its print edition: intelligence does not need decoration to announce itself. The page is pure white (`{colors.background}`), its architecture defined by 2px black top-rules (`{colors.border}`) that announce sections the way a compositor's rule marks a column break. There is no chromatic navigation, no hero gradient, no promotional color saturating every CTA. The one true accent — a single luminous teal (`{colors.primary}`) — is spent almost entirely on the masthead logotype itself, appearing in "the gentlewoman" wordmark as a typographic signature rather than a functional color. When that teal appears elsewhere in the UI, it reads as a direct citation of the masthead: focus rings, selected states, the occasional hover moment.

The typographic system is radical in its singularity. The entire site runs in a single typeface: Futura TGW, a custom-drawn variant of `futura_gentlewoman_medium-webfont.woff` commissioned specifically for the magazine. There is no serif companion, no monospace, no system-UI fallback playing a meaningful role. Futura at weight 400 — exclusively — handles display headlines, body copy, navigation, captions, and button labels. The hierarchy is expressed entirely through scale and spacing, never weight. This refusal of bold is an editorial stance: The Gentlewoman does not raise its voice, it simply changes register.

What makes the system genuinely distinctive is how much work the black rules do. Dividers, section openers, footer top-borders — all 2px solid `{colors.ink}`. Against the white field these rules behave like the grid of a magazine spread made explicit: you see the structure, but the structure is so spare it reads as elegance rather than scaffolding. The `163px` structural spacing unit (the digital equivalent of an exceptionally generous magazine margin) reinforces that spaciousness at the largest breakpoints. The result is a design that earns the word "restrained" — not as euphemism for plain, but as a precise description of control.

**Key Characteristics:**
- Single typeface throughout: Futura TGW weight 400 (`{typography.display-hero}`) — no serifs, no bold, no system fonts in evidence
- Teal masthead accent (`{colors.primary}`) reserved almost entirely for the logotype wordmark — accent color as signature, not function
- Pure white canvas (`{colors.background}`) with 2px black top-rules (`{colors.border}`) as the primary structural device
- Zero border-radius across the entire system — `{rounded.none}` is the only value declared
- `163px` structural spacing unit (`{spacing.4xl}`) echoes the generous margins of a European fashion magazine
- Editorial red (`{colors.accent-red}`) used only for sale badges and hard alerts — never for navigation or general CTAs
- Scale-only type hierarchy: 83px display, 40px section, 32px sub-section, 20px body-large, 16px body, 13–14px UI — same face and weight throughout
- Black-on-white at maximum contrast (`{colors.ink}` on `{colors.background}`) — the site never hedges with grey type
- Buttons carry positive letter-spacing (`{typography.button-ui}` at 1px) — open Futura tracking as a CTA signal
- Photography does the emotional and contextual work that other sites delegate to gradient overlays or typographic color

## Colors

### Surface & Canvas
- **Page White** (`{colors.background}`): The dominant and near-exclusive surface. The entire editorial experience lives here.
- **Light Band** (`{colors.surface}`): A barely-perceptible step off white for archive sections and light alternating bands.

### Ink / Text
- **Pure Black** (`{colors.ink}`): All headline type, all body copy, all structural rules, all button fills. One black, consistently applied.
- **Supporting Copy** (`{colors.ink-secondary}`): Captions, bylines, secondary information.
- **Muted** (`{colors.ink-muted}`): Metadata, timestamps, disabled states.
- **On Dark** (`{colors.on-dark}`): White type used on the black footer, on inverted button fills, and on any dark photographic surface overlay.

### Brand Accent
- **Gentlewoman Teal** (`{colors.primary}`): The masthead color. Reserved with discipline — the wordmark, focus states, and a handful of active/hover moments. On primary, text is always near-black (`{colors.on-primary}`), never white.
- **Teal Tint** (`{colors.primary-container}`): Light teal wash for selected backgrounds where a full teal fill would overwhelm.

### Editorial Alert
- **Red** (`{colors.accent-red}`): Sale badges, alert tags, price flags. A strong, warm red that reads as urgency. Not used for navigation or standard CTAs.

### Structure
- **Black Rule** (`{colors.border}`): The 2px top-border applied to section dividers, headers, and footers. The site's primary organizational device.
- **Light Hairline** (`{colors.border-light}`): Secondary, recessive dividers within content areas.
- **Focus Ring** (`{colors.focus-ring}`): Teal focus indicator — the only interactive use of the brand accent outside the masthead.

## Typography

### Font Family
- **Primary (sole typeface)**: `Futura TGW`, self-hosted as `futura_gentlewoman_medium-webfont.woff`. Fallbacks: `Futura-Medium, Futura, Century Gothic, Helvetica, Arial, sans-serif`
- **OpenType Features**: No variable axes detected. The custom webfont is a static medium-weight cut optimized for the magazine's editorial voice — confident geometric forms at a weight that sits between regular and semibold.
- **Note**: The entire system runs in one face, one weight. All hierarchy is achieved by size, spacing, and uppercase transforms — never by weight change.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 83px — cover headline, hero section titles, the largest editorial moment |
| `display` | 40px — major feature display lines, section openers |
| `heading-section` | 32px — primary content headings within sections |
| `heading-sub` | 22px — sub-section heads, issue teaser titles |
| `body-large` | 20px — lede paragraphs, feature introductions |
| `body` | 16px — standard running copy, article body |
| `nav-link` | 14px / 0.5px spacing — navigation links (Club · Magazine · Library · Shop · Collaborations) |
| `button-ui` | 14px / 1px spacing — button labels, CTAs, open tracking signals action |
| `caption` | 13px — image captions, metadata, micro labels |

### Principles
- **One face, one weight, all roles**: Futura TGW 400 carries everything. This is not constraint — it is commitment. The geometry of Futura scales from 13px captions to 83px display without losing coherence.
- **Scale replaces weight**: Where other systems introduce bold or semibold for emphasis, The Gentlewoman uses size. A 32px heading asserts itself over 16px body through scale alone.
- **Open tracking on UI chrome**: Button labels and nav links carry positive letter-spacing (0.5–1px) — the open-tracked geometric sans reading as confident label, distinct from dense headline or body copy.
- **Tight negative tracking at display scale**: At 40–83px, headlines pull to -0.5px / -1px — letterforms lock together as graphic objects rather than strings of characters.
- **Uppercase for registration, not decoration**: `text-transform: uppercase` appears on navigation and category labels as a structural register shift, never as a general emphasis tool.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px. Common workhorse values are 10px, 15px, and 20px — a tight, controlled interior rhythm. The `163px` (`{spacing.4xl}`) structural margin echoes the generosity of a printed fashion magazine at its widest.

### Grid & Container
- Max content width: approximately 1440–1760px for the widest editorial layouts
- Content-area max: approximately 1100px for text-heavy sections
- Navigation: horizontal top bar with left-aligned links and right-aligned masthead logo
- Editorial grid: single-column centered for cover/hero, multi-column for article grids and shop listings
- `163px` appears as a defining structural column/margin unit at large viewports — the editorial air that signals quality

### Whitespace Philosophy
- **White as voice**: The dominant white canvas is not emptiness — it is the space that lets the magazine cover photography and the sparse typography speak at full volume.
- **Rules over fills**: Content is separated by 2px black top-rules, never by background fills, shadows, or rounded card chrome. The rule announces the section; the white absorbs the rest.
- **Fashion editorial pacing**: Section-to-section vertical rhythm runs wide — 40–80px between bands. The site does not rush.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | The entire site — all content, navigation, article cards |
| Rule (Level 1) | `2px solid {colors.border}` top-border | Section headers, footer, major structural dividers |
| Hairline (Level 2) | `1px solid {colors.border-light}` | Item separators within content bands |
| Focus (Level 3) | `{colors.focus-ring}` outline | Interactive element focus states only |

**Shadow Philosophy**: The Gentlewoman is shadowless. Like the fashion editorials it publishes, depth is communicated through white space and editorial restraint, not through lifted surfaces or atmospheric shadows. If you find yourself reaching for a `box-shadow`, you have left the design language. Structure is declared by the 2px rule; everything else is flat.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, inputs, images, banners, badges |

The system has exactly one radius value. Corners are sharp. This is not an omission — it is a declaration. The Gentlewoman's geometry is rectilinear: the grid of the magazine page, the hard edge of a photographic crop, the clean cut of a fashion silhouette. Any border-radius would introduce a softness that the system deliberately refuses.

## Components

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

### Button variants

- **`button-primary`** — Black fill (`{colors.ink}`), white label (`{colors.on-dark}`), square corners, open-tracked Futura. Used for principal purchase and subscription actions. Hover inverts to teal (`{colors.primary}`) with black text — the masthead color surfaces as confirmation.
- **`button-secondary`** — White fill, black label, square. The quieter "explore" or "read" action alongside primary CTAs.
- **`button-ghost`** — White fill, black label, square, inverts fully to black on hover. Used for navigation-adjacent actions where a fill would distract from content.

### Cards
No floating card chrome. "Cards" in this system are editorial blocks — photography full-bleed in its grid column, type below at `{typography.heading-sub}`, separated from adjacent blocks by whitespace and the occasional `{components.rule-divider}`. No border, no shadow, no radius.

### Inputs
Square-cornered inputs with bottom-only border (2px `{colors.on-dark}` on dark surfaces; inferred hairline on light). Futura 14–16px, weight 400. Focus state surfaces `{colors.focus-ring}` — the one interactive moment where the teal leaves the masthead.

### Badges
Sale and alert badges use `{colors.accent-red}` — a decisive red flag in an otherwise monochrome system. Square corners, Futura caption weight, white text. Appear on magazine issue tiles and shop price tags.

### Navigation
Horizontal top bar: navigation links left-aligned in `{typography.nav-link}`, masthead wordmark ("the gentlewoman" in `{colors.primary}`) right-aligned. No background fill, no border at rest — the nav floats above the white page. On scroll a thin rule may appear. Links: Futura 14px, weight 400, 0.5px letter-spacing, near-zero interaction cost.

## Do's and Don'ts

### Do
- Use Futura TGW at weight 400 for every typographic moment — size changes register, not weight
- Express section openings with a `2px solid {colors.ink}` top-rule — this is the only structural device the system needs
- Reserve `{colors.primary}` (teal) for the masthead wordmark, focus rings, and hover states — its scarcity is what makes it read as the brand signature
- Keep all corners at `{rounded.none}` — the rectilinear language extends from buttons to images to input fields
- Use the `163px` (`{spacing.4xl}`) margin to create genuine editorial air at large viewports; compress proportionally downward on mobile
- Let photography carry color and emotional weight — resist adding graphic elements, background tints, or illustration to fill perceived emptiness
- Apply positive letter-spacing (`1px`) to button labels — open-tracked Futura reads as a CTA without needing bold
- Use `{colors.accent-red}` only for price/alert badges — it is a flag, not a palette color

### Don't
- Don't introduce a second typeface — Futura TGW is the complete typographic system; adding a serif or a different sans breaks the voice
- Don't use bold or semibold weights anywhere — if emphasis is needed, increase size or use uppercase
- Don't add border-radius to any element — `{rounded.none}` is non-negotiable; even 2px softening breaks the rectilinear character
- Don't scatter teal (`{colors.primary}`) across general CTAs or hover highlights — it belongs to the masthead; overuse dissolves the signature
- Don't add box-shadows or card elevation to editorial content — rules and whitespace do the depth work
- Don't use grey type for primary reading content — `{colors.ink}` at full black carries the editorial authority the system demands
- Don't compress the `{spacing.4xl}` structural margin below `{spacing.2xl}` until the smallest breakpoints — the generous air is the brand's spatial voice
- Don't put white text on teal — `{colors.on-primary}` is always near-black; the accent is light enough to demand dark text

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <375px | Single column; hero at approximately 40–50px; stacked navigation |
| Mobile | 375–520px | Single column; editorial grid collapses; nav to hamburger |
| Mobile Large | 520–767px | Wider single column; magazine cover centered; 2-column article grid begins |
| Tablet Small | 768–900px | 2-column editorial layout; section margins compress from 163px |
| Tablet | 900–1023px | Full 2-column; feature grids; top-rule rhythm maintained |
| Desktop | 1024–1400px | Multi-column article grids; full structural margins |
| Wide Desktop | 1400–1760px | Maximum editorial layout; 163px structural air fully expressed |
| Cinema | >1760px | Content centered within max measure; photography full-bleed within column |

### Touch Targets
- Navigation links: 14px text inside a generous tap row (~44px height via padding)
- Buttons: 12px vertical padding ensures minimum 40px tap height
- Article card links: full-card tap targets via wrapping anchor
- Minimum recommended: 44px height for all interactive elements at mobile

### Collapsing Strategy
- **Navigation**: Links collapse to a hamburger/toggle on mobile; masthead wordmark persists at all sizes
- **Display type**: 83px → ~50px → ~32px across breakpoints; the single-weight Futura system scales without needing typeface swaps
- **Editorial grid**: Multi-column article grids → 2-column → single stacked column; 2px top-rules maintained at all sizes
- **Spacing**: `163px` structural margin (`{spacing.4xl}`) compresses to `{spacing.2xl}`–`{spacing.3xl}` at tablet, `{spacing.xl}` at mobile
- **Magazine cover**: Single centered cover image maintained at all breakpoints, proportionally scaled

### Image Behavior
- Magazine cover photography: centered, portrait ratio maintained, `0px` border-radius at all sizes
- Fashion editorial images: `object-fit: cover` within grid cells, square-cornered at every breakpoint
- Art direction: compositions are tight — subjects centered or off-center per editorial intent; no background fills or overlays added at mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (pure white)
- Text: `{colors.ink}` (pure black)
- Brand accent: `{colors.primary}` (teal — masthead only)
- Secondary text: `{colors.ink-secondary}`
- Section rule: `{colors.border}` (2px top-border)
- Alert/badge: `{colors.accent-red}`
- CTA: `{colors.ink}` (black fill, white label)

### Example Component Prompts

- "Create a magazine hero section on pure white (`{colors.background}`). Center a portrait cover photograph (approximately 400×540px, `0px` border-radius, no shadow). Set the caption 'Issue n° — the gentlewoman' in Futura TGW 13px weight 400 color `{colors.ink}`, letter-spacing 0. Above the image, the navigation bar: left-aligned links (Club · Magazine · Library · Shop · Collaborations) in Futura 14px weight 400, 0.5px letter-spacing, `{colors.ink}`; right-aligned masthead wordmark 'the gentlewoman' in Futura 32px weight 400 color `{colors.primary}`. No backgrounds, no shadows, no radius."
- "Design a section opener: a `2px solid {colors.ink}` top-border, then a category label in Futura TGW 14px weight 400, `text-transform: uppercase`, 1px letter-spacing, color `{colors.ink}`. Below it, a section headline at 40px Futura weight 400, line-height 1.0, letter-spacing -0.5px, color `{colors.ink}`. White page, square corners, no shadow. Use `20px` (`{spacing.lg}`) between the rule and the label, `10px` (`{spacing.sm}`) between label and headline."
- "Build an article card grid — three columns on white (`{colors.background}`), `20px` gap. Each card: full-bleed image (3:4 ratio, `0px` radius, no shadow), then a category label in Futura 13px uppercase letter-spacing 0.5px color `{colors.ink-secondary}`, then a headline in Futura 22px weight 400 line-height 0.95 color `{colors.ink}`, then a byline in Futura 13px color `{colors.ink-secondary}`. No card background, no border, no shadow. Separate cards with whitespace only."
- "Design a primary CTA button: `{colors.ink}` fill, `{colors.on-dark}` text in Futura 14px weight 400 letter-spacing 1px, `{rounded.none}`, padding `12px 24px`. Hover state inverts: `{colors.primary}` fill, `{colors.on-primary}` text. No shadow, no border, no radius. Place on a white page with `20px` margin around it."
- "Create a shop sale badge: `{colors.accent-red}` background, `{colors.on-dark}` text in Futura 13px weight 400, `{rounded.none}`, padding `3px 8px`. Position top-right on a product image. No shadow, no border. The red flag should read as urgent against the white page without competing with the teal masthead."

### Iteration Guide

1. Start on pure white (`{colors.background}`) with pure black (`{colors.ink}`). The design lives entirely in this contrast — no tinted canvas, no atmospheric grey.
2. Open every section with a `2px solid {colors.ink}` top-rule. It is the punctuation mark of the system — use it before each new editorial band.
3. Set everything in Futura TGW weight 400. Size differentiates, weight does not. If you feel the urge to bold something, increase the font size instead.
4. Spend teal (`{colors.primary}`) only on the masthead and focus states. If you see teal on a button fill or hover state that is not the masthead, remove it.
5. Keep corners at `{rounded.none}`. Check every element: inputs, images, buttons, cards. Any radius is a departure from the language.
6. Leave generous air. The `163px` (`{spacing.4xl}`) structural margin at large breakpoints is non-negotiable editorial whitespace — compress only at mobile.
7. Use red (`{colors.accent-red}`) only for price and alert badges — a flag in an otherwise monochrome field; diluting it across general UI destroys its signal value.

---

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