OG images that actually convert

Dimensions, typography, and contrast rules for 1200×630 cards that look sharp everywhere.

OG images are your ad on every link share. Most are blurry, off-brand, or unreadable at thumbnail size.

Dimensions

1200×630 is the standard. Safe zone: keep text and logos inside the center 80% — platforms crop edges.

Large, high-contrast titles. Two lines max. If it doesn't read at 200px wide, rewrite it.

Test on both light and dark Twitter/X backgrounds. Semi-transparent overlays behind text help.

We built our OG generator because we hit this problem weekly — FLUX backgrounds + crisp Satori text, composited server-side.

How we structure color, type, spacing, and motion tokens for Tailwind v4 projects.

Semantic tokens, contrast checks, and the three mistakes that make dark mode feel like an afterthought.