From 537aff4a466b5822dbe632db23fbd64e63ea562f Mon Sep 17 00:00:00 2001 From: Vinta Chen Date: Wed, 21 Oct 2026 08:40:55 +0800 Subject: [PATCH] style: set sponsorship ledes in Manrope and stack past sponsor names above descriptions The sponsorship ledes were set in Cormorant Garamond, whose short x-height and thin strokes read poorly across a paragraph, and past sponsor names shared a baseline with Manrope descriptions, where the mismatched x-heights clash. Co-Authored-By: Claude --- DESIGN.md | 26 ++++++++++++++------------ website/static/style.css | 16 +++++++--------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 3185cd7e..1eb296f1 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -99,20 +99,22 @@ Pairing (do not swap): - **Display**: `Cormorant Garamond` (serif, 600 only). - **Body**: `Manrope` (sans, 400 / 600 / 700 / 800). +Cormorant Garamond sets headings and standalone names only, never running sentences, and never on the same line as Manrope. Its short x-height and thin strokes tire the eye across a paragraph, and next to Manrope on one baseline the two x-heights clash. Ledes and other multi-line copy use Manrope (`--text-2xl`); a display name with a description stacks the name above it, as in the sponsor band. + Scale: -| Role | Token | Size | Family | Weight | Notes | -| ---------------- | ----------------- | -------------------------------- | ------------------ | --------- | ----------------------------------------------- | -| Hero headline | (literal `clamp`) | `clamp(4.5rem, 11vw, 8.5rem)` | Cormorant Garamond | 600 | Magazine-cover scale, single use on the hero | -| Page title | `--display-lg` | `clamp(3.6rem, 9vw, 7rem)` | Cormorant Garamond | 600 | Category and sponsorship `h1` | -| Section heading | `--display-md` | `clamp(2.25rem, 4.2vw, 3.3rem)` | Cormorant Garamond | 600 | Guide, results, CTA `h2`, sponsor name | -| Display small | `--display-sm` | `clamp(1.75rem, 2.8vw, 2.25rem)` | Cormorant Garamond | 600 | Group-row `h2`, sponsorship lede, past sponsors | -| Lede | `--text-2xl` | `1.5rem` | Manrope | 400 | First paragraph of a category intro | -| Subtitle | `--text-xl` | `1.25rem` | Manrope | 400 | Hero and category subtitles, category intro | -| Body large | `--text-lg` | `1.125rem` | Manrope | 400 | Content-heavy passages, project names, search | -| Body | `--text-base` | `1rem` (16px) | Manrope | 400 | Body floor | -| Meta / secondary | `--text-sm` | `0.95rem` | Manrope | 400 / 600 | Meta rows, secondary copy | -| Caption / pill | `--text-xs` | `0.8rem` (12.8px) | Manrope | 600 / 700 | Smallest token, pills, badges, tags, footnotes | +| Role | Token | Size | Family | Weight | Notes | +| ---------------- | ----------------- | -------------------------------- | ------------------ | --------- | ------------------------------------------------- | +| Hero headline | (literal `clamp`) | `clamp(4.5rem, 11vw, 8.5rem)` | Cormorant Garamond | 600 | Magazine-cover scale, single use on the hero | +| Page title | `--display-lg` | `clamp(3.6rem, 9vw, 7rem)` | Cormorant Garamond | 600 | Category and sponsorship `h1` | +| Section heading | `--display-md` | `clamp(2.25rem, 4.2vw, 3.3rem)` | Cormorant Garamond | 600 | Guide, results, CTA `h2`, sponsor name | +| Display small | `--display-sm` | `clamp(1.75rem, 2.8vw, 2.25rem)` | Cormorant Garamond | 600 | Group-row `h2`, past sponsor names | +| Lede | `--text-2xl` | `1.5rem` | Manrope | 400 | Category intro first paragraph, sponsorship ledes | +| Subtitle | `--text-xl` | `1.25rem` | Manrope | 400 | Hero and category subtitles, category intro | +| Body large | `--text-lg` | `1.125rem` | Manrope | 400 | Content-heavy passages, project names, search | +| Body | `--text-base` | `1rem` (16px) | Manrope | 400 | Body floor | +| Meta / secondary | `--text-sm` | `0.95rem` | Manrope | 400 / 600 | Meta rows, secondary copy | +| Caption / pill | `--text-xs` | `0.8rem` (12.8px) | Manrope | 600 / 700 | Smallest token, pills, badges, tags, footnotes | Hard-won sizing rules (do not relax): diff --git a/website/static/style.css b/website/static/style.css index f8249f9a..bdc3b7f1 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -1367,11 +1367,9 @@ th[data-sort].sort-asc::after { } .sponsorship-lede { - font-family: var(--font-display); - font-size: var(--display-sm); - line-height: 1.25; + font-size: var(--text-2xl); + line-height: 1.45; color: var(--ink); - letter-spacing: -0.01em; text-wrap: pretty; } @@ -1516,9 +1514,9 @@ th[data-sort].sort-asc::after { .past-sponsors li { display: flex; - flex-wrap: wrap; - align-items: baseline; - gap: 0.65rem; + flex-direction: column; + align-items: start; + gap: 0.35rem; padding-block: 0.4rem; } @@ -1537,8 +1535,8 @@ th[data-sort].sort-asc::after { } .past-sponsor-desc { - color: var(--ink-muted); - font-size: var(--text-base); + color: var(--ink-soft); + font-size: var(--text-lg); } .sponsorship-cta-row {