Design System
Colours
--bg #FAFAF8
--bg-alt #F2F1EA
--text #1A1A1A
--text-muted #3D3D3B
--accent #E5512C
--rule #C5C4BC
--text-faint #5C5C5A
--text-faint (#5C5C5A) — tertiary text: fine print, retailer label prefix.
--bg-alt (#F2F1EA) — tinted surface: hero rail, praise band, line-height cards.
Type & Fonts
Eyebrow · Metadata --text-xs12pxInter 400
Rail title · Caption · Small body --text-sm14pxInter 400
Default body text --text-md16pxInter 400
Noa Yedlin — wordmark --text-title18pxFraunces 400
Praise quotes · pull quotes · taglines --text-md16pxFraunces italic
Card title · Section heading --text-lg28pxFraunces 400
Page title --text-xl48pxFraunces 400
Page H1 —96pxFraunces 400
Letter Spacing
--track-tight · -0.02em Display heading
--track-none · 0 Body text · No tracking
--track-wide · 0.1em Eyebrow · Attribution · Label
Line Heights
--lh-tight · 1.1
A novelist of rare clarity,
her prose moves like water
finding its level.
H1, display
--lh-snug · 1.4
A novelist of rare clarity,
her prose moves like water
finding its level.
H2, H3, rail titles
--lh-loose · 1.6
A novelist of rare clarity,
her prose moves like water
finding its level.
Body, synopsis, quotes
Shadow
--shadow-cover
4px 6px 18px rgba(31, 27, 22, 0.18)
Rail covers, detail page covers
--shadow-cover-lg
8px 14px 40px rgba(31, 27, 22, 0.24)
Featured hero cover
Buttons
.btn-primary Filled pill · dark bg · used for primary CTA (excerpt, main action) .btn-secondary Outline pill · used for purchase links and secondary CTAs .link-accent Underlined accent link · used for inline navigation CTAs .lang-toggle Bordered pill · language switcher in nav .headline-link Hover: accent colour + underline + sliding → arrow · applied to every clickable serif title .retailers Inline editorial purchase links separated by · — never buttons
Badges & Labels
.award-badge Accent colour + star prefix · awards on book detail & about .book-badge Coming October 13th, 2026
Dark filled banner · publication date / "Coming soon" on book detail hero .kirkus-star Accent · starred review callout above praise blockquote .eyebrow Muted uppercase label · section headings throughout .gh-badge Hero badge · filled dark pill, 4px radius · forthcoming / release status in featured hero .book-status Forthcoming · October 13, 2026
Dot + uppercase text · book detail pages and hero panels · dot is --text-muted, never accent
Quote Styles
.praise (homepage) "All this abundance, in which one family becomes a mirror to an entire social class in Israel."
.praise + 2px accent border-left · homepage praise grid only · shows .quote-book (book title) since quotes are mixed .praise (book detail) "Bright, witty, irreverent and compassionate — an astute and hilarious study of the human condition."
.praise with no left border · book detail praise grid · omit .quote-book (single-book context) .quote (pull quote) "A lucid, clear, and distinct voice."
Fraunces italic · 2px accent border-left · inline pull quotes and hero panel quotes
Event Row
Upcoming
In conversation with the author.
Shared pattern across /events listing and homepage upcoming block. 160px meta column + content column.
Dividers
0.5px solid var(--rule) All dividers — nav, footer, section rules, row separators
Responsive Behavior
Desktop ≥ 601px
Type scale House Arrest
Section heading
Section eyebrow Upcoming Events
Event row New York, NY
June 15, 2026
An Evening with Noa Yedlin
Mobile ≤ 600px
Type scale House Arrest
Section heading
Section eyebrow Upcoming Events
Event row New York, NY
June 15, 2026
An Evening with Noa Yedlin
Key breakpoints: 1024px (hero rail hidden), 768px (hero stacks), 600px (type scale + event row collapse).
Breakpoints
≤ 680px Hero stacks to column. Cover centres, text left-aligns. Books hero grid: 150px cover column. ≤ 700px Books listing: 140px cover column. Events meta becomes inline strip with · separators. ≤ 600px Press list removes side padding. Section eyebrows force left-align. Praise reviews go 1-column. ≤ 480px Books listing: 110px cover column.
Type — Mobile
Homepage hero title —clamp(36px, 4.4vw, 62px)Fraunces 400
Page H1 —clamp(48px, 12vw, 96px)Fraunces 400
All other type tokens are unchanged on mobile — only display headings scale down via clamp.
Mobile Nav
Trigger 3-bar icon, top-right of header. Hidden on desktop (> 768px). Opens full-screen drawer. Drawer Full-screen overlay, var(--bg) background. Fraunces --text-lg nav items. Active item: accent colour + 3px left border. × close button top-right.
Layout — Mobile
Alignment Hero title, quote, attribution, and CTA buttons: left-aligned. Section eyebrows: left-aligned. Desktop centering removed on mobile. Books rail Backlist rail switches from 4-column horizontal grid to single vertical column. Each book: cover + title stacked. Press & events meta Rolling Stone · November 2023 · Essay
Left meta column collapses into an inline strip with · separators above the headline. All caps, --text-xs throughout. Touch links On touch devices (@media hover:none) .headline-link shows a permanent underline (var(--rule) colour) since hover states don't fire. 