Repository navigation
Brand the masthead with Syne, the Font Lab wordmark face - #61
Merged
Merged
Conversation
The panel is the surface most people see, and until now it looked like no relative of jack-mcgovern.com/fontlab — an ink-gray badge and a mono wordmark against the site's marker-yellow Aa tile set in Syne. Same product, two marks. The masthead now wears the site's: the Aa tile in MARKER (#E7FF3B) with ink letterforms, and FONT LAB in Syne 600. The badge stays the LIVING Aa — render() still sets its face to the working display font, so the mark keeps doubling as the display role's peripheral change signal, and it only wears its own italic Aa (the site's exact mark) when there's no working stack to specimen. Syne ships the way PANEL-VISION specs the serif upgrade: a 4.8KB base64 woff2 subset (space, A-Z, a-z, ·, —) namespaced `FL Brand`, injected alongside the catalog faces — into the document, since @font-face in a shadow root isn't honored everywhere. Zero network, so the mast is branded offline too. Two spec amendments, so the doc stays honest: the mark is the one standing exception to yellow-follows-the-page (identity, not attention, so it never goes quiet), and it's the one sans on a surface that claimed zero — confined to the wordmark, never doing UI work. Verified in Chromium against the real template markup: expanded and collapsed, both badge branches, no mast overflow with a truncating direction name and the unsaved marker. The full offline gate suite passes; the example install's panel gets the same masthead so demos show the brand. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0117WgiPcRHiZmFytEwSpWys
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 & why
Establishes Font Lab's visual identity on the panel by introducing the Syne 600 typeface as the brand voice — used for the masthead wordmark and the living
Aamark. This aligns the panel's identity withjack-mcgovern.com/fontlab, where Syne is the wordmark face.The
Aabadge shifts from a dark background with light text to a marker-yellow tile with ink letterforms — the same mark as the site. The badge remains "living" (its font-family updates to the current working display face), but when no display face is selected, it renders in italic Syne as the brand's own mark.The FONT LAB wordmark is now set in Syne 600 instead of the previous styling.
Implementation details:
·,—) namespacedFL Brand@font-face(shadow DOM@font-faceis not reliably honored everywhere)data-brandattribute tracks whether a display face is active; when false, the mark wears its own italic AaThe invariants
Tests
cd cli && npm install --omit=dev && node codegen-css-test.mjs && node panel-keys-test.mjs && node m3-test.mjs && node m4-test.mjs && node m5-test.mjsNotes for the reviewer
This is a pure branding/cosmetic change. The Syne subset is embedded as base64 to avoid network requests. The badge's dual behavior (living display face + fallback to brand mark) is controlled via the
data-brandattribute, which is set in therender()function based on whether a display stack exists.Documentation in
PANEL-VISION.mdhas been updated to reflect the new color and type hierarchy.https://claude.ai/code/session_0117WgiPcRHiZmFytEwSpWys