Skip to content
OG Engine logoOG Engine

Customizing Styles

Every visual aspect of a generated image is configurable through the style object. You only need to include the fields you want to change — everything else falls back to sensible defaults.

style.accent

Section titled “style.accent”

A hex color string that drives the primary brand color in the image. Used for:

  • The accent bar in the default template
  • The divider line in social-card
  • The CTA element in email-banner
  • The tag/pill badge border and background tint
{ "style": { "accent": "#38ef7d" } }

Any valid 6-digit or 3-digit hex color is accepted (#38ef7d, #fff, #FF5733). The engine automatically computes a contrasting foreground color for text rendered on top of the accent element, so you do not need to worry about readability.

Default: #38ef7d

style.font

Section titled “style.font”

The font family to use for all text in the image. Must be one of the 8 pre-loaded fonts:

API Name Character
Outfit Modern geometric sans-serif
Inter Neutral, highly legible
Playfair Display Elegant serif for editorial
Sora Friendly rounded sans-serif
Space Grotesk Techy, slightly irregular
JetBrains Mono Monospaced — great for developer tools
Noto Sans JP Latin + Japanese CJK
Noto Sans AR Latin + Arabic 
{ "style": { "font": "Playfair Display" } }

Default: Outfit

See the Available Fonts page for full details including weights and script coverage.

style.titleSize

Section titled “style.titleSize”

The font size for the title in pixels. Affects how many lines the title wraps to before hitting the max-lines limit.

  • Minimum: 28
  • Maximum: 72
  • Default: 48
{ "style": { "titleSize": 56 } }

Larger title sizes are dramatic and high-impact. Smaller sizes let longer titles fit without overflow. If you need more flexibility, pair a smaller titleSize with /validate to confirm the text fits before rendering.

style.descSize

Section titled “style.descSize”

The font size for the description in pixels.

  • Minimum: 14
  • Maximum: 32
  • Default: 22
{ "style": { "descSize": 18 } }

style.layout

Section titled “style.layout”

Controls the horizontal and vertical alignment of the text block within the canvas:

Value Behavior
left Text left-aligned, positioned in the upper-left quadrant
center Text centered horizontally
bottom Text left-aligned, anchored to the bottom of the canvas 
{ "style": { "layout": "center" } }

Default: left

The bottom layout is particularly useful with the story format (1080×1920) and background images, placing text in the lower third where it reads naturally against the image.

style.gradient

Section titled “style.gradient”

Six built-in gradient presets control the background color scheme. Each is designed to work well with the default accent color and white text:

Name Colors Character
void Near-black deep purple Dark, dramatic, universal
deep-sea Dark teal to navy Cool, technical
ember Deep charcoal to warm rust Bold, energetic
forest Dark green to black Natural, earthy
plum Deep magenta to dark purple Creative, distinctive
slate Dark blue-grey to charcoal Professional, neutral 
{ "style": { "gradient": "ember" } }

Default: void

All gradients are dark-themed to ensure white text remains legible. If you’re using the blog-hero template with a background image, the gradient is overridden by the image — in that case, control darkness via style.overlayOpacity instead.

Default Values Summary

Section titled “Default Values Summary”

When omitted, each field falls back to:

{
  "style": {
    "accent": "#38ef7d",
    "font": "Outfit",
    "titleSize": 48,
    "descSize": 22,
    "layout": "left",
    "gradient": "void",
    "overlayOpacity": 0.65
  }
}

Full Style Example

Section titled “Full Style Example”
Terminal window
curl -X POST https://og-engine.com/render \
  -H "Authorization: Bearer oge_sk_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "format": "og",
    "title": "The Pragmatic Engineer",
    "description": "Deep dives into software architecture and engineering culture.",
    "tag": "Newsletter",
    "style": {
      "accent": "#f59e0b",
      "font": "Playfair Display",
      "titleSize": 52,
      "descSize": 20,
      "layout": "left",
      "gradient": "plum"
    }
  }' \
  --output card.png

Try Live

Section titled “Try Live”

Experiment with style settings and see changes rendered instantly:

0.0ms|1300× vs Puppeteer
Accent
Font
Layout
Gradient
48
22

Next Steps

Section titled “Next Steps”