Stripe Press Design System

Overview

Stripe Press presents itself as a dark, editorially-driven publishing imprint where the canvas is deliberately submerged in near-black tonality. The visual voice borrows from high-end art-book production: generous negative space, sharp-cornered geometry, and a proprietary serif typeface (Ivar) that carries the weight of traditional letterpress aesthetics into digital space. The dominant mood is contemplative and premium—content is afforded room to breathe, and the darkness creates an intimate reading environment that feels closer to a dimmed gallery than a commerce storefront.

Brand voltage lives most visibly in the book card components, which operate as a signature sub-system within the larger page. Each published work receives its own saturated background treatment—cyan, deep purple, antique gold, olive-brown, midnight navy—creating a chromatic catalog that punctuates the otherwise monochromatic dark layout. These colored rectangles function as both navigation targets and identity markers, turning the browsing experience into a visual rhythm of discovery. The primary brand color {colors.primary} (a deep indigo at #18185e) appears sparingly, reserved for text-on-gold treatments and subtle semantic emphasis rather than as a dominant surface fill.

The single typographic move that defines this system is its restraint in weight: even display roles cap at font-weight: 600, never venturing into bold territory. Hierarchy is achieved through size contrast (the display-xl at 48px against body text at 17px), through the dual-family split between Ivar Headline (headings) and Ivar Text (body), and through the strategic deployment of the book-card color accents. Letter-spacing is consistently positive (0.32px) on heading faces—a subtle opening that gives the serif characters room to breathe without drifting into all-caps shoutiness.

Shape language is aggressively sharp-cornered. The radius scale tops out at {rounded.sm} (3px), and the majority of components—including every book card, input field, and navigation element—use {rounded.none} (0px). This geometric austerity reinforces the editorial, print-first sensibility; nothing here softens into the pill-shaped friendliness of SaaS dashboards. The only concession to rounding appears on range slider tracks, a functional necessity rather than a stylistic choice.

Two distinct sub-systems are observable: the navigation dialect (left-rail vertical menu with minimal iconography and warm-gray inactive states) and the book-card dialect (full-width or grid-placed colored rectangles with white or contrasting text, each carrying a unique background token from the surface-* family). A third latent system—the overlay/notification panel (light-surface modal with Chroma/Slate theming)—appears in the DOM but remains collapsed in the static view.

Key Characteristics:

• Dark-mode-first canvas ({colors.canvas} — #222222) with {colors.ink} (#ffffff) text for maximum contrast on editorial surfaces
• Proprietary Ivar typeface pair: {typography.display-lg} (Ivar Headline, 17.6px, weight 600) for headings, {typography.body-md} (Ivar Text, 17px, weight 500) for prose
• Sharp geometry throughout: {rounded.none} (0px) on all book cards and inputs, max radius of {rounded.sm} (3px) on sliders
• Signature book-card sub-system with per-title saturated backgrounds: {component.book-card-cyan}, {component.book-card-purple}, {component.book-card-gold}, {component.book-card-brown}, {component.book-card-navy}
• Vertical sidebar navigation ({component.sidebar-nav}, 87px wide) with {colors.muted-warm} inactive states
• Generous vertical rhythm: {spacing.section-xxl} (104px) as the dominant section-spacing unit
• Zero box-shadow elevation—depth is created through color-layering and opacity only
• Positive letter-spacing (0.32px) on all heading typography roles

Colors

Brand & Accent

• Primary ({colors.primary} — #18185e): Deep indigo used for high-contrast text on gold-toned surfaces (e.g., {component.book-card-gold}) and as a latent brand anchor. Never used as a background fill in the observed view.
• Primary Active ({colors.primary-active} — #12124a): Darkened indigo for pressed/active states on any primary-colored interactive elements.
• Accent ({colors.accent} — #dbc895): Warm antique gold serving as the default link color and as text color on purple book-card backgrounds ({component.book-card-purple}). Carries the warmth of aged paper into the digital palette.

Surface

• Canvas ({colors.canvas} — #222222): The primary page background—a very dark charcoal that reads as "black" in context but retains enough value to create subtle layering against true-black overlays.
• Surface Dark ({colors.surface-dark} — #1c1b19): Near-black with warm undertones, used for body text backgrounds in inverted/light-content zones.
• Surface Deep ({colors.surface-deep} — #0d121f): Midnight navy-blue so dark it reads as black; serves as the background for {component.book-card-navy}.
• Surface Purple ({colors.surface-purple} — #292432): Deep plum/eggplant; background for {component.book-card-purple}. One of five signature book-card colors.
• Surface Brown ({colors.surface-brown} — #6e665b): Muted olive-brown; background for {component.book-card-brown}. The most earthy of the book-card palette.
• Surface Cyan ({colors.surface-cyan} — #bdf3f5): Pale turquoise/aqua; background for {component.book-card-cyan}. The lightest book-card surface, requiring dark text.
• Surface Gold ({colors.surface-gold} — #c1b676): Muted mustard/ochre; background for {component.book-card-gold}. Pairs with {colors.primary} indigo text.
• Surface Red ({colors.surface-red} — #4d1a28): Deep burgundy/maroon; detected in the color inventory but not visible in the above-fold screenshot—likely used for a book card below the fold or for error/danger semantics.
• Surface Light ({colors.surface-light} — #e2e2e2): Light gray; reserved for inverted-context panels like the notification center overlay.
• Surface Pale Cyan ({colors.surface-pale-cyan} — #bdf3f5): Alias for {colors.surface-cyan}; maintains naming consistency for light-surface contexts.

Text & Ink

• Ink ({colors.ink} — #ffffff): Pure white; the primary text color on all dark surfaces ({colors.canvas}, {colors.surface-dark}, {colors.surface-deep}, {colors.surface-purple}). Used for headings, navigation labels, and body text in dark-mode contexts.
• Body ({colors.body} — #1c1b19): Near-black; used for body text on light surfaces ({colors.surface-cyan}, {colors.surface-light}). Ensures readability against pale backgrounds.
• Body Dark ({colors.body-dark} — #000000): True black; used specifically for {component.email-input} text on semi-transparent dark backgrounds.
• Muted ({colors.muted} — #504f4f): Mid-gray; for de-emphasized text, captions, and secondary information on light surfaces.
• Muted Warm ({colors.muted-warm} — #9d968e): Warm taupe-gray; the inactive/disabled state color for sidebar navigation items ({component.sidebar-nav-item}) and range slider tracks.
• On Primary ({colors.on-primary} — #ffffff): White text for any surface filled with {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text for any dark-surface context; functionally identical to {colors.ink} in this system.
• On Surface Cyan ({colors.on-surface-cyan} — #d0d1d4): Cool light gray; text color on the navy book card ({component.book-card-navy}) where pure white would be too stark.
• On Surface Gold ({colors.on-surface-gold} — #dfc78e): Light gold/cream; text color on the brown book card ({component.book-card-brown}), creating a monochrome warm pairing.
• On Surface Purple ({colors.on-surface-purple} — #dbc895): Gold/warm cream; text color on the purple book card ({component.book-card-purple}), identical to {colors.accent}.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.15)): Subtle white-at-15%-opacity divider for separating zones on dark backgrounds without creating harsh lines.
• Hairline Strong ({colors.hairline-strong} — rgba(255, 255, 255, 0.25)): More visible white divider for active or emphasized boundaries.
• Border Input ({colors.border-input} — rgba(0, 0, 0, 0.067)): Extremely subtle dark tint for input field boundaries on light/semi-transparent backgrounds.

Semantic

• Link ({colors.link} — #dbc895): Gold/warm tone for inline links, matching {colors.accent}. Provides visibility against dark backgrounds without the blueness of traditional web links.
• Link Active ({colors.link-active} — #ffffff): White for hovered/active link states, creating a brightening interaction response.
• Error ({colors.error} — #c13515): Deep red-orange for validation errors and destructive actions—not directly observed but included for system completeness.
• Success ({colors.success} — #006400): Dark green for confirmation states—not directly observed but standard for form systems.

Typography

Font Family

Stripe Press employs a dual-face proprietary serif stack: Ivar Headline serves all heading, label, navigation, and button text (173 DOM occurrences), while Ivar Text (with Georgia fallback) handles body copy, captions, and longer-form reading content (48 occurrences). Both faces are from Klim Type Foundry's Ivar family—a contemporary serif inspired by 16th-century French Old Style type, characterized by modulated stroke contrast, bracketed serifs, and a slightly condensed proportion that feels both scholarly and modern. The absence of any sans-serif face in the extracted data is notable: this system commits fully to the editorial serif aesthetic, using weight and size (not font-family switching) to create hierarchy. Georgia appears only as a fallback for Ivar Text, ensuring graceful degradation if the webfont fails to load.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 600 | 1.15 | -0.02em | Hero-level page titles (inferred; not in above-fold) | | {typography.display-lg} | 17.6px | 600 | 1.1 | 0.32px | Main brand mark ("Stripe Press"), section headers | | {typography.title-md} | 16px | 600 | 1.3 | 0.32px | Subsection headings, book titles on cards | | {typography.title-sm} | 16px | 400 | 1 | 0.32px | Tagline text ("Ideas for progress"), lighter headings | | {typography.body-md} | 17px | 500 | 1.5 | normal | Primary body copy, paragraph text, email input | | {typography.body-sm} | 16px | 500 | 1 | normal | Compact body text, card metadata | | {typography.caption} | 13.33px | 400 | 1.38 | normal | Sidebar nav items, range slider labels, fine print | | {typography.button} | 16px | 600 | 1.25 | 0.32px | Book card text, CTA button labels | | {typography.nav-item} | 14px | 400 | 1.4 | normal | Navigation menu items (inferred from structure) | | {typography.label} | 14px | 600 | 1.3 | 0.32px | Form labels, category tags (inferred) |

Principles

The typography system's defining discipline is weight restraint: no element exceeds font-weight: 600, and the majority of body text sits at 500 (medium). This choice prevents the page from feeling heavy or aggressive despite the dark background—instead of shouting through boldness, the type earns attention through its elegant proportions and the high contrast of white-on-charcoal. Heading hierarchy relies primarily on the Ivar Headline vs. Ivar Text family split first, then on size (17.6px for display roles vs. 16px for titles), then on weight (600 for important titles vs. 400 for the tagline).

Letter-spacing is consistently positive on all heading faces at 0.32px—approximately 2% of the font size. This slight opening prevents the dense serif characters from clumping together in dark-mode rendering and evokes the tracked-out headlines of magazine design. Body text uses normal (browser-default) spacing, preserving the natural rhythm of the serif for readability in longer passages.

The size scale is remarkably compressed for a landing page: the largest observed role (display-lg) is only 17.6px—scarcely larger than body text at 17px. This suggests either (a) the above-fold content is intentionally understated with larger display sizes reserved for deeper-scroll hero sections, or (b) the system's hierarchy derives more from color, position, and spatial arrangement than from typographic scale. The inferred display-xl at 48px exists to provide a proper hero token for implementation, even though it doesn't appear in the initial viewport.

Note on Font Substitutes

Ivar Headline and Ivar Text are proprietary fonts from Klim Type Foundry and require licensing for web embedding. For open-source prototyping and development without licensed access, substitute with:

• Ivar Headline → Lora (Google Fonts): A similarly modulated serif with Old Style proportions, available at weights 400–700. Use font-weight: 600 to approximate Ivar Headline's heft.
• Ivar Text → Lora or Crimson Text (Google Files): Crimson Text offers slightly better reading-text proportions for body copy. Use font-weight: 500 (which maps to the 600 weight file in most Google Font packages).

Define CSS variables for easy swapping:

--font-heading: 'Ivar Headline', 'Lora', 'Georgia', serif;
--font-body: 'Ivar Text', 'Crimson Text', 'Georgia', serif;

Layout

Spacing System

• Base unit: 4px (inferred from the xxs: 4px token), though the dominant rhythmic unit is actually 5px ({spacing.xs}), appearing 42 times in the extracted data—likely used as a repeating gap or margin increment in the book-grid system.

• Tokens:

  • {spacing.xxs} (4px): Micro-adjustments, inner gutters.
  • {spacing.xs} (5px): The workhorse unit—likely inter-card gap or repeated margin step.
  • {spacing.sm} (6px): Small internal padding.
  • {spacing.md} (12px): Component-internal spacing, tight grouping.
  • {spacing.lg} (16px): Standard padding for compact components.
  • {spacing.xl} (20px): Medium component padding.
  • {spacing.xxl} (24px): Generous component padding, form group spacing.
  • {spacing.section} (50px): Section-to-section vertical rhythm (21 occurrences).
  • {spacing.section-xl} (68px): Major section breaks (2 occurrences).
  • {spacing.section-xxl} (104px): Hero-scale vertical breathing room (42 occurrences—the dominant spacing value).
  • {spacing.nav-pad} (24.4px): Specific padding value for the sidebar navigation container.
  • {spacing.header-horiz} (67.7px): Horizontal padding for the top header bar.
  • {spacing.section-bottom} (225px): Extraordinary bottom padding on the main section—likely accommodating scroll-triggered reveals or a tall footer zone.

• Section padding (vertical): {spacing.section-xxl} (104px) dominates the above-fold area, creating the spacious, gallery-like cadence between content bands. {spacing.section} (50px) handles more routine section breaks deeper in the page.

• Card internal padding: Book cards use an unusual asymmetric horizontal padding of 0px 103.6px (zero vertical, ~104px horizontal)—suggesting the cards are full-width containers with text centered in a constrained column.

• Gutters: The main content area has no explicit max-width constraint (max-width: none, width: 1440px) but uses {spacing.header-horiz} (67.7px) horizontal padding on the header and approximately 115px on sections, creating comfortable margins within the 1440px viewport.

Grid & Container

• Max content width: 1440px (explicit on <main> and <header> elements). This is a wide, cinema-aspect canvas suited to the book-showcase format.
• Editorial density: Low-to-moderate. The dark background and large spacing units ({spacing.section-xxl}) push toward an airy, gallery-style density where individual book cards receive significant visual real estate.
• Grid behavior: The book cards appear to be arranged in a single-column or two-column masonry within each section (the PressHomepageBook class suggests a repeating pattern). The 104px horizontal padding on each card implies centered text within a wide container, not edge-to-edge fills.
• Hero column splits: Not visible in the above-fold (the screenshot shows primarily navigation + empty canvas), but the presence of PressHomepageCanvas__container and PressHomepage__backgroundFill layers suggests a full-bleed hero with overlaid content, possibly parallax-enabled.

Whitespace Philosophy

Stripe Press practices radical generosity with vertical whitespace. The 104px spacing unit (used 42 times) and the extraordinary 225px bottom-padding on sections indicate a scroll-driven narrative where content bands are separated by enough darkness to feel like distinct "rooms" or "chapters." This is not marketplace-dense nor is it landing-page-punchy—it's editorial-airy, trusting that the reader will scroll through a contemplative, unhurried experience. Horizontally, the 1440px container with ~68-115px side margins keeps text columns comfortably narrow (estimated readable line length of ~600-700px for body copy).

Header Architecture

|--------------------------------------------------------------------------------|
| [Logo: Stripe Press]                                   [Nav items / utilities] |
|   Ideas for progress                                                        |
|--------------------------------------------------------------------------------|
  ↑ padding: 0px 67.7px
  Background: transparent (overlays the dark canvas)

The header is minimal: flush-left logo lockup (brand name in {typography.display-lg}, tagline in {typography.title-sm}), with the right side presumably holding utility navigation (not visible in the cropped screenshot). The background is transparent, allowing the dark canvas ({colors.canvas}) to show through.

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|  [Full-bleed background fill / film layer]                                     |
|                                                                                |
|  [Canvas container — likely holds animated/scroll content]                     |
|                                                                                |
|--------------------------------------------------------------------------------|
  ↑ padding: governed by {spacing.section-xxl} (104px) vertically

The above-fold hero area is dominated by layered divs (PressHomepage__backgroundFill, PressHomepage__filmBackground, PressHomepageCanvas__container) suggesting a video or cinematic background with overlaid canvas-based animation. The actual headline/CTA content likely lives within PressHomepageCanvas__container or appears on scroll. The screenshot captures the initialized-but-empty state before content renders or scrolls into view.

Sidebar Navigation

|
|-- [Nav item 1]  ← 87px wide column
|-- [Nav item 2]
|-- [Nav item 3]
|-- [... ~15 items ...]
|-- [Icon: video/film]
|-- [Icon: help/?]
|
  ↑ padding: 24.4px on the <nav> element
  Width: 87px fixed
  Position: Left rail (sticky implied by class structure)

A fixed/sticky left-rail navigation approximately 87px wide, containing 15+ vertically stacked items (likely chapter markers or section anchors), followed by utility icons for video content and help. Items render in {colors.muted-warm} (#9d968e) when inactive, transitioning to {colors.ink} (#ffffff) when active or hovered.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat baseline | No shadow, {colors.canvas} background | Page body, header, sidebar | | 1 — Color block | Solid {colors.surface-*} fill | Book cards, input fields | | 2 — Overlay backdrop | rgba(0, 0, 0, 0.5) semi-transparent | Modal/notification backdrop (NotificationCenter__backdrop) | | 3 — Elevated panel | {colors.surface-light} on top of backdrop | Notification panel (NotificationCenter__list) |

Philosophy: This is a flat-with-color-layering system. There are zero box-shadows in the extracted data—no box-shadow property appears on any component. Depth is communicated exclusively through: (a) background-color value differences (dark canvas vs. slightly darker overlay vs. light modal panel), (b) opacity layers (the 50% black backdrop), and (c) the z-index stacking of the notification center over the main content. This choice reinforces the print/editorial aesthetic—printed books don't have drop shadows, and neither does Stripe Press. The only exception to flatness is the multi-layered hero architecture (backgroundFill → filmBackground → canvasContainer → filmOverlay), which may introduce parallax or video-based depth through motion rather than static shadows.

Decorative Depth

The film/video layer (PressHomepage__filmBackground, PressHomepageFilmOverlay) represents the system's primary decorative depth mechanism—a cinematic background that likely plays behind the static UI elements. This is not a gradient wash or abstract shape layer but what appears to be actual video content (given the "film" nomenclature and the separate PodcastTranscriptOverlay layer), positioning the page as a multimedia editorial experience rather than a static document.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | Book cards, email inputs, navigation, header, all major components | | {rounded.xs} | 2px | Minor decorative elements (detected, usage unclear) | | {rounded.sm} | 3px | Range slider tracks (the only rounded-interactive element) | | {rounded.DEFAULT} | 2px | System default fallback |

The shape vocabulary is intentionally minimal: three tokens covering 0–3px. This is not an oversight but a deliberate design choice that aligns with the sharp-edged, print-inspired aesthetic. Book cards—the most visually prominent repeating elements—are strictly rectangular with square corners, reinforcing their identity as "covers" or "plates" rather than app-like cards. The only element receiving rounding beyond 0px is the range slider track at 3px, a functional requirement for the thumb control rather than a stylistic preference.

Photography Geometry

No photography was visible in the above-fold screenshot (the viewport captured primarily the dark canvas, navigation, and empty hero state). However, based on the book-card components and the editorial nature of the brand, imagery (when present) would likely follow these conventions:

• Book covers: Displayed as sharp-cornered rectangles matching {rounded.none}, possibly with the same per-title background colors observed on the text-only cards.
• Author portraits: Likely circular or sharply cropped (consistent with the minimal-radius language), rendered in warm or desaturated tones to match the {colors.muted-warm} palette.
• Illustrations: Full-bleed or contained within sharp-cornered frames, probably using the signature surface colors as compositional elements.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Navigation & Header

{component.top-nav} — The top-level header bar spanning the full 1440px width with transparent background and {spacing.header-horiz} (67.7px) horizontal padding. Contains the logo lockup on the left and (presumably) utility links on the right. Text color is {colors.ink} (#ffffff) rendered in {typography.nav-item} or smaller. No border, no shadow, no background fill—floats over the dark canvas.

{component.top-nav-logo} — The "Stripe Press" wordmark displayed in {typography.display-lg} (Ivar Headline, 17.6px, weight 600) in white ({colors.ink}). This is the primary brand identifier and the only element using the display-lg role in the above-fold view.

{component.top-nav-tagline} — The "Ideas for progress" strapline beneath the logo, set in {typography.title-sm} (Ivar Headline, 16px, weight 400) in white. The weight reduction from 600→400 creates a clear visual subordinate relationship to the main logo while maintaining the same typeface family.

{component.sidebar-nav} — The fixed left-rail navigation column, 87px wide with {spacing.nav-pad} (24.4px) padding. Contains 15+ vertically stacked navigation items (likely section anchors or chapter markers) followed by utility icons. Background is transparent, allowing {colors.canvas} to show through.

{component.sidebar-nav-item} — Individual items within the sidebar, rendered in {typography.caption} (13.33px) in {colors.muted-warm} (#9d968e)—a warm gray that recedes visually against the dark background. Sharp corners ({rounded.none}), no background fill, text-only presentation.

{component.sidebar-nav-item-active} — The currently-visible or hovered sidebar item, identical to {component.sidebar-nav-item} but with text color upgraded to {colors.ink} (#ffffff). This brightness shift (from warm-gray to pure white) provides the only indication of state change in the navigation system.

{component.sidebar-help-icon} — The question-mark icon at the bottom of the sidebar rail, approximately 24px×24px, rendered in {colors.ink}. Likely opens a help modal or tooltip. Custom SVG icon (not from a detected library).

Book Cards (Signature Sub-System)

{component.book-card-cyan} — A book card (or book-card-style button) with {colors.surface-cyan} (#bdf3f5) background and {colors.body} (#1c1b19) near-black text. Uses {typography.button} (Ivar Headline, 16px, weight 600) for the title/author text. Sharp corners ({rounded.none}), generous horizontal padding of 0px 103.6px. Represents one of the published works in the catalog (observed text: "Nomad Letters / Nick Sleep"). No border, no shadow—relies entirely on the cyan background to stand out against the dark page.

{component.book-card-purple} — Variant with {colors.surface-purple} (#292432) deep plum background and {colors.on-surface-purple} (#dbc895) gold text. Same typography, padding, and corner treatment as the cyan variant. Observed text: "Built to Grow / Stephanie". The purple/gold combination is one of the more luxurious pairings in the book-card palette.

{component.book-card-gold} — Variant with {colors.surface-gold} (#c1b676) ochre background and {colors.primary} (#18185e) indigo text. This is the only book card that uses the primary brand color as its text color, creating a strong brand moment within the catalog. Observed text: "Poor Charlie's Almanack".

{component.book-card-brown} — Variant with {colors.surface-brown} (#6e665b) olive-brown background and {colors.on-surface-gold} (#dfc78e) cream text. An earthy, muted pairing that stands apart from the more saturated cyan and purple cards. Observed text: "Maintenance / Stewart Brand".

{component.book-card-navy} — Variant with {colors.surface-deep} (#0d121f) midnight-navy background and {colors.on-surface-cyan} (#d0d1d4) cool-gray text. The darkest of all book cards—so dark that pure white text would be too harsh, hence the softened gray. Observed text: "The Origins of Efficiency".

All five book cards share identical structural properties (size, padding, typography role, corner radius) and differ only in their background/text color pairings. This makes them ideal candidates for a single React/Vue component with a variant="cyan"|"purple"|"gold"|"brown"|"navy" prop driving the color token selection.

Inputs & Forms

{component.email-input} — An email text input with a semi-transparent dark background (rgba(0, 0, 0, 0.067)) and true-black text ({colors.body-dark}). Uses {typography.body-md} (Ivar Text, 17px, weight 500). Asymmetric padding of 1px 2px 1px 8px (tight vertical, slightly more on the left for text inset). Sharp corners ({rounded.none}), no visible border—blends subtly into whatever surface it sits on. Likely part of a newsletter signup form.

{component.range-slider} — A range/input[type=range] slider control with white ({colors.ink}) background track and {colors.muted-warm} (#9d968e) thumb/color. Uses {typography.caption} sizing (13.33px). The only component in the system with non-zero border radius ({rounded.sm} = 3px), applied to the track for functional reasons. Likely controls volume, playback position, or a similar continuous parameter in the audio/video player interface.

Overlays & Panels

{component.overlay-backdrop} — A semi-transparent black overlay at 50% opacity (rgba(0, 0, 0, 0.5)) used to dim the main content when a modal or notification panel is open. Part of the NotificationCenter system detected in the DOM but not visible in the static screenshot.

{component.overlay-panel} — The light-surface panel that appears on top of the backdrop, using {colors.canvas} (#222222) or {colors.surface-light} (#e2e2e2) as background with {colors.body} (#1c1b19) text. Houses the notification list or detail content. Sharp corners, no shadow—relies on the backdrop for visual separation.

Structural Components

{component.hero-band} — The full-width hero section container with {colors.canvas} background and {typography.display-xl} typography (inferred for the headline that would appear here). Padding of {spacing.section-xxl} (104px) vertical and {spacing.header-horiz} (~68px) horizontal. Contains the layered background-fill, film-background, and canvas-container child elements.

{component.footer} — Page footer (inferred from standard page structure, not visible in screenshot). Would use transparent background, {colors.muted} (#504f4f) text in {typography.body-sm}, and {spacing.xxl} (24px) padding. Minimal and unobtrusive, consistent with the system's restrained aesthetic.

Do's and Don'ts

Do

• Do use {typography.display-lg} (17.6px, weight 600) for the brand wordmark and primary section headers—never exceed weight 600 in any context.
• Do apply {rounded.none} (0px) to all book cards, buttons, and navigation elements—sharp corners are a defining characteristic of this system.
• Do reserve the {colors.surface-*} saturated backgrounds (cyan, purple, gold, brown, navy) exclusively for the book-card sub-system—these colors should not leak into general UI surfaces.
• Do use {spacing.section-xxl} (104px) as your dominant vertical rhythm between major content bands—the generosity of whitespace is intentional and brand-defining.
• Do maintain the Ivar Headline/Ivar Text family split: headings and labels in Headline, body prose and captions in Text.
• Do apply letter-spacing: 0.32px to all {typography.*} roles ending in "display" or "title"—this positive tracking is essential to the open, editorial feel.
• Do use {colors.muted-warm} (#9d968e) for inactive/disabled navigation states—it's warmer than neutral gray and complements the dark canvas.
• Do keep the sidebar navigation rail at approximately 87px wide with {spacing.nav-pad} (24.4px) internal padding—this narrow column is a signature layout element.
• Do use rgba(0, 0, 0, 0.067) for input field backgrounds on dark surfaces—this near-transparent fill provides subtle separation without visible borders.
• Do treat the notification/overlay system as a light-surface "window" onto the dark page—the {colors.surface-light} (#e2e2e2) panel on rgba(0,0,0,0.5) backdrop creates a distinctive depth moment.

Don't

• Don't add box-shadow to any component—this system achieves depth through color-layering and opacity only; shadows would violate the flat, print-inspired aesthetic.
• Don't round corners beyond {rounded.sm} (3px), and apply that only to range sliders—all other elements must remain sharp at {rounded.none}.
• Don't use font-weight: 700 (bold) anywhere—the system caps at 600, and body text sits at 500; going bolder would break the restrained voice.
• Don't place {colors.primary} (#18185e) as a background fill on any surface in the observed design—it exists only as a text color on the gold book card and as a latent brand reference.
• Don't substitute sans-serif fonts for the Ivar serif stack—the entire identity rests on the editorial serif voice; sans-serif would make this look like a generic SaaS page.
• Don't reduce vertical spacing below {spacing.section} (50px) between content sections—the airy, gallery-like cadence requires significant breathing room.
• Don't use pure white (#ffffff) text on the {colors.book-card-navy} (midnight navy) surface—use {colors.on-surface-cyan} (#d0d1d4) instead to avoid excessive contrast glare.
• Don't add gradients or glassmorphism effects to the header or navigation—transparency over the solid {colors.canvas} background is the only treatment used.
• Don't mix the book-card color palettes across components—each book "owns" its specific background/text pairing, and cross-pollution (e.g., gold text on cyan background) would break the catalog's visual logic.
• Don't implement hover states as color changes alone—consider combining color shifts with subtle opacity transitions (the extracted CSS shows opacity 0.2s and opacity 0.5s transitions, suggesting fade-based interactions).

Motion & Animation

Transition Tokens

--transition-opacity-subtle: opacity 0.2s ease-out;
--transition-opacity-standard: opacity 0.5s ease-out;
--transition-transform-base: transform 0.2s ease-out;
--transition-transform-stagger-1: transform 0.3s 1.4s ease-out;
--transition-transform-stagger-2: transform 0.3s 1.5s ease-out;
--transition-transform-stagger-3: transform 0.3s 1.6s ease-out;
--transition-transform-stagger-4: transform 0.3s 1.7s ease-out;
--transition-all: all ease-out;

The transition data reveals a staggered animation system where transform transitions share a 0.3s duration but are delayed in 100ms increments (1.4s, 1.5s, 1.6s, 1.7s). This pattern strongly suggests scroll-triggered sequential reveal animations—as the user scrolls, elements animate in one after another with precise timing offsets. The opacity transitions (0.2s and 0.5s) likely handle fade-in/fade-out for overlays, tooltips, and the notification panel.

Keyframe Animations

No explicit @keyframes rules were detected in the extracted CSS. The motion system relies entirely on transition-based animations (not keyframe-defined sequences), which is consistent with scroll-driven reveal patterns where JavaScript/IntersectionObserver triggers class toggles that activate CSS transitions.

Interaction Patterns

• Scroll-triggered reveals: Elements animate in with transform (likely translateY or scale) using the staggered 1.4s–1.7s delay sequence. This creates a cascading entrance effect as the user scrolls through book cards and content sections.
• Overlay fade-in/out: The notification center and modal panels use opacity transitions (0.2s for quick dismissal, 0.5s for more deliberate appearance) combined with the rgba(0,0,0,0.5) backdrop.
• Video/film playback: The PressHomepage__filmBackground and PressHomepageFilmOverlay layers suggest embedded video content that may play/pause/seek based on scroll position (a "cinematic scroll" pattern).
• Navigation state changes: Sidebar items likely transition between {colors.muted-warm} (inactive) and {colors.ink} (active) using color or opacity transitions, though the specific duration isn't captured in the static extract.
• Range slider interaction: The slider thumb moves smoothly (implied by the component's presence in what appears to be a media-player interface).
• Book card hover inference: While not documented per the no-hover policy, the symmetry of the system suggests book cards may exhibit subtle brightness shifts or scale transforms on hover, using the --transform-base (0.2s) timing.

Imagery Style

• Dominant imagery type: Video/cinematic content (evidenced by the filmBackground, filmOverlay, and canvasContainer layer architecture). The homepage likely features a looping or scroll-driven video backdrop.
• Book covers as graphic elements: Each published work is represented by a solid-color rectangular card with typography only (no cover imagery visible in the data)—the color is the visual identity for each book.
• Color treatment of imagery: When imagery does appear (author photos, book cover art), it would likely be rendered in warm, desaturated tones or converted to monochrome to harmonize with the {colors.muted-warm} and {colors.canvas} palette.
• Imagery role: Supportive, not dominant. The dark canvas and typography carry the primary visual weight; imagery (including video) functions as atmospheric background rather than focal-point content.
• Signature technique: The per-title color identity system (five distinct background colors for five books, each with a carefully paired text color) is the primary "imagery" strategy—graphic color blocks replace photographic covers in the navigation/catalog view.
• Overlay/transparency: The PressHomepage__backgroundFill and film layers suggest imagery may be tinted, blurred, or darkened via CSS overlays to ensure text readability.
• No gradients detected: Despite the rich color palette, no linear/radial gradients appear in the extracted CSS—color is applied as solid fills only.
• Illustration style (inferred): If illustrations exist deeper in the site, they would likely follow the sharp-cornered, solid-color aesthetic of the book cards—possibly using the same {colors.surface-*} palette.

Icon System

• Library: Custom SVG icons (no detected third-party icon library such as Lucide, Heroicons, Material Icons, or Font Awesome in the framework detection data).
• Specific icons observed:
  • Video/film icon: A small icon (likely a play-button or film-strip symbol) in the sidebar navigation, positioned near the bottom of the nav stack. Rendered in {colors.muted-warm}.
  • Help/question-mark icon: A "?" symbol at the very bottom of the sidebar, serving as a help/utility trigger. Rendered in {colors.ink} (#ffffff).
  • Stripe Press logo: The stylized "S" mark accompanying the wordmark in the header—this is a brand mark rather than a functional icon but follows the same custom-SVG origin.
• Treatment: Stroke-based or simple fill icons (exact vector data not available in CSS extraction). Color is almost certainly currentColor to inherit from parent text color tokens. Size is small—approximately 16–24px based on sidebar proportions.
• Alignment: Icons in the sidebar are left-aligned within the 87px column, vertically stacked with consistent spacing (likely {spacing.xs} or {spacing.sm} between items). They sit alongside or replace text labels in the nav items.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro — the static-editorial nature and 
                  presence of video/layers suggest a modern meta-framework with 
                  good asset optimization
- Styling:        CSS Modules or Vanilla Extract — the custom-property-heavy, 
                  token-driven approach fits CSS Modules' scoping; Tailwind is 
                  possible but the 103.6px literal padding values suggest 
                  hand-tuned CSS
- Fonts:          Self-hosted Ivar Headline & Ivar Text via @font-face (Klim Type 
                  Foundry license required); fall back to Google Fonts (Lora, 
                  Crimson Text) for development
- Animation:      Framer Motion (for scroll-triggered staggered reveals matching 
                  the 1.4s–1.7s delay pattern) or vanilla IntersectionObserver + 
                  CSS transitions
- Icons:          Custom SVG components (inline React/Vue SVG components for the 
                  film icon, help icon, and logo mark)
- Component lib:  None (custom components) — the book-card sub-system and unique 
                  overlay patterns don't map cleanly to shadcn/Radix primitives

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Sidebar nav collapses to hamburger; book cards stack single-column; horizontal padding reduces from ~68px to ~16px | | Tablet | 640px – 1024px | Sidebar may persist as collapsible rail; book cards move to 2-column grid; hero typography scales down | | Desktop | 1024px – 1440px | Full layout: 87px sidebar, 1440px container, book cards in 2-3 column arrangement | | Wide | > 1440px | Container may center with auto margins; sidebar remains fixed; additional horizontal padding scales |

Note: Breakpoint values are inferred from standard responsive patterns—the extracted CSS contains only desktop (1440px) values.

Touch Targets

• {component.book-card-cyan} (and variants): Full-width or wide rectangular areas (padding 0px 103.6px implies substantial clickable surface)—well above 44×44px minimum.
• {component.email-input: Height inferred from line-height (25.5px at 17px font) plus padding (~28px total)—may fall slightly short of 44px; recommend increasing vertical padding to 8px 2px 8px 8px for mobile touch compliance.
• {component.sidebar-nav-item: Text-based nav items in a 87px column—height depends on font-size (13.33px) and line-height; likely ~20–24px, which is below the 44×44 WCAG AAA target. Recommend increasing tap area with padding or min-height on mobile.
• {component.range-slider: Standard browser range input—typically 20–30px tall on most platforms; consider a custom taller handle for touch interfaces.

Collapsing Strategy

• Sidebar navigation: On mobile (< 640px), the 87px left rail should collapse into a hamburger menu or bottom-sheet drawer. The 15+ nav items would overflow a small screen if kept visible. Consider converting to a horizontal scrollable tab bar or a full-screen overlay menu.
• Book card grid: The current layout (inferred 1-2 column on desktop) should collapse to single-column stack on mobile, maintaining the {rounded.none} sharp corners and per-card background colors. The 103.6px horizontal padding should reduce to {spacing.lg} (16px) or {spacing.xl} (20px) on small screens.
• Hero section: The multi-layered hero (backgroundFill → filmBackground → canvasContainer) should simplify on mobile—possibly hiding the video layer on low-power devices or reducing to a static background image to preserve performance. {typography.display-xl} (48px) should scale down to 32px or 28px via fluid typography (clamp()).
• Header: The horizontal padding of 67.7px should reduce to 16px–24px on mobile. The logo/tagline lockup should remain visible but may stack vertically if space constrains.
• Overlay panels: The notification center (light surface on dark backdrop) should become full-screen on mobile rather than a centered modal, ensuring adequate touch target sizes and preventing viewport clipping.

Image Behavior

• Hero video/background: Should degrade gracefully to a static poster frame on mobile or on connections detected as slow (using Save-Data header or media query). The PressHomepage__filmBackground layer may be hidden entirely on small screens to reduce bandwidth.
• Book card graphics: Currently text-only color blocks (no images detected), but if book-cover imagery is added, it should use object-fit: cover with a consistent aspect ratio (likely 2:3 or 3:4 for portrait book covers) and maintain {rounded.none} corners.
• Author avatars (if added): Circular crop at 40–48px diameter for thumbnail views, scaling to 80–120px on author detail pages.

Iteration Guide

1. Set up the font stack first. Define @font-face declarations for Ivar Headline and Ivar Text (or use Google Fonts substitutes: Lora for Headline, Crimson Text for Body). Create CSS custom properties --font-heading and --font-body mapped to these families. Every {typography.*} token references these variables—get this right before building components.

2. Implement the color tokens as CSS custom properties. Extract every {colors.*} value from the YAML frontmatter into :root variables (e.g., --color-canvas: #222222; --color-ink: #ffffff;). Your component styles should reference only these variables, never hardcoded hex values. The book-card sub-system requires special attention: each variant maps to a specific surface-* + on-surface-* pair.

3. Build the dark-mode canvas foundation. Set body { background-color: var(--color-canvas); color: var(--color-ink); } as your baseline. Ensure the 1440px max-width container is centered with appropriate horizontal padding ({spacing.header-horiz} ≈ 68px on desktop, 16px on mobile).

4. Create the BookCard component as a polymorphic primitive. Accept a variant prop ("cyan" | "purple" | "gold" | "brown" | "navy") that selects the correct background/text color pair from your token set. All variants share: {typography.button} typography, {rounded.none} corners, 0px 103.6px padding, and no border/shadow. This single component generates all five {component.book-card-*} entries.

5. Implement the sidebar navigation as a fixed-position column. Width: 87px. Padding: {spacing.nav-pad} (24.4px). Nav items use {typography.caption} size, {colors.muted-warm} color by default, transitioning to {colors.ink} on .active class. Include the film-icon and help-icon (?) at the bottom as custom SVG components.

6. Add scroll-triggered animations using Framer Motion or IntersectionObserver. Implement the staggered reveal pattern: elements animate with transform over 0.3s, with delays incremented by 100ms (1.4s, 1.5s, 1.6s, 1.7s). Use opacity transitions (0.2s–0.5s) for overlay show/hide. This motion profile is a defining characteristic of the live site.

7. Build the overlay/notification system as a portal-rendered layer. Structure: fixed-fullscreen backdrop (rgba(0,0,0,0.5)) → centered panel ({colors.surface-light} background, {colors.body} text). Animate backdrop opacity (0.5s) and panel transform (0.3s) on mount/unmount.

8. Respect the "no shadow" rule rigorously. Audit every component for accidental box-shadow or drop-shadow properties. If you need visual separation, use background-color value differences (lighter/darker) or the overlay backdrop pattern—never shadows.

9. Test typography at the exact specified sizes and weights. The system's character lives in the subtlety of weight 500 body text and weight 600 headings. If your font files don't have a 500 weight, map to the closest available (often 500 = "Medium" in Google Fonts). Verify letter-spacing: 0.32px is applied to all heading roles.

10. Run the linter and validate token references. After implementation, run npx @google/design.md lint DESIGN.md to catch broken {token.path} references, orphaned tokens (defined but unused), and contrast-ratio warnings. Pay special attention to the book-card text/surface pairs—each combination must meet WCAG AA (4.5:1 for normal text).

Font Setup for Development (without Klim Type Foundry license):

/* Google Fonts substitutes */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;500;600&family=Lora:wght@400;500;600&display=swap');

:root {
  --font-heading: 'Lora', 'Ivar Headline', Georgia, serif;
  --font-body: 'Crimson Text', 'Ivar Text', Georgia, serif;
  
  /* Map to match the design token expectations */
  /* Lora 600 ≈ Ivar Headline 600 */
  /* Crimson Text 500 ≈ Ivar Text 500 */
}

Known Gaps

• Hover state styling: Per the no-hover policy, hover colors, transforms, and timing for buttons, nav items, and book cards are not documented. Implementation teams should derive hover states from the active/pressed variants and the observed transition timing (0.2s–0.5s).
• Loading skeletons / pending states: No loading indicators, spinners, or skeleton screens were visible in the static screenshot or DOM. The video/film layer may have its own loading state that wasn't captured.
• Form validation states: Only the default {component.email-input} and focus-inferred state are documented. Error states ({colors.error}), disabled states, and success confirmation styling are not present in the extracted data.
• Below-fold content: The screenshot captures primarily the above-fold navigation + empty hero state. Content sections below—including additional book cards, author bios, newsletter signup, footer, and any pricing/purchase flows—are not represented in the component inventory.
• Video/film layer specifics: The PressHomepage__filmBackground, PressHomepageFilmOverlay, and PressHomepageCanvas__container suggest complex media playback (possibly scroll-driven video, ambient background video, or a custom canvas animation), but the actual video source, poster frame, autoplay behavior, and accessibility controls are not extractable from CSS alone.
• Notification Center complete UI: The NotificationCenter DOM structure (with theme--Light flavor--Chroma accent--Slate classes) indicates a sophisticated theming system, but the panel contents, notification item structure, and interaction patterns are hidden behind the collapsed state.
• Podcast Transcript Overlay: A PressHomepagePodcastTranscriptOverlay layer exists in the DOM but contains no visible content in the screenshot—its styling, dimensions, and behavior are unknown.
• Responsive breakpoint values: Only the desktop (1440px) layout is concretely defined. Mobile, tablet, and wide breakpoints are inferred from standard patterns and should be validated against the live site at smaller viewports.
• Exact book card dimensions: While padding (0px 103.6px) and typography are known, the explicit height, aspect ratio, and grid-placement of book cards are inferred from the button-like CSS structure. They may be taller than a typical button (possibly 120–200px to accommodate title + author + metadata).
• Accessibility attributes: ARIA roles, focus management, keyboard navigation patterns, and screen-reader announcements for the sidebar nav, book cards, and overlay system are not detectable from visual/CSS extraction and require manual auditing against WCAG 2.2 AA.