feat(website): the social card shows the product, and the brand gets a real mark - #1047
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
blove
enabled auto-merge (squash)
September 7, 2026 20:17
One card kit on the site's own light surface, showing the approval beat inside the site's browser frame. Records two constraints found while prototyping: Satori kills the render worker on WebP, so card art must be generated PNG; and Inter and the mono face are fetched from Google Fonts on every render, so they should be bundled like Garamond already is. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…a real mark The card was dark, centred, and built from a seam and a glow that exist nowhere else, so the light page it opened looked like a different product. It now renders on the site's own ground through a shared kit: the rail rule and mono eyebrow, the BrowserFrame with its traffic lights, the pills, the wordmark. Inside the frame, three beats drawn rather than screenshotted — an ask, a proposal, and an Approve/Decline pair — so the card shows the human-in-the-loop claim the copy makes. The blog card moves onto the same kit, which retires the near-black blue it alone used. The airplane emoji is replaced by a drawn paper plane, shared by the nav and footer wordmark, the card, src/app/icon.svg as the favicon, a regenerated favicon.ico, and a square logo that finally lets the Organization structured data assert a logo. Two constraints found while prototyping and recorded in the spec: Satori kills the render worker on WebP, which rules out every screenshot we own; and Inter and the mono face were fetched from Google Fonts on every render, failing silently when unreachable. All four faces are now bundled, instanced and subset by scripts/build-card-fonts.py, and together are smaller than the one unsubsetted Garamond they replace. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
force-pushed
the
blove/social-card-kit
branch
from
September 7, 2026 20:17
5ac8f74 to
5fc3840
Compare
Contributor
Contributor
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
The share card was dark, centred, and assembled from a seam and a glow that exist nowhere else on a site that is hardwired light, so the page it opened looked like a different product. It now renders on the site's own ground through a shared kit, and it shows the product instead of only asserting it.
src/app/card/: the rail rule and mono eyebrow, theBrowserFramechrome with its traffic lights and URL pill, the pills, and the wordmark. Both card routes render through it, which retires the near-black blue the blog card alone used.src/app/icon.svgas the favicon, a regeneratedfavicon.ico, and a square logo that lets the Organization structured data finally assert alogo.Two constraints found while prototyping
public/screenshotsis WebP.scripts/build-card-fonts.py, instanced to one weight and subset to Latin; together they are 359KB, less than the single unsubsetted Garamond they replace.Verification
vitest run --root apps/website: 1335 passed.card.spec.tsasserts the hand-copied palette still matchestheme.css, that all four fonts are present and static rather than variable, and that the alt text quotes the positioning copy and describes the approval. Both guards were mutation-tested: breaking a token and removing a font each fail the suite./opengraph-imagereturns 200 withimage/png.Design:
docs/superpowers/specs/2026-09-07-social-card-kit-design.md.🤖 Generated with Claude Code