Repository navigation
docs: apply the Greyhaven design system to the docs site - #5
Merged
Merged
Conversation
Vendor the design system's tokens into an extra_css stylesheet: warm off-white/off-black surfaces, the single orange accent, Source Serif 4 for headings and prose, Aspekta for nav and UI chrome, and the Greyhaven symbol as logo and favicon. Fonts are self-hosted (OFL), so the published site makes no third-party requests. The palette switches to primary/accent: custom, the material-supported way to keep the theme's own colors from overriding the stylesheet.
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.
What
Applies the Greyhaven design system to the mkdocs-material documentation site. The site shipped stock Material (Roboto, black header, indigo links); the web UI already vendors the design system, so the docs were the odd one out.
docs/assets/stylesheets/greyhaven.css— the whole theme in oneextra_cssfile:@font-facerules, two[data-md-color-scheme]blocks of Material variable overrides, and the typography rules. No theme fork, nocustom_dir.tokens/color.json: off-white#F9F9F7/ off-black#161614surfaces, the single orange accent#D95E2Afor links and active nav, grey.1/grey.8 for code backgrounds.ui/public/fonts/; Source Serif 4 is the latin subset. The published site makes no Google Fonts request.ui/public/favicon.svgas favicon.mkdocs.ymlpalettes move fromprimary: black / accent: indigotoprimary: custom / accent: custom. This is required: without it the theme's own attribute selectors override the stylesheet and links stay indigo.CLAUDE.mdgains one sentence recording that docs styling is vendored tokens, re-vendor rather than hand-tune.Why
The docs are the most public surface of the project and looked like generic Material. This makes them consistent with the web UI and the rest of the org's design system, at the cost of one CSS file and ~350 KB of font binaries (the repo already commits the same Aspekta files under
uidist/).Testing
mkdocs build --strict— no warnings, no broken links.reference/configuration(wide tables),concepts/architecture(long prose), and search, in both light and dark schemes.#F9F9F7light,#161614dark.mkdocs build --strictcopiesdocs/assets/as-is and the docs workflow already triggers ondocs/**andmkdocs.yml.Follow-ups / things to weigh
#C14F1Ereaches 4.5:1 if AA matters more than fidelity here.greyproxywordmark, so if a product-brand decision is pending this may want revisiting.custom_diroverrides directory (for a real landing page) stays open as a later step; colors and type did not need it.