Set the docs in the same two faces as the app and the engine's pages - #20
Merged
Conversation
Inter for everything read at length, Space Grotesk for headings — the split the Flutter shell and the worker's public pages both make, because the display face is drawn for size and reads as noise in a paragraph. The docs are the surface read at greatest length, so Inter matters most here. Self-hosted rather than linked from Google Fonts: a documentation site has no business putting a third party on the page, and the subset files are 72KB and 20KB, each covering its whole weight range. Byte-identical to the ones the engine serves. Tokens only, no swizzling. What makes docs legible is the structure a reader already knows — sidebar, search, version picker, code blocks — and Infima exposes the families and the accent ramp precisely so identity does not have to cost that. The accent is unchanged pending a decision: #2F6B5E is not a docs colour but the brand accent, baked by scripts/generate-brand.mjs into the mark, lockups, favicons, app icons, OG card and splash screens. Moving the docs to the M3 primary without regenerating those would leave the logo a different green from the links beside it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The mark, both lockups, every favicon, the app and maskable icons, the GitHub avatar, the OG card and the splash screens were all drawn in #2F6B5E, and the app and the engine's pages now derive their colour from Colors.teal. Leaving them would have put a different green in the navbar from the links beside it. The accent is defined by the shell's ColorScheme.fromSeed and copied into generate-brand.mjs, not the other way round: M3 pulls any seed to tone 40 and rebuilds the ramp, so a hand-picked brand hex returns as something near itself but not itself. A mark can be drawn in a generated colour; a generated palette cannot be talked into matching a mark. Ink and paper are untouched. They are the grounds the mark is drawn on rather than a hue, which is also why the scaffolder uses them for launcher icons. The Infima ramp is recomputed with the scaling its own generator uses — HSL lightness at .9/.85/.7 and 1.1/1.15/1.3 — so the shades stay consistent with how Infima applies them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
Third surface of the brand work, after eigen-flutter#22 and eigen-server#27.
Inter for everything read at length, Space Grotesk for headings — the same split as the other two, because the display face is drawn for size and reads as noise in a paragraph. The docs are the surface read at greatest length, so Inter matters more here than anywhere.
Self-hosted, not linked from Google Fonts: a documentation site has no business putting a third party on the page. The subset files are 72 KB and 20 KB, each covering its whole weight range, and are byte-identical to the ones the engine serves.
Tokens only, no swizzling
--ifm-font-family-base,--ifm-heading-font-family,--ifm-heading-font-weight. Infima exposes these precisely so a site can have an identity without replacing components.That answers the question of whether theming hurts implementor familiarity: what makes docs legible is the structure a reader already knows — sidebar, search, version picker, code blocks behaving as expected. Swizzling those would cost that. Changing two font families costs none of it.
The accent is deliberately unchanged
Worth flagging before anyone changes it, because it is not what it looks like.
#2F6B5Eis not the docs site's colour. It is the brand accent, andscripts/generate-brand.mjsbakes it into the mark, both lockups, every favicon, the app icons, the GitHub avatar, the OG card and the splash screens — 25 generated files, plusINK/PAPERwhich the game scaffolder also uses for launcher icons.So aligning the docs to the Material 3 primary is not a CSS edit. Either the generator moves with it — regenerating the logo and every icon — or the mark in the navbar ends up a different green from the links beside it. That is a decision about the logo, not about a stylesheet, so it is left out of this PR.
Verified
biome check, and a fulldocusaurus buildwith the link checker. Both faces reachbuild/fonts/and the families appear in the emitted CSS.Not verified: I have not viewed the built site. The pairing itself was reviewed visually in the brand specimen.
🤖 Generated with Claude Code