---
version: alpha
name: Marfa Stance
description: Editorial luxury minimalism for modular British outerwear — a near-monochrome paper-white canvas, ink-black serif-tinged sans, generous whitespace, hairline rules instead of boxes, and zero-radius rectangular buttons that read like fashion-house labels.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f4f0"
  ink: "#1a1a1a"
  ink-pure: "#000000"

  # Brand accent — restrained, used sparingly
  primary: "#1a1a1a"
  accent-stone: "#cfc7ba"
  accent-clay: "#a8744f"

  # Neutral scale
  gray-700: "#3d3d3d"
  gray-600: "#5c5c5c"
  gray-500: "#7a7a7a"
  gray-400: "#9b9b9b"
  gray-300: "#c9c9c9"
  gray-200: "#e4e1db"
  gray-100: "#efece7"
  gray-50: "#f6f4f0"

  # Hairline rules / borders
  border: "#e4e1db"
  border-strong: "#1a1a1a"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Interactive
  link: "#1a1a1a"
  focus: "#1a1a1a"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  sub-heading:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2px
  card-title:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.5px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0.2px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0.2px
  body-small:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.3px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  price:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 144px

rounded:
  none: 0px
  xs: 1px
  sm: 2px
  pill: 9999px

components:
  # Primary button — solid ink rectangle, fashion-label voice
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  # Secondary — outlined hairline rectangle
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"

  # Text / underline link button
  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px

  # Product card — borderless, image-led
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  # Eyebrow / category label
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.gray-600}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 0px

  # Input — hairline underline field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 40px
    borderColor: "{colors.border}"

  # Section divider rule
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
    width: 100%
---

# Marfa Stance Design System

## Overview

Marfa Stance is a British modular outerwear house, and its website reads like the brand it sells: quietly luxurious, unfussy, and built around restraint. The canvas is paper-white (`{colors.background}`) with near-black ink (`{colors.ink}`), and almost nothing competes with the product photography. This is editorial minimalism in the fashion-house tradition — the design system gets out of the way so the garments, the styling, and the modular-layering concept carry the page.

The typographic move that defines the brand is a serif-meets-sans pairing. Display moments lean on a high-contrast humanist serif (Cormorant Garamond as the closest Google match) at large sizes with relaxed tracking, lending the headlines a couture, magazine-cover quality. Everything functional — navigation, product titles, prices, body copy — sits in a clean geometric sans (Jost) at light weights with generous positive letter-spacing, the typographic equivalent of a luxury label set in small caps. Eyebrows and category labels push tracking out to 2px, a classic high-fashion tell.

Structurally, the brand rejects boxes. There are no rounded cards, no drop shadows, no fills competing for attention. Separation comes from whitespace and hairline 1px rules (`{colors.border}`) — the page is composed like a printed lookbook, with edge-to-edge imagery, full-bleed sections, and disciplined column grids. Buttons are zero-radius rectangles (`{rounded.none}`): a solid ink fill for primary actions, a hairline outline for secondary, and bare underlined text for tertiary. The radius scale tops out at a near-imperceptible 1–2px because softness is off-brand.

**Key Characteristics:**
- Paper-white canvas (`{colors.background}`) with near-black ink (`{colors.ink}`) — almost monochrome
- Serif/sans pairing: humanist serif for display, geometric sans (Jost) for everything functional
- Wide positive letter-spacing on UI text (1–2px) — the luxury-label voice
- Zero-radius rectangular buttons and inputs — no rounding, no shadows
- Hairline 1px rules instead of cards or boxes
- Editorial, lookbook-style layout: full-bleed imagery, generous whitespace
- Muted stone/clay accents reserved for atmosphere, never UI chrome
- Light font weights (300) for body, creating an airy reading texture

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, solid button fills, strong rules. Near-black, not pure black.
- **Paper White** (`{colors.background}`): Page background, surfaces, button text on dark.
- **True Black** (`{colors.ink-pure}`): Reserved for rare maximum-contrast moments.

### Accents (atmospheric only)
- **Stone** (`{colors.accent-stone}`): Soft neutral tint for section backgrounds and editorial blocks.
- **Clay** (`{colors.accent-clay}`): Warm earthen accent echoing the outerwear palette — sparingly.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Secondary copy, eyebrow labels.
- **Gray 500** (`{colors.gray-500}`): Muted captions, metadata.
- **Gray 400** (`{colors.gray-400}`): Placeholder text, disabled states.
- **Gray 300** (`{colors.gray-300}`): Subtle dividers.
- **Gray 200** (`{colors.gray-200}`): Hairline borders.
- **Gray 100** (`{colors.gray-100}`): Faint surface tint.
- **Gray 50** (`{colors.gray-50}`): Softest off-white section background.

### Borders
- **Border** (`{colors.border}`): The standard hairline rule — separation comes from these.
- **Border Strong** (`{colors.border-strong}`): Ink-colored outline for secondary buttons.

## Typography

