Five pixel-perfect HTML banners ready to export as PNG. Each is sized exactly to platform spec. Click "Open" to view full-size, then capture a full-page screenshot to get the PNG.
How to Export to PNG
- Click Open on a banner below — it opens in a new tab at exact pixel size.
- Open Chrome DevTools: Cmd + Opt + I (Mac) or F12 (Win).
- Open the Command Palette: Cmd + Shift + P (Mac) or Ctrl + Shift + P (Win).
- Type
screenshot and choose "Capture full size screenshot".
- Chrome saves a PNG at exact banner dimensions. Upload directly to the platform.
Alternative (simpler): open the banner page, take a regular screenshot of the visible content with your OS screenshot tool — works at the displayed size. For pixel-perfect output, the DevTools method above is cleaner.
Use: Olbrain company page on LinkedIn. Single-line tagline; very narrow strip. Keep critical text away from the bottom 60px (LinkedIn overlays profile photo).
Use: Alok and Nishant's personal LinkedIn profiles. Founder-voice quote ("ability to be") with company meta. Mobile crops the sides — keep important text in the middle 50%.
Use: @olbrain Twitter / X profile. Sharper, contrarian framing ("Memory is solved. Identity is the next architectural primitive.") fits the platform's voice. Profile photo overlays bottom-left — keep text right of center.
Use: Olbrain Facebook page. Standard tagline + sub-line for an accessible audience. Mobile crops the left and right edges — keep the main text within the centered safe zone (820 × 624 visible on mobile).
Use: Default Open Graph image for olbrain.com. Shows when olbrain.com is shared on LinkedIn, Twitter, Facebook, Slack, WhatsApp, etc. Save as /images/og-default.png and reference in <meta property="og:image">.
Want a variation? Edit the relevant HTML file in /banners/ — tweak headline, color, or layout. Every banner is self-contained: no external dependencies beyond Google Fonts. Source the brand kit at /Olbrain-Social-Media-Brand-Kit.md.