docs: redesign OG card for LinkedIn feed legibility#22
Merged
Conversation
The previous OG card was too quiet for LinkedIn-feed sharing — small headline, abstract orbital motif as the dominant visual, no immediate "what is this" signal. Redesigned the layout to read in two seconds from a feed thumbnail: - **Trust pill top-right** — `● OPEN SOURCE · MIT · v2.6.1` with pulsing accent dot. Engineers scanning a feed see "open source + current" before reading the headline. - **Oversized headline** — `Build React apps / faster.` at 112pt with chartreuse italic on `faster.`. Lines split for hard-stop pacing. - **Four measured-stat pills** as the visual rhythm — `15 packages`, `4.82 KB engine` (highlighted accent pill), `170+ CSS props`, `123 motion presets`. Pills are concrete, scannable, and replace the abstract orbital motif. They're the actual differentiation. - **Aurora dialled back** — chartreuse + cobalt bloom anchored top-right, faint cobalt counter-note bottom-left, dot grid masked to the corner so it doesn't fight the copy. - **Tag strip footer** — `TYPESCRIPT-FIRST · REACT · REACT-NATIVE` spells out the audience LinkedIn-side. Same 1200×630 dimensions; same static-PNG generation; Twitter card re-uses it. The previous version felt like a design portfolio piece; this one is a feed-friendly billboard with the value prop encoded in type and pills, not in metaphor. Co-Authored-By: Claude Opus 4.7 <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.
Summary
Follow-up to #21. The previous OG card was too quiet for LinkedIn-feed sharing — small headline, abstract orbital motif as the dominant visual, no immediate "what is this" signal. Redesigned to read in two seconds from a feed thumbnail.
Before (#21): abstract orbit on the right, small headline, single subtitle line.
After (this PR): four stat pills as the visual rhythm, oversized headline, trust pill + tags strip framing.
Changes
● OPEN SOURCE · MIT · v2.6.1with pulsing accent dotBuild React apps / faster.(chartreuse italic onfaster.)15 packages,4.82 KB engine(accent-highlighted),170+ CSS props,123 motion presetsTYPESCRIPT-FIRST · REACT · REACT-NATIVESame 1200×630 dimensions, same static-PNG generation, Twitter card re-uses it.
Test plan
bun run buildclean —/opengraph-imageregenerated (125 KB)🤖 Generated with Claude Code