---
version: alpha
name: Stripe Press
description: A book publisher's site set entirely in the Ivar serif family on a warm near-black ground, where the only color comes from the spines of the books themselves and a single metallic-gold link — a quiet, library-at-night reading room rendered in CSS.

colors:
  # Surface / canvas
  background: "#1c1714"         # warm near-black reading-room ground
  surface: "#000000"            # pure-black panels and section blocks
  surface-raised: "#252019"     # slightly lifted card / shelf ground

  # Ink / text
  ink: "#ffffff"                # primary white serif text on dark
  ink-secondary: "#d0d1d4"      # supporting copy, secondary lines
  ink-muted: "#93935f"          # faint olive-gray metadata
  on-light: "#000000"           # rare dark text on a light book cover

  # Brand accent — the metallic gold link
  primary: "#dfc78e"            # underlined links, the gilt-on-spine accent
  primary-hover: "#f9c350"      # brighter gold on hover
  on-primary: "#1c1714"         # near-black text on a gold fill

  # Book-spine palette (decorative — the covers ARE the color)
  spine-red: "#ff4445"          # bright cover red
  spine-orange: "#e48244"       # warm cover orange
  spine-pink: "#ebadcb"         # soft cover pink
  spine-blue: "#18185e"         # deep cover navy
  spine-green: "#0aeb9a"        # vivid cover green
  spine-cyan: "#96dced"         # pale cover cyan

  # Borders
  border: "#504f4f"             # faint dark hairline between rows
  border-strong: "#93935f"      # olive rule on emphasis

  # Shadow tint (opaque approximation for the elevation table)
  shadow-soft: "#000000"        # was rgba(0,0,0,0.6) — Google format requires hex

typography:
  display:
    fontFamily: "Ivar Display, Georgia, Times New Roman, serif"
    fontSize: 29.75px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.32px
  display-text:
    fontFamily: "Ivar Text, Georgia, Times New Roman, serif"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  heading:
    fontFamily: "Ivar Headline, Georgia, Times New Roman, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.32px
  heading-sub:
    fontFamily: "Ivar Headline, Georgia, Times New Roman, serif"
    fontSize: 17.6px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.32px
  body-large:
    fontFamily: "Ivar Text, Georgia, Times New Roman, serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.32px
  body:
    fontFamily: "Ivar Text, Georgia, Times New Roman, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sub:
    fontFamily: "Ivar Text, Georgia, Times New Roman, serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.32px
  label:
    fontFamily: "Ivar Headline, Georgia, Times New Roman, serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.32px
  button-ui:
    fontFamily: "Ivar Display, Georgia, Times New Roman, serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.32px
  caption:
    fontFamily: "Ivar Text, Georgia, Times New Roman, serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 40px
  5xl: 80px

rounded:
  none: 0px
  sm: 2px
  md: 3px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.primary}"

  card:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  book-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

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

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

  author-name:
    textColor: "{colors.ink}"
    typography: "{typography.heading-sub}"
    padding: 0px

  book-title:
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    padding: 0px

  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Stripe Press Design System

## Overview

Stripe Press is the rare case where a tech company built a real book imprint and then designed a website that respects books as objects. The single most distinctive move is total commitment to a serif: every word on the page — wordmark, author names, titles, body, navigation, button labels — is set in the **Ivar** type family (`{typography.display}`, `{typography.body}`). There is no sans anywhere. Ivar Display does the headlines, Ivar Text the reading copy, Ivar Headline the labels, each at a quiet 0.32px tracking. That uniform serif voice is what makes the site feel less like a product page and more like a publisher's catalog or a colophon.

The canvas is a warm near-black (`{colors.background}`) — not a cold tech `#000`, but a brown-tinted dark that reads like a dim reading room or the endpaper of a clothbound book. Against it, white serif text (`{colors.ink}`) glows. And then the genius of the color strategy: Stripe Press doesn't have a brand palette so much as it *borrows the books' own colors*. The homepage is a stack of book spines — "Scaling People", "The Big Score", "Scientific Freedom" — each rendered in its actual cover art, so the page's color comes from `{colors.spine-red}`, `{colors.spine-orange}`, `{colors.spine-blue}`, `{colors.spine-green}` and so on. The only consistent brand accent is a **metallic gold** (`{colors.primary}`) used for links and titles, the gilt-on-a-spine color, which deepens to a brighter gold (`{colors.primary-hover}`) on hover.

