OGKit

Guides

Theme, accent, pattern, and fonts

Some OGKit templates accept appearance query parameters so cards match your brand without a custom renderer. Supported most richly on minimal and gradient; other templates use fixed layouts with their own fields (logo, image, code, etc.).

Parameters

  • theme — light | dark | classic (minimal)
  • accent — #RRGGBB highlight (minimal, gradient; auto may pass theme-color)
  • bg — #RRGGBB background override
  • pattern — none | dots | grid
  • font — CSS font-family name string for supported templates (e.g. Georgia, ui-sans-serif)

Which templates honor appearance?

minimal — theme, accent, bg, pattern, font

gradient — accent, bg, pattern, font

article / product / brand / quote / podcast / event / job / dark-code — structure-first layouts; customize via their content fields (image, logo, code, price…) rather than theme packs.

Examples

https://www.webmorp.art/ogkit/api/og/minimal?demo=1&title=Launch&subtitle=Brand+card&theme=dark&accent=%233dffa8&pattern=grid

https://www.webmorp.art/ogkit/api/og/gradient?demo=1&title=Changelog+v2&subtitle=Signed+URLs&accent=%230ea5e9&pattern=dots&font=Georgia

Font guidance

Pass a font family name that the renderer can resolve. System and common web-safe families are the safest default for universal renders.

Pricing mentions Google Fonts on higher tiers as a product direction for branded typography; always preview in the Playground before committing a production URL — if a face does not load, the template falls back to a sans stack.

Brand consistency tips

  • Pick one accent hex for the product and reuse it across minimal/gradient cards
  • Keep titles under ~60–80 characters so they survive Slack crop
  • Pair dark theme with light accent for docs; light theme with brand accent for marketing
  • Avoid putting critical meaning only in pattern color — patterns are decorative

FAQ

Can I upload a custom font file?

Not via the public query API today. Use the font family name parameter on supported templates, or keep custom typography inside a self-hosted @vercel/og route if you need exact font files.

Why was my accent ignored?

Accent must be #RRGGBB (six hex digits). Named colors and rgb() are rejected by validation. Also confirm you are on minimal or gradient.

Does appearance work with /api/og/auto?

Yes — pass theme/accent/pattern/font as overrides. Auto may also set accent from the page theme-color when it is a valid hex.

Related

OGKit turns one HTTPS URL into a 1200×630 Open Graph image. Read the API reference, deep guides, the Open Graph SEO guide, try the Playground, or sign in to create API keys.