grant/keysat-xyz-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Social share image: replace old key-thumbnail with current scroll mark + KEYSAT wordmark

Browse Source 
The previous og:image (assets/keysat-thumbnail.png) showed an older
brand asset — a small key icon next to "KEYSAT" in a serif-ish
typeface — that no longer matches the site. iMessage / Slack / X
were rendering that old card, creating a mismatch between what people
clicked and what they landed on.

New asset: assets/keysat-social.svg (1200x1200 source) +
assets/keysat-social.png (1200x1200 rendered). Cream brand
background, current scroll mark centered, "KEYSAT" wordmark in the
Manrope-style spacing the lockup uses, gold "SELF-HOSTED LICENSING
SERVER" tagline beneath. og:image + twitter:image on both
index.html and support.html now point at the new asset; width/height
attributes updated to 1200.

Old assets/keysat-thumbnail.png left in place — harmless, and the
1.7MB file was only referenced from the meta tags this commit
rewires, so no broken links elsewhere.
This commit is contained in:
Grant
2026-05-14 14:03:40 -05:00
parent 5a9ede9247
commit b253b7bacf
4 changed files with 49 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/keysat-social.svg
+39
View File
@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200" fill="none">
<!-- Cream brand background. Same #FBF9F2 used everywhere on the
landing page; keeps the social card visually consistent with
the site a visitor lands on after clicking. -->
<rect width="1200" height="1200" fill="#FBF9F2"/>
<!-- Scroll-style brand mark, centered horizontally, sitting in the
upper third so the wordmark below reads as the focal pairing.
The mark is the same construction as keysat-mark.svg, just
translated + scaled so its 100x100 source viewBox occupies a
420x420 area starting at x=390, y=260. -->
<g transform="translate(390,260) scale(4.2)">
<ellipse cx="50" cy="22" rx="28" ry="5" fill="#1E3A5F"/>
<rect x="22" y="22" width="56" height="56" fill="#FBF9F2" stroke="#1E3A5F" stroke-width="3"/>
<ellipse cx="50" cy="78" rx="28" ry="5" fill="#1E3A5F"/>
<line x1="32" y1="36" x2="68" y2="36" stroke="#1E3A5F" stroke-width="1.5" stroke-linecap="round"/>
<line x1="32" y1="44" x2="62" y2="44" stroke="#1E3A5F" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="42" cy="60" r="6" fill="none" stroke="#BFA068" stroke-width="2.5"/>
<rect x="48" y="58.5" width="14" height="3" fill="#BFA068"/>
<rect x="58" y="61.5" width="2" height="4" fill="#BFA068"/>
<rect x="62" y="61.5" width="2" height="3" fill="#BFA068"/>
</g>
<!-- "KEYSAT" wordmark in Manrope (with sans-serif fallbacks for
renderers that lack the typeface). Letter-spacing tuned to
match the lockup's wide tracking; size sized so the wordmark
is the second focal element, balanced against the mark above. -->
<text x="600" y="900" text-anchor="middle"
font-family="Manrope, Inter, system-ui, sans-serif"
font-weight="500" font-size="140" letter-spacing="34"
fill="#1E3A5F">KEYSAT</text>
<!-- Tagline beneath the wordmark, a touch of gold to echo the
brand accent without competing with the wordmark itself. -->
<text x="600" y="970" text-anchor="middle"
font-family="Manrope, Inter, system-ui, sans-serif"
font-weight="500" font-size="28" letter-spacing="6"
fill="#BFA068">SELF-HOSTED LICENSING SERVER</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB