Opidocs
FeaturesDesigner

Brand assets

Why brand context matters, what to give the agent, and how it uses it.

Brand assets are how the designer agent stays on-brand without you re-typing your colors and fonts every turn. A design with brand context produces consistent output; a design without it produces wireframes.

What brand context contains

A design's brand context can include:

  • Logo — One or more URLs or uploaded files. The agent embeds them in headers, hero sections, and wherever else they belong.
  • Palette — A small set of hex colors with semantic roles (primary, secondary, dark, light, accent).
  • Fonts — Family names ("Inter", "IBM Plex Sans") or links to font hosting.
  • Reference URLs — Pages or images the agent can scrape for inspiration. ("Match the layout density of stripe.com/pricing", "Use this dribbble shot as a vibe reference.")
  • Tone — Free-form text describing the brand's voice. ("Confident, technical, slightly playful.")

The more you give it, the more the agent can do without asking.

How the agent uses brand context

Every turn, before generating code, the agent calls get_brand_context and reads what's there. It uses the result to:

  • Pick colors — backgrounds, text, accents, hovers
  • Pick fonts — heading vs body, weight contrast
  • Compose imagery — choose between brand assets, generated images, or neutral placeholders
  • Match tone — copy for headlines, CTAs, and microcopy

If the brand context is empty or missing key fields, the agent will surface the gap in its response and ask you for the missing pieces. It refuses to proceed beyond a wireframe without something to anchor on, because the alternative is a generic-looking template.

Adding brand assets

There are three ways to give a design brand context:

1. From Image Studio

When you've made a logo, hero image, or other branded image in Image Studio, click Insert into… → Design. The image gets added to the target design's brand.referenceUrls, where the agent picks it up next time it generates output. You'll see a toast confirming "Added to brand assets".

This is the cleanest path for visual references — generated logos, mood-boards, hero photography.

2. From the chat

You can describe brand context inline in your messages:

"Use #f54e00 (primary), #1a1a1a (dark), and white. Inter for headings, IBM Plex Sans for body. The vibe is confident and slightly playful, like Linear's marketing site."

The agent picks this up and writes it into the design's brand context for future turns. You don't have to repeat it.

3. From the brand panel (placeholder in v1.0)

The editor has a brand panel placeholder that will eventually let you set brand assets directly through a UI (logo upload, color pickers, font selectors). In v1.0, this panel is a placeholder — set brand context through the chat or via Image Studio's "Insert into… → Design" hand-off.

Brand styles vs brand assets

Brand styles (used by Image Studio) and brand assets (used by Designer) are different things:

  • Brand styles are workspace-wide presets created by admins, used to bias image generation toward your brand colors and tone
  • Brand assets are per-design context the designer agent reads — they include images, logos, references, and free-form tone

A design's brand assets can include images that came from Image Studio canvases that themselves used a brand style. The two systems don't share state, but they layer well.

When to skip brand context

Sometimes you just want a wireframe. To skip the protocol, say so explicitly:

"No brand assets yet — just sketch a wireframe."

The agent will produce structural HTML without much styling. This is useful when:

  • You're early in the project and just want to see layout options
  • You're planning to swap a generated wireframe into a design tool for further work
  • You don't have brand assets yet and don't want to invent them

Once you do have brand context, send a follow-up to refine the wireframe with real styles.

On this page