Add AppBrand, useBrandFavicon and the brand colour tokens - #2
Merged
Conversation
Every internal tool gets one flat brand colour and one silhouette mark. The package now owns the pieces the tools share: - `BrandMark`: a mark as shape data, so one definition renders as the corner lockup and serialises to the tab favicon and static assets. - `AppBrand`: the sidebar lockup at fixed sizes (20px mark, 13.5px name), router-agnostic via `LinkComponent`. - `useBrandFavicon`: draws the mark as the favicon in the brand colour, follows the OS scheme, and takes an optional status pip. - `--color-brand` / `--color-brand-soft` map to `--brand` / `--brand-soft`, which each app declares itself. The package ships no value on purpose: the brand colour is identity, not interaction, and buttons, links and focus rings stay on the shared accent. Claude-Session: https://claude.ai/code/session_012VgdRpRf6d49xfAU1gPLCc
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
Gives every internal tool the shared pieces of a brand identity, without the package owning any brand itself.
BrandMark: a mark as shape data, so one definition renders the corner lockup and serialises to the tab favicon and static assets.AppBrand: the sidebar lockup at fixed sizes (20px mark, 13.5px semibold name), router-agnostic throughLinkComponent, with acompactmode for narrow rails.useBrandFavicon: draws the mark as the favicon in the brand colour, follows the OS colour scheme, and takes an optional status pip knocked out of the tab background.--color-brandand--color-brand-softmap to--brandand--brand-soft, which each app declares in its own stylesheet. The package deliberately ships no value, so a tool without a brand colour renders a visible gap rather than the shared accent.The rule this encodes: the brand colour is identity, not interaction. It goes on the mark, the favicon, the active nav rail and the touch icon. Buttons, links and focus rings stay on
--accentin every tool.Release
Merge, then
npm version minoronmainand push the tag. The five app PRs pin^0.2.0and stay red until v0.2.0 is on npm.Consumers
Atlas, Bullpen, Chop Chop, Deployer and Recordkeeper each have a PR that adopts this. Design canvas with the marks, colours and the reasoning: https://claude.ai/code/artifact/9614014d-2cbd-4978-ac2f-2484bf7c6e88
https://claude.ai/code/session_012VgdRpRf6d49xfAU1gPLCc