# Design Reference - Stripe Press
> Library of Curated Volumes — each radiating its own quiet brilliance.

## Source
- Original site: https://press.stripe.com
- Captured: 2026-04-11T15:50:32.565Z

## Tags
- dark-mode
- editorial-publishing
- minimalist
- sophisticated
- distinct-color-palettes
- book-stack
- typographic
- academic-serious

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Deep Slate | `#222222` | neutral | Primary page background, general surface. The canvas against which all other elements are presented, providing a deep, consistent visual anchor. |
| Rich Mocha | `#201819` | neutral | Background for certain interactive elements or sections, offering a slightly warmer, off-black variant for subtle depth contrast. |
| Ink Black | `#000000` | neutral | Text for light backgrounds (not currently prevalent but present in the data), subtle borders, icons. Used when maximum contrast is needed against lighter neutrals. |
| Digital White | `#ffffff` | neutral | Primary text color against dark backgrounds, iconography, borders on dark elements. The main bright element that draws attention to content. |
| Ash Gray | `#d0d1d4` | neutral | Subtle text and accents against dark backgrounds, providing slightly lower contrast than Digital White. |
| Pale Stone | `#dbdbdb` | neutral | Decorative lines, muted borders, or backgrounds where a very light neutral is needed against a dark surface. |
| Amber Parchment | `#dfc78` | brand | Accent text and borders for specific 'book' modules, evoking aged paper or a golden glow. This color is one of the many distinct identity markers for individual books. |
| Indigo Ink | `#18185` | brand | Accent text and borders for specific 'book' modules, providing a deep, intellectual pop of color. Distinct identity. |
| Rose Bloom | `#ebadcb` | brand | Accent text and borders for specific 'book' modules, offering a softer, delicate counterpoint. Distinct identity. |
| Cerulean Haze | `#dee6ff` | brand | Accent text and borders for specific 'book' modules, a cool, almost metallic bright. Distinct identity. |
| Terra Cotta | `#e48244` | brand | Accent text and borders for specific 'book' modules, a grounded, warm accent. Distinct identity. |
| Crimson Blaze | `#ff4445` | brand | Accent text and borders for specific 'book' modules, a bold and energetic marker. Distinct identity. |
| Midnight Violet | `#0b1743` | brand | Accent text and borders for specific 'book' modules, a dark, rich, and mysterious tone. Distinct identity. |

## Typography
- role: Headlines and prominent navigation items. Its refined form combined with a slightly larger letter-spacing provides a sense of considered elegance. The range of weights allows for hierarchy where 400 is dominant and 600 provides emphasis.; sizes: 15px, 16px, 17px, 18px, 21px; family: Ivar Headline; weight: 400, 600; lineHeight: 1.00, 1.20, 1.30, 1.50; substitute: Georgia; letterSpacing: -0.3px at 15px, -0.32px at 16px, -0.36px at 18px, -0.42px at 21px
- role: Body text, subheadings, and more detailed descriptions. The serif style lends an academic, timeless feel. Its slightly tighter letter-spacing ensures readability in longer passages.; sizes: 14px, 16px, 17px, 18px, 25px; family: Ivar Text; weight: 400, 500; lineHeight: 1.00, 1.20, 1.30, 1.40, 1.50; substitute: Lora; letterSpacing: -0.27px at 14px, -0.34px at 17px, -0.47px at 25px

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "all": "2px"
    },
    "elementGap": "4-24px",
    "sectionGap": "20-30px",
    "cardPadding": "0px"
  },
  "radius": {
    "all": "2px"
  }
}
```

## Component Patterns
- name: Book Spine Cards Stack
- name: Stripe Press Header Logo + Tagline
- name: Scroll Progress Indicator
- name: Book Card (Generic); role: Informational display
- name: Header Navigation Link; role: Primary navigation
- name: Scroll Indicator; role: Global navigation/progress
- name: Newsletter Subscribe Input; role: Form Element
- name: Subtle Text Link (Footer); role: Secondary navigation/information

## Do
- Prioritize `Deep Slate` (#222222) as the default page background for a consistent dark theme.
- Use `Digital White` (#ffffff) for all primary text against dark backgrounds, maintaining high contrast.
- Apply `Ivar Headline` at 15px weight 400 with `letter-spacing: 0.015em` for all navigation and prominent headers.
- Ensure all interactive elements (like book cards) have a distinct accent color for their text and a contrasting background, drawing from the `brand` group.
- Maintain a 0px border radius for most elements and a sharp 2px for subtle interactive components like scroll indicators, preserving the precise, angular aesthetic.

## Don't
- Avoid generic button styles with borders or solid background colors, as buttons are primarily represented by the 'book' aesthetic.
- Do not introduce strong drop shadows, as the system relies on distinct background colors for depth and separation.
- Do not deviate from the `Ivar Headline` and `Ivar Text` fonts; custom typography is a core identity element.
- Refrain from using gradients on surfaces or text; this design relies on solid, distinct color blocks.
- Avoid highly rounded corners; the dominant shape is rectangular, with minimal 2px radii for specific components.