Conversation
Neutrals (paper, surface, rule, ink, muted, subtle) and a per-product accent are CSS variables defined in tailwind.config.js. The accent resolves from a data-product attribute on <html>, which replaces the per-product class maps in DocsLayout and TableOfContents. Also enables antialiased font smoothing and fixes the 404 button, whose label was painted in the prose link color (same as its background).
The homepage becomes a text-only index: Harness, Keep, Moat, Bailey, Gatekeeper, each with a one-line summary and links. Rows set data-product so links pick up each product's accent. Harness links to GitHub until its docs exist; Bailey is marked private. Adds a 'Sponsored by' footer with TheGP and Neptune logos, inlined as currentColor SVGs so they follow the theme.
- Doc prose is set in Newsreader at 17/19px with a ~66ch measure; H2s, code, tables, and nav stay mono. Adds Newsreader's opsz axis. - Sidebar numbers show only for Getting Started and are assigned by position, so filename gaps (01 02 03 05 07) no longer leak. - 'Part of Major Context' footer on doc pages, plus a README footer snippet (docs/readme-footer.md) and a dark logo for it.
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Small-text color tokens fail accessibility contrast requirements, and prose still bypasses the documented token system.
Review effort: Balanced
Findings: 1
Open (1)
What changed in this PR
Redesigns the homepage and documentation UI around shared color tokens, product accents, and serif prose.
Changes:
- Adds tokenized light/dark and product color styling.
- Reworks the homepage to list five projects and sponsors.
- Updates documentation typography, navigation numbering, and branding.
| File | Description |
|---|---|
tailwind.config.js |
Defines neutral and product accent tokens. |
src/pages/moat/index.astro |
Migrates Moat landing-page colors to tokens. |
src/pages/moat/[category]/[slug].astro |
Tokenizes Moat category badges. |
src/pages/keep/index.astro |
Migrates Keep landing-page colors to tokens. |
src/pages/keep/[category]/[slug].astro |
Tokenizes Keep category badges. |
src/pages/gatekeeper/index.astro |
Migrates Gatekeeper landing-page colors to tokens. |
src/pages/gatekeeper/[category]/[slug].astro |
Tokenizes Gatekeeper category badges. |
src/pages/index.astro |
Introduces the project-list homepage and sponsor footer. |
src/pages/404.astro |
Fixes button contrast and isolates prose styling. |
src/lib/products.ts |
Adds homepage project metadata. |
src/layouts/DocsLayout.astro |
Applies product accents, serif prose, and branding footer. |
src/layouts/BaseLayout.astro |
Sets product context and global token styling. |
src/config/navigation.ts |
Limits sequential numbering to Getting Started. |
src/components/ThemeToggle.astro |
Migrates theme controls to tokens. |
src/components/TableOfContents.astro |
Uses inherited product accent tokens. |
src/components/SectionHeader.astro |
Tokenizes section-header styling. |
src/components/NavLink.astro |
Supports unnumbered navigation entries. |
src/assets/sponsors/thegp.svg |
Adds TheGP sponsor artwork. |
src/assets/sponsors/neptune.svg |
Adds Neptune sponsor artwork. |
public/logo-dark.svg |
Adds a dark-background logo asset. |
docs/style-guide.md |
Documents the new color and typography system. |
docs/readme-footer.md |
Provides cross-project README footer markup. |
CLAUDE.md |
Updates repository design guidance. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <article class="max-w-[46rem] mx-auto px-6 md:px-12 py-8 md:py-12"> | ||
| <div class:list={[ | ||
| "prose prose-stone dark:prose-invert max-w-none", | ||
| "prose prose-stone max-w-none dark:prose-invert", |
Contributor
Author
There was a problem hiding this comment.
Fixed in #7: the --tw-prose-* variables now point at the tokens, and prose-stone / dark:prose-invert are removed.
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
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
paper,surface,rule,ink,muted,subtle,accent), each with a built-in dark value. The per-product accent comes from adata-productattribute, which replaces the class maps inDocsLayoutandTableOfContents. Addsantialiasedto<body>.docs/readme-footer.mdhas a footer snippet for each product repo's README.Testing
bun run validate(check, lint, full build with doc fetch) andbun run validate:linkspass.