Repository navigation
feat(brand)!: a mark drawn in the 0.4.0 system, and generated rather than kept - #23
Merged
Merged
Conversation
The subhead restated the product grid sitting directly below it, and said "Five" while that grid renders six cards. The count is still hardcoded, so a test now reads app/page.tsx, counts the <Card> occurrences, and fails when the hero number disagrees. Same failure shape as #3, where a hardcoded star total outlived the repos it counted. Closes #21
…than kept The old mark was amber on navy inside a circle. Both of those colour families were deleted in 0.4.0, so it was the last thing on the site still arguing for an identity nothing else uses. The new one is a superellipse in the dark theme's two neutrals with the system blue laid over it. Continuous corners are the one signature this system spends anything on, and an icon is where that reads first, at 16px, before any colour is legible. Inside the glyph the same treatment repeats: flat caps so the W sits on a line and reads as drawn, round joins at the three vertices so the corner language is the silhouette's. It is generated, not drawn. scripts/make-brand.mjs computes the squircle from |x|^n + |y|^n = 1 at n = 5 and renders public/logo.svg, public/logo.png, app/icon.png and app/apple-icon.png from that one source. `npm run brand`. A logo is the asset nobody rebuilds when a token moves, so two tests hold it to the package: the generator's three colours must equal the resolved values of dark.muted, dark.background and dark.ring, and logo.svg may carry no other colour. Verified they fail by putting the old amber back. The OG image is rebuilt on the same palette, inlines the same SVG, and spends colour exactly once, on the prompt in the install line. It moves to the Node runtime to read the mark off disk, which also makes the route static. Two smaller things the mark forced. The navbar no longer applies a CSS radius to it, because a corner on top of a squircle clips the curve it already has. And the manifest's navy background and theme colours follow the tokens now.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
The old mark was amber on navy inside a circle. Both colour families were
deleted in 0.4.0, so it was the last thing here still arguing for an identity
nothing else uses.
The new one is a superellipse in the dark theme's two neutrals with the system
blue over it. Continuous corners are the one signature this system spends
anything on, and an icon is where that reads first, at 16px, before any colour
is legible. The glyph repeats the treatment: flat caps so the W sits on a line
and reads as drawn rather than written, round joins at the three vertices.
It is generated.
scripts/make-brand.mjscomputes the squircle from|x|^n + |y|^n = 1at n = 5 and renderspublic/logo.svgplus the threerasters from that one source.
npm run brand.A logo is the asset nobody rebuilds when a token moves, so two tests hold it to
the package: the generator's three colours must equal the resolved values of
dark.muted,dark.backgroundanddark.ring, andlogo.svgmay carry noother colour. Both were verified failing by putting the old amber back.
The OG image is rebuilt on the same palette, inlines the same SVG, and spends
colour once, on the prompt in the install line. It moves to the Node runtime to
read the mark off disk, which also makes the route static instead of dynamic.
weekndlabs.com/designpicks all of this up on its own: the docs chrome loads/logo.pngand the favicons by absolute URL. weekndlabs/design#34 removes theCSS corner it was putting on top of them.
Checked at 512, 128, 64, 32 and 16, and in the navbar in both themes.