Opidocs
FeaturesDesigner

Brand context

How Designer reads your org's brand to keep generated designs on-brand without re-typing colors and fonts every turn.

Designer reads your org's brand profile automatically. A design with brand context produces consistent, on-brand output; a design without it produces wireframes.

What the agent reads

Every turn, before generating code, the agent calls get_brand_context and receives:

  • Identity — your brand name, tagline, one-liner.
  • Palette with rolesprimary, background, accent, etc. The agent picks colors by role, not by index.
  • Typography stacks — family + fallback + weights per role (display, body, mono).
  • Voice & tone — used for headlines, CTAs, microcopy.
  • Logos by role — primary, dark, light, icon, wordmark.
  • Imagery references — reference URLs and mood-board files.
  • Guidelines — hard constraints the agent obeys.
  • Context — industry + audience, used to tune copy.

If the brand profile is empty or missing key fields, the agent will surface the gap and ask an admin to populate it at /admin/brand before producing more than a wireframe.

The brand panel

The top of the Designer chat shows a read-only summary of the org brand: name, palette swatches (click to copy), font families, voice tags. Click Edit brand in admin to jump to the form.

The panel reflects the brand in real time — if an admin edits the brand in another tab, this panel updates within seconds.

Adding to the brand from Designer

When you create an image in Image Studio that should belong to the brand (a logo, hero image, mood-board addition), use Insert into… → Brand. The image's signed URL gets appended to your org brand profile's imagery references.

(This is the org-wide brand profile, not a per-design override — the same imagery references appear in every design's brand panel.)

When to skip brand context

Sometimes you want a wireframe regardless. Say so in chat:

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

The agent produces structural HTML with minimal styling. This is useful when:

  • You're exploring layout options before colors matter.
  • You're planning to hand the wireframe to a design tool.
  • The brand profile is empty and you don't want to wait.

Once the brand is populated, follow up to refine the wireframe with the real palette + fonts + voice.

On this page