fix(design): prose dark-mode fix + editorial typography overhaul#8
Merged
Conversation
Headings on content pages (about, concepts, blog, library, specs, adopt) were invisible in dark mode because templates applied "prose prose-pubid" but prose-pubid was never defined as a custom typography theme. Tailwind's default prose tokens (light-mode-only) were used, leaving h1/h2/h3 with dark text on a dark background. Fix by overriding .prose directly with semantic color tokens that already swap correctly under [data-theme=dark]. Drop the dead prose-pubid class from all content templates. Design polish (technical-editorial aesthetic): - Newsreader Variable for serif body, JetBrains Mono Variable for code - Deeper dark palette (#0b0d12 bg, #eceef2 text) for richer contrast - Atmospheric gradient mesh + subtle noise texture on body - Display-serif headings with balanced text-wrap - Refined blockquotes, code chips, hairline tables - Eyebrow label on all content pages for editorial structure - Header: top accent strip, logo hover glow, brand-colored ID - Remove duplicate h1 from concepts template (markdown already has one)
The wordmark used Fraunces Variable at browser-default axis settings, which renders soft and blobby (high SOFT axis, no optical-size tuning). Switch to Newsreader at opsz=72 (the display cut), weight 700, with the "id" portion in italic at weight 500. This creates a refined editorial masthead rather than a quirky display face. Import Newsreader's opsz axis files explicitly (opsz.css + opsz-italic.css) instead of the default wght-only entry — the default doesn't expose the optical-size axis, so font-variation-settings on opsz was being ignored.
Wordmark:
- Switch from Newsreader serif to Schibsted Grotesk (modern editorial
sans-serif) per request for a sans-serif logo
- "id" rendered in brand accent blue at medium weight, "Pub" at bold
- Tight tracking for wordmark presence
Anatomy section ("What is a PubID?"):
- Replace 2-column chip+description grid with a vertical annotated list
- Each row: colored dot marker + uppercase label + readable description
(the chips with background-color boxes could feel "out of bounds" on
narrower viewports; dots + labels cannot overflow)
- Identifier upgraded to a card with subtle radial accent glow,
uppercase mono label ("Example — ISO/IEC with Amendment"), and a
wrapping string (overflow-wrap: anywhere) so segments never escape
the card on any viewport
- Hover state: row tints with segment color + colored left border
- Mobile-first single-column layout; descriptions capped at 70ch
Lowercase "id" was a typo — the brand is "PubID".
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
prose prose-pubidbutprose-pubidwas never defined as a typography theme, so Tailwind's default light-mode tokens were used — dark text on dark background. Override.prosedirectly with semantic tokens that swap correctly under[data-theme="dark"].<h1>from concepts template (markdown already provides one).Test plan
npm run check— 0 errorsnpm run build— 309 pagesnpm test— 374/374 passing/aboutand/concepts/anatomy/blog,/library,/specs,/adoptin both themes