Codersera press & partner kit
Pre-sized covers, avatars and email banners for every major social network. Built from the same palette and fonts the rest of the site uses — no surprises if you drop these alongside our marketing pages.
Avatars
Covers & headers
Posts & pins
Logo
Brand system
Color tokens
Pulled from src/theme/codersera-default.theme.tsx. Don't invent new hexes.
- Navy (primary surface)
#011443banner backgrounds, hero gradient end - Blog dark (secondary surface)
#0F151Aeditorial pages, admin chrome - Brand primary
#228fffCTAs, accents, key strokes - Brand soft
#53b5fftaglines, secondary text on dark - Logo blue
#5885FFmonogram primary plane - Logo light
#A9C0FFmonogram secondary plane - Accent yellow
#ffdb41highlights, "QUICK ANSWER" eyebrow - Text on dark
#FFFFFFheadlines on navy / dark surfaces - Muted
#9CA3B0metadata, URL strings
Typography
The site uses the platform system stack — fast, native, no font-file payload.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
Wordmark is 800 weight, tagline 500, URL 500.
Do / don't
- DoUse trailing-slash URLscodersera.com/blog/<slug>/ — matches Ghost canonical
- DoPair on dark navyMonogram + wordmark in white over #011443 is the canonical lockup
- DoKeep tagline ≤40 charsAnything longer breaks the email banner layout
- Don'tRecolour the monogramKeep #5885FF / #A9C0FF — those ARE the brand mark
- Don'tPlace wordmark on busy backgroundsWhite wordmark needs a dark or muted surface to read
- Don'tInvent new fontsAlways use the system stack — matches the rest of the site
Generating assets
Everything here is generated by scripts/generate-social-assets.mjs. If we change the tagline, primary color, or wordmark, re-run it and these tiles update automatically:
node scripts/generate-social-assets.mjs
Width-aware font sizing protects against wordmark clipping on 16:9 / 16:7 canvases.WORDMARK_WIDTH_FACTOR is set to 7.6 (9 chars × 0.84). If the wordmark ever changes length, update this knob.