The overall impression is hushed and curatorial. Books are presented as horizontal shelves you scroll through; corners are nearly square (a 3px softening at most, `{rounded.md}`); there are essentially no drop shadows because the book covers carry their own depth and lighting. It is restraint as luxury — the design gets out of the way and lets the objects (and the gilt type) do the talking. Where Monocle is a broadsheet on white, Stripe Press is a private library at night.

**Key Characteristics:**
- The entire site is set in the **Ivar** serif family (`{typography.display}`, `{typography.body}`) — zero sans-serif
- Warm near-black ground (`{colors.background}`), brown-tinted, reading-room dark rather than cold black
- White serif text (`{colors.ink}`) as the primary ink, with a soft secondary gray (`{colors.ink-secondary}`)
- A single **metallic gold** brand accent (`{colors.primary}`) for links and titles — the gilt-on-spine color
- Page color comes from the **book spines themselves** (`{colors.spine-red}`, `{colors.spine-blue}`, etc.) — the covers are the palette
- Consistent quiet 0.32px letter-spacing across the serif type
- Near-square corners (`{rounded.md}` = 3px max) — books are rectilinear objects
- Almost no drop shadows — the book-cover artwork supplies its own depth
- Books shown as horizontal shelves / rows (`{components.book-row}`), browsed by scroll
- Author name and book title stack as a pair: name in white (`{components.author-name}`), title in gold (`{components.book-title}`)
- Links are underlined in gold (`{components.link}`), the catalog/footnote convention
- Pure black panels (`{colors.surface}`) alternate with the warm-black ground for tonal rhythm

## Colors

### Surface & Canvas
- **Reading-Room Black** (`{colors.background}`): The warm, brown-tinted near-black ground. The whole site sits on it.
- **Pure Black** (`{colors.surface}`): Panels and section blocks that go fully black for contrast against the warm ground.
- **Raised Black** (`{colors.surface-raised}`): A slightly lifted shelf/card ground.

### Ink / Text
- **White** (`{colors.ink}`): Primary serif text — author names, headlines, body. Glows against the dark.
- **Soft Gray** (`{colors.ink-secondary}`): Supporting and secondary copy.
- **Olive Gray** (`{colors.ink-muted}`): Faint metadata and the quietest labels.

### Brand Accent
- **Metallic Gold** (`{colors.primary}`): The gilt accent — links, book titles, primary CTAs. The one consistent brand color. Hover brightens to `{colors.primary-hover}`.

### Book-Spine Palette
- **Spine colors** (`{colors.spine-red}`, `{colors.spine-orange}`, `{colors.spine-pink}`, `{colors.spine-blue}`, `{colors.spine-green}`, `{colors.spine-cyan}`): Pulled directly from the book covers. These are decorative — they live on the artwork, not in the UI chrome. Use them only when reproducing or referencing a specific title's cover.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`): Faint dark rules between rows.
- **Olive Rule** (`{colors.border-strong}`): Emphasis rules in the muted olive.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for the rare deep shadow (originally rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: the `Ivar` family — `Ivar Display` (headlines, CTAs), `Ivar Text` (reading copy, the closest to `Georgia`), and `Ivar Headline` (labels). Fallbacks `Georgia, Times New Roman, serif`.
- **No sans-serif**: there is no secondary sans. Even buttons and nav are serif.
- **Tracking**: a consistent, subtle 0.32px positive tracking across most styles — it gives the serif a typeset, printed evenness.

### Hierarchy

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

| Token | Use |
|---|---|
| `display` | 29.75px / Ivar Display / 700 — the largest feature headline |
| `display-text` | 25px / Ivar Text / 500 — display set in the reading face |
| `heading` | 21px / Ivar Headline / 400 — section headings |
| `heading-sub` | 17.6px / Ivar Headline / 600 — author names, sub-heads |
| `body-large` | 18px / Ivar Text / 500 — lead reading copy |
| `body` | 17px / Ivar Text — standard body and links |
| `body-sub` | 16px / Ivar Text / 500 — dense supporting copy |
| `label` | 16px / Ivar Headline / 600 — book titles, UI labels |
| `button-ui` | 17px / Ivar Display / 600 — button labels |
| `caption` | 14px / Ivar Text — captions, badges, metadata |

### Principles
- **One family, three cuts**: Display for impact, Text for reading, Headline for labels — never a sans.
- **Quiet tracking**: 0.32px across the board for an even, typeset color of text.
- **Mid weights**: the system favors 400–600; the heaviest is Display 700 on the lead headline.
- **Serif everywhere**: buttons, nav, and captions are serif too — the uniformity is the point.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. The rhythm runs roughly 8px-based (8 / 16 / 24 / 32) with big editorial jumps (`{spacing.5xl}` = 80px) between shelves. Book rows get generous internal padding so each title reads as its own object.

### Grid & Container
- Centered single-column catalog: a vertical stack of horizontal book "shelves"
- Each book occupies a full-width row pairing cover art with author + title text
- A narrow, comfortable reading measure for any long-form prose

### Whitespace Philosophy
- **Dark space as margin**: the warm-black ground frames each book like matting around a print
- **Generous between shelves**: large vertical gaps let each title breathe
- **No boxes around content**: rows are separated by space and faint rules, not card chrome

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, warm-black ground | The page, nav, and most content |
| Rule (Level 1) | 1px `{colors.border}` hairline | Faint separation between rows |
| Cover Depth (Level 2) | Depth baked into the book-cover artwork itself | The book spines — they self-light |
| Soft (Level 3, rare) | `0 8px 30px` deep at ~60% black (`{colors.shadow-soft}`) | Overlays / modals only |

**Shadow Philosophy**: Stripe Press is almost shadowless in its chrome. Depth comes from the photographed/rendered book covers, which already carry their own lighting, edges, and spine shadows. The UI itself stays flat — a card is a tonal step (`{colors.surface-raised}`) rather than a shadowed plane. Reserve any real drop shadow for true overlays. The objects supply the dimensionality; the interface stays quiet.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Book rows, full-bleed panels, images |
| `sm` | 2px | Small badges and chips |
| `md` | 3px | Buttons and cards — the maximum softening |
| `pill` | 9999px | Avatars and the occasional status dot only |

The system is near-square: books are rectilinear objects, so the interface keeps corners crisp, softening to at most 3px (`{rounded.md}`) on interactive elements. No large radii, no pill buttons.

## Components

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

### Buttons
- **`button-primary`** — Metallic gold (`{colors.primary}`) fill, near-black serif label (`{typography.button-ui}`), 3px corners. The buy/read action. Hover brightens to `{colors.primary-hover}`.
- **`button-secondary`** — Warm-black fill, white serif label, 3px corners. Hover lifts to `{colors.surface-raised}` with the text turning gold.

### Cards & Rows
- **`card`** — Raised-black surface, white text, 3px corners, no shadow. The lifted shelf module.
- **`book-row`** — Pure-black full-width row pairing cover art with text. Square corners — the primary catalog unit.

### Inputs
- **`input`** — Pure-black fill, white serif text, 3px corners. **`input-focus`** stays minimal — no glow, the gold accent does the signaling.

### Navigation
- **`nav-bar`** — Warm-black, serif labels (`{typography.label}`). Sits flush at the top; no shadow.

### Catalog Elements
- **`author-name`** — White Ivar Headline (`{typography.heading-sub}`).
- **`book-title`** — Gold Ivar Headline label (`{typography.label}`) — paired beneath or beside the author name.
- **`link`** — Gold (`{colors.primary}`), underlined — the footnote/catalog convention. Hover brightens.
- **`badge`** — Raised-black chip with gold caption text.

## Do's and Don'ts

### Do
- Set absolutely everything in the **Ivar** serif family (`{typography.display}`, `{typography.body}`) — including buttons and nav
- Use the warm near-black ground (`{colors.background}`), not a cold pure-black canvas
- Reserve **metallic gold** (`{colors.primary}`) for links, book titles, and primary CTAs — the gilt accent
- Let the book covers supply the page's color (`{colors.spine-red}` et al.) — the artwork is the palette
- Keep a consistent quiet 0.32px tracking on serif type
- Underline links in gold (`{components.link}`) — the catalog convention
- Keep corners near-square (`{rounded.md}` max) and the interface flat
- Pair author name in white above a gold title (`{components.author-name}` + `{components.book-title}`)

### Don't
- Don't introduce a sans-serif — even labels and buttons stay Ivar serif
- Don't use a cold pure-black `#000` as the page ground — it must be the warm `{colors.background}`
- Don't invent a colorful UI palette — the only chrome color is gold; everything else comes from book covers
- Don't add drop shadows to chrome — depth lives in the cover artwork, not the interface
- Don't round buttons into pills — corners top out at 3px (`{rounded.md}`)
- Don't make gold a background fill for large areas — it's a thin gilt accent, not a section color
- Don't crowd the shelves — generous dark space between books is the luxury signal

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced; the stops below reflect the catalog's observed reflow.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Book rows stack cover-over-text; nav collapses; display type scales down |
| Tablet | 640–1023px | Wider book rows, cover beside text; comfortable single-column catalog |
| Desktop | 1024–1279px | Full-width horizontal shelves; cover art and metadata side by side |
| Large | ≥1280px | Centered measure with generous dark margins framing each shelf |

### Touch Targets
- Buy/read buttons keep comfortable height with serif labels at 16–17px
- Book rows are large tap targets; link underlines stay visible for affordance

### Collapsing Strategy
- **Navigation**: serif section nav → menu toggle on mobile
- **Book rows**: cover-beside-text → cover-over-text stack on narrow screens
- **Type**: Ivar Display headlines scale down while keeping the 0.32px tracking
- **Spacing**: between-shelf gaps compress from `{spacing.5xl}` toward `{spacing.3xl}`

### Image Behavior
- Book covers are the hero imagery — full-bleed within their row, square corners, self-lit
- Covers reflow as flex children; aspect ratios preserved as rows narrow

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Reading-Room Black (`{colors.background}`)
- Text: White (`{colors.ink}`)
- Brand accent: Metallic Gold (`{colors.primary}`)
- Secondary text: Soft Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- CTA: Gold (`{colors.primary}`) with near-black text

### Example Component Prompts

- "Create a dark hero on warm near-black (`{colors.background}`) with a white Ivar Display headline (`{typography.display}`, 700, 0.32px tracking) and an Ivar Text subhead (`{typography.body-large}`) in soft gray (`{colors.ink-secondary}`) — entirely serif, no sans"
- "Build a book row: pure-black (`{colors.surface}`) full-width strip, square corners (`{rounded.none}`), with the cover art on the left, the author name in white Ivar Headline (`{components.author-name}`) and the title in gold (`{components.book-title}`) on the right"
- "Make the primary CTA: metallic gold (`{colors.primary}`) fill, near-black serif label (`{typography.button-ui}`), 3px corners (`{rounded.md}`), 12px 20px padding; hover brightens to `{colors.primary-hover}`"
- "Style links as gold (`{colors.primary}`), underlined, in Ivar Text (`{typography.body}`) — the catalog/footnote convention; hover brightens the gold"
- "Design a quiet nav bar: warm-black (`{colors.background}`) ground, serif labels (`{typography.label}`) in white, flush to the top, no shadow — every label is Ivar serif"

### Iteration Guide

1. Start on the warm near-black ground (`{colors.background}`). If your canvas is a cold pure-black, warm it — Stripe Press is brown-tinted dark.
2. Set everything in Ivar serif (`{typography.body}`). If any element is sans-serif, change it — there is no sans.
3. Apply a consistent 0.32px tracking to serif text for the typeset evenness.
4. Use gold (`{colors.primary}`) only for links, titles, and CTAs. Get the rest of the color from book-cover artwork.
5. Keep the interface flat — no chrome shadows. Depth belongs to the covers.
6. Keep corners near-square, 3px (`{rounded.md}`) at most. No pills.
7. Pair white author name over gold title, and leave generous dark space between shelves — the quiet is the luxury.

---

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