### Font Family
- **Display**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — high-contrast serif for couture headlines.
- **UI / Body**: `Jost`, with fallbacks `Helvetica Neue, Arial, sans-serif` — geometric sans for all functional text.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px serif — campaign / hero headlines |
| `section-heading` | 36px serif — section titles |
| `sub-heading` | Sans sub-headings, intro lines |
| `eyebrow` | Category labels, kickers (2px tracking) |
| `card-title` | Product names |
| `body-large` | Editorial intro copy |
| `body` | Standard reading text (light weight) |
| `body-small` | Compact UI text, footnotes |
| `button-ui` | Buttons, nav links (1.5px tracking) |
| `caption` | Metadata, fine print |
| `price` | Product prices |

### Principles
- **Serif for emotion, sans for function**: the serif appears only in display moments; the sans handles all interface text.
- **Wide tracking signals luxury**: UI text and eyebrows use 1–2px positive letter-spacing — the opposite of compressed tech type.
- **Light weights everywhere**: body at weight 300 keeps the page airy; the heaviest UI weight is 500.
- **No bold**: emphasis comes from size, tracking, and the serif/sans switch, never from heavy weights.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.2xl}`–`{spacing.4xl}`) for generous section breathing room.

### Grid & Container
- Wide content container with full-bleed imagery sections
- Product grids: 2–4 columns of borderless, image-led cards
- Hero: full-width edge-to-edge campaign imagery with overlaid serif headline

### Whitespace Philosophy
- **Lookbook emptiness**: large vertical gaps between sections; whitespace is the primary separator.
- **Hairlines over boxes**: 1px `{colors.border}` rules divide content instead of cards or shadows.
- **Image-led rhythm**: photography does the heavy visual lifting; type stays quiet and precise.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Default — most of the page |
| Hairline | 1px `{colors.border}` rule | Section dividers, input underlines |
| Strong rule | 1px `{colors.border-strong}` | Secondary button outline |

**Shadow Philosophy**: Marfa Stance uses essentially no shadows. Depth is implied through whitespace, hairline rules, and the contrast between imagery and the paper-white canvas. The aesthetic is print, not interface chrome.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs, cards — the default |
| `xs` | 1px | Near-imperceptible softening, rarely used |
| `sm` | 2px | Maximum rounding allowed |
| `pill` | 9999px | Reserved for rare badge/dot moments |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid ink rectangle, white text, zero radius, wide-tracked 12px label.
- **`button-secondary`** — White with a 1px ink outline (`{colors.border-strong}`).
- **`button-text`** — Bare underlined text, no padding — tertiary actions.

### Cards
- **`card`** — Borderless and shadowless; image-led with a sans product title and price below.

### Labels
- **`badge`** — Eyebrow category label, gray, uppercase-feeling with 2px tracking.

### Inputs
- **`input`** — Underline-only field (1px `{colors.border}` bottom rule); no box, no radius.

### Navigation
- **`nav-bar`** — Paper-white header, wide-tracked sans links, hairline bottom rule.

### Dividers
- **`divider`** — 1px `{colors.border}` full-width rule — the primary structural separator.

## Do's and Don'ts

### Do
- Keep the canvas paper-white with near-black ink
- Pair a high-contrast serif for display with geometric sans (Jost) for function
- Use wide positive letter-spacing (1–2px) on UI text and eyebrows
- Separate content with hairline 1px rules and whitespace
- Use zero-radius rectangles for buttons and inputs
- Let product photography carry the visual weight
- Reserve stone/clay accents for atmosphere only

### Don't
- Don't round corners — rectangles are the brand
- Don't add drop shadows or elevated cards
- Don't use bold weights — emphasis is size, tracking, and serif/sans contrast
- Don't introduce saturated UI colors — the palette is near-monochrome
- Don't compress tracking — luxury type breathes outward
- Don't box content in fills when a hairline rule will do

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, full-bleed imagery, stacked nav |
| Tablet | 600–1024px | 2-column product grids |
| Desktop | 1024–1440px | 3–4 column grids, full editorial layout |
| Large | >1440px | Centered with generous margins |

### Touch Targets
- Buttons use comfortable 16px vertical padding
- Nav links spaced generously with wide tracking
- Mobile menu collapses to a hamburger

### Collapsing Strategy
- Hero serif scales down while maintaining relaxed tracking
- Product grids: 4 → 3 → 2 → 1 columns
- Navigation: horizontal links → hamburger drawer
- Section spacing compresses but stays generous

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}` rectangle, white text
- Background: Paper White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Divider: 1px `{colors.border}`

### Example Component Prompts
- "Create a hero: full-bleed campaign image, overlaid headline in Cormorant Garamond 56px weight 400, letter-spacing -0.5px, white text. Below it a solid ink rectangle button (zero radius, 16px 32px padding) with a 12px Jost label, letter-spacing 1.5px."
- "Design a product card: borderless, no shadow, image on top, product name in Jost 16px weight 500 letter-spacing 0.5px below, price in Jost 14px. Pure whitespace separation."
- "Build a navigation bar: paper-white, Jost 12px weight 400 links with 1.5px tracking, hairline 1px `{colors.border}` bottom rule."
- "Create an underline input: no box, 1px `{colors.border}` bottom rule only, Jost 15px weight 300 text, 12px vertical padding."

### Iteration Guide
1. Zero radius is the default — never round buttons or cards
2. Serif only for display; Jost for all functional text
3. Wide positive tracking (1–2px) is the luxury voice — never compress
4. Separation = whitespace + hairline rules, never shadows or fills
5. Keep accents atmospheric; UI chrome stays near-monochrome

---

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