← Gallery
Unlock all prompts
herokit.design
ASaaS · 85/100 · Proper. This is how it's done.
Stark black mark over soft yellow spheres. High contrast does all the heavy lifting
Design DNA
Type
Geometric Sans-SerifDisplayGeometric Sans-Serif + Display
PaletteVivid warm tones
Design DNA
Turn herokit.design’s design into your OG
- Full color system with hex codes and harmonies
- Typography breakdown with role mapping
- Layout, patterns, and recreation steps
- One mega-prompt that has everything
Platform fit
OKFacebook / LinkedIn / Discord(1200×630)
OKX / Twitter (Large Card)(1200×628)
INFOX / Twitter (Summary)(120×120)
OKWhatsApp / iMessage(~300×157)
OKSlack(~200×105)
OKChatGPT(~400px wide)
INFOGoogle Search(N/A)
INFOText legibility(Design tip)
herokit.design
HeroKit
StatusPerfect fit for summary_large_image
SizeRecommended 1200×628, min 300×157
CropCenter-crops to 2:1. summary_large_image shows full width, summary crops to 120x120 square.
CacheX caches aggressively. New cards may take minutes to appear. Adding ?v=2 to the URL can force a refresh.
DebugCard Validator was deprecated in 2022. Post a tweet with the URL to preview, or use properOG checker.
Under the hood
og:title
HeroKit
og:description
Supercharge your website!
Dimensions
2400×1260
File size
892KB
Industry
SaaS
Color mode
colorful
Layout
text-logo
Categories
saas
Tags
gradient
Score breakdown
+
OG Image
Has og:image tag
https://framerusercontent.com/assets/VRBB1Zmd2EWvRb3zXdsacjD43yU.jpg
+
Image loads
og:image resolves (HTTP 200)
https://framerusercontent.com/assets/VRBB1Zmd2EWvRb3zXdsacjD43yU.jpg
+
Dimensions
2400×1260, 1.90:1 ratio. Ideal
!
Title
Too short (7 chars). Underuses the card space
HeroKit
!
Description
Too short (25 chars) for rich previews
Supercharge your website!
+
og:type
og:type = website
!
File size
892KB. Consider compressing under 500KB
+
Twitter card
twitter:card = summary_large_image
!
Image format
JPEG. Consider WebP for better compression
i
Title uniqueness
OG title matches page title. Consider a social-specific headline
+
Description quality
Description reads naturally
+
Favicon
Custom favicon detected
Quality Profile
AI analysis
Strengths
- +Energetic 3D sphere cluster provides a modern, tactile backdrop that feels high-end and cohesive
- +Clean black typography and brand mark stand out clearly against the warm monochromatic yellow palette
- +Diagonal flow of elements guides the viewer's eye naturally toward the center logo and text
Improvements
- →The pale yellow background makes the outer yellow spheres blend in slightly with the canvas edges
- →The lightning bolt icon within the black shape competes slightly with the main 'HeroKit' wordmark below
↗
Takeaway
Layering a solid dark brand badge centrally over a monochromatic 3D particle field creates instant focal weight and contrast without introducing distracting background noise.
Want your OG image this proper?
Check your current OG or generate a new one from your brand.
More like this
glideapps.comA
AI App Builder: Turn Spreadsheets into Business Apps | Glide
View editorial →
Stacked site trailers and steel framing to sell software. A literal metaphor that actually works
Stacked site trailers and steel framing to sell software. A literal metaphor that actually works
animaxxing.comA
Animaxxing
View editorial →
That tilted final X carries the whole brand. Crude, loud, impossible to miss
That tilted final X carries the whole brand. Crude, loud, impossible to miss
readymag.comB
Readymag
View editorial →
Real UI elements and thoughtful details make the product pop. The CTA could use a similar spotlight
Real UI elements and thoughtful details make the product pop. The CTA could use a similar spotlight
github.comA
GitHub · Change is constant. GitHub keeps you ahead.
View editorial →
A glowing butterfly on the mascot's nose. Enterprise software rendered as a bedtime story
A glowing butterfly on the mascot's nose. Enterprise software rendered as a bedtime story
interludeapp.netB
Interlude
View editorial →
Michelangelo in an app squircle. The serif wordmark sells the seriousness
Michelangelo in an app squircle. The serif wordmark sells the seriousness
authkit.comB
AuthKit by WorkOS
View editorial →
Three login cards along the bottom. The UI doing the proof of work
Three login cards along the bottom. The UI doing the proof of work