# OpenGraph

Make social preview images in seven formats from the identity's headline, proof and graphic device, then export them as PNG or SVG.

OpenGraph (tool ID `opengraph`) makes social preview images, the cards that appear when a link is shared. It is one of the [expression tools](/docs/studio/templates) and starts from the brand template of the active identity. The default Split layout holds the identity's headline, its promise as supporting copy, a proof chip, the brand mark and a media panel. The media panel shows the identity's graphic device or photograph. General Translation gets its language field, Stripe its programmable field, Ramp its campaign photograph and Tailwind CSS its utility wave.

<DocsMediaGrid>
  <DocsMedia alt="General Translation OpenGraph card in the expression editor, dark Studio chrome" caption="Split layout" meta="1200 × 630 · dark chrome" src="/screenshots/studio-gt-opengraph-dark-2026.webp" />

  <DocsMedia alt="General Translation OpenGraph card in the expression editor, light Studio chrome" caption="Same card, light chrome" meta="Theme-independent output" src="/screenshots/studio-gt-opengraph-light-2026.webp" />
</DocsMediaGrid>

## Content controls [#content-controls]

* **Content** has **Headline**, **Typography role** and **Font weight** (100–550) for the headline layer.
* **Surface** switches the page between **Base white** and **Base dark**. Text and marks switch with it. Each identity sets its default surface, and General Translation starts on its dark ink color. **Page surface** in **Format and layout** accepts any brand color role.
* Split and Full bleed have a media panel. **Add supporting image** replaces the panel with a local image. **Identity evidence** picks an image from the identity library, and its **Brand device** option returns the panel to the generated device.
* **Replace logo** uploads a new mark, and **Brand logo asset** picks one from the identity. Select the logo layer to reach **Logo effects** (invert, dither, outline and shadow).
* **Add font file** loads a local font file for the headline.

Every layer is also editable on the canvas. See [Expression tools](/docs/studio/templates).

## Formats and layouts [#formats-and-layouts]

OpenGraph uses the seven social formats: `opengraph` 1200 × 630, `wide` 1600 × 900, `square` 1080 × 1080, `portrait` 1080 × 1350, `story` 1080 × 1920, `linkedin` 1200 × 627 and `lockup` 1200 × 600.

| Layout         | ID          | Arrangement                                                                           |
| -------------- | ----------- | ------------------------------------------------------------------------------------- |
| **Split**      | `split`     | Copy beside the media panel. Tall formats stack the panel above the copy              |
| **Statement**  | `statement` | The wordmark, one large headline and a ruled footer with the website and a proof line |
| **Full bleed** | `media`     | The media panel behind the headline, with a dark scrim                                |
| **Centered**   | `centered`  | Wordmark, centered headline, supporting copy and website                              |
| **Editorial**  | `editorial` | A large headline from the top edge and a ruled footer with the wordmark and website   |

## Export [#export]

**Export PNG** renders the artboard at 2×, which is 2400 × 1260 px for the default format. **More exports → Export SVG** downloads a self-contained SVG. For the social images of the deployed Glyphfield site itself, see [Social previews](/docs/reference/social-previews).

## Browser actions [#browser-actions]

| Action                                                                                                    | Use                                  |
| --------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| `opengraph.export.png`                                                                                    | PNG of the artboard at 2×            |
| `opengraph.export.svg`                                                                                    | Self-contained SVG                   |
| `opengraph.document.describe`                                                                             | Format, layouts, pages and layers    |
| `opengraph.layer.add` / `opengraph.layer.update` / `opengraph.layer.remove` / `opengraph.layer.duplicate` | Layer edits                          |
| `opengraph.layer.reorder` / `opengraph.layer.select` / `opengraph.layer.align`                            | Stack order, selection and alignment |
| `opengraph.format.set` / `opengraph.layout.apply` / `opengraph.template.reset`                            | Format, layout and template          |
| `opengraph.history.undo` / `opengraph.history.redo`                                                       | History                              |

Agents can also fill labelled controls, for example `studio.set('Headline', 'Ship every locale')`. [Expression tools](/docs/studio/templates#browser-api) describes the inputs and outputs of the shared actions.

## HTTP [#http]

`POST /api/generate` with `{ kind: 'template', template: 'opengraph', layout?, format?, title?, body? }` returns the same template as an SVG. `body` fills the supporting copy on layouts that have it. See [Generation API](/docs/agents/generate#templates).