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-xs 12px Roboto 400
Rail title · Caption · Small body --text-sm 14px Roboto 400
Default body text --text-md 16px Roboto 400
Noa Yedlin — wordmark --text-title 18px Fraunces 400
Praise quotes · pull quotes · taglines --text-md 16px Fraunces italic
Card title · Section heading --text-lg 28px Fraunces 400
Page title · H1 --text-xl 48px Fraunces 400
Exception: homepage hero book title uses clamp(36px, 4.4vw, 62px) — local style in index.astro. All other tokens are fixed px, unchanged on mobile.
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,
H1, display
--lh-snug · 1.4
A novelist of rare clarity,
H2, H3, rail titles
--lh-loose · 1.6
A novelist of rare clarity,
Body, synopsis, quotes
Buttons .btn-primary Filled · dark bg · primary CTA · internal gets →, external gets ↗ .btn-secondary Outline · secondary CTA · internal gets →, external gets ↗ .link-accent Underlined accent link · inline navigation CTAs .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 Near-black (--text) + 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 Near-black (--text) · starred review callout above praise blockquote .eyebrow Muted uppercase label · section headings throughout .gh-badge Hero badge · filled dark pill, 4px radius · local style in index.astro (not in global.css) .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." Avraham Balaban
Haaretz Books
House Arrest
.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 List Row Shared component for events and media. 160px meta column + content. Always includes: label trio, serif title, subtitle, and a view link.
Location / Else Date Type
Events use .event-row / .event-meta; media use .press-row / .press-outlet. Both share the same grid, spacing, and type rules. Internal navigation buttons get →; external links get ↗.
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
List rows collapse to single column (meta becomes inline strip). Praise reviews go 1-column. Contact rows stack. ≤ 480px
Books listing: 110px cover column.