System templates

System templates are the ready-made layouts that ship with braaand. They're finished, polished designs with no brand baked in, so any brand can pick one up and make it its own.

Two kinds

• Branded. The everyday layouts: hero statements, product cards, sale posters. They take on a brand's colors and fonts on their own.
• Concept. Playful fake-screen designs: a notes app, an iMessage thread, a dating-profile card, a leaked PDF, a sticky note. These look like the thing they're imitating, so they don't follow the brand's fonts and colors the usual way. A brand can still opt in for its logo or accent color where it fits the joke.

How one becomes yours

When an agent picks a system template for your brand, braaand makes a copy and applies your brand to it: your colors and fonts flow in, the right logo gets chosen, and the layout is sized for every format. The result is your own template, fully editable. The original is untouched, so the same system template can be used by a thousand different brands.

You can browse them in the app, and an agent reaches for them by matching your request against what each one is built for (see Why templates).

The Template Library

Every brand has a Template Library page (Templates → New Template → Browse the library, or the "…" menu in the brand navigation). It shows the whole catalog as cards, each previewed in your brand — the same layout you'd get, with your colors, type and logo already applied — with a toggle back to the unbranded original. Search and filter by purpose (the same vocabulary a pipeline's Templates node searches on), by kind, and by photo-led vs text-only.

Click cards to select as many as you want, then add them all in one go. Packs sit at the top as one-gesture starting points: curated bundles like the Event pack (the whole arc from save-the-date to the day-after thanks), the Campaign pack, the Parody pack, and a small Starter pack. Selecting a pack selects its members — you can still deselect individual layouts before adding.

Families — siblings the AI picks between

Some layouts exist in variants: the same design tuned for different amounts of copy, like Hero Statement (short, punchy) and Campaign Statement (its long-copy sibling). Those share a family, and a campaign run picks at most one member per family — the one whose copy budget fits the brief — instead of shipping the same design twice. You'll never have to think about this; it's how a batch stays a spread of genuinely different layouts as the library grows.

Layout intent travels with it

A system template is more than positioned boxes. It can also carry the rules that explain how those boxes should behave when an agent rewrites the copy or swaps an image:

• Guides are rails on the canvas: safe margins, bottom lines, center lines, or points of interest for image subjects.
• Clusters are flexible stacks. A heading, subheading, and button can stay centered together, or a checklist can keep even spacing as rows wrap.
• Groups are frozen sub-arrangements. Use them for row/card units whose insides should stay exactly arranged, like a checkbox plus its label.
• BrandFit rules decide which deterministic layout fixes run automatically or on demand.

Those fields are copied from the system template into the brand template, and then into every creative made from it. A complex template can therefore arrive with its own behavior intact: an agent changes words, calls BrandFit, and the layout settles without hand-moving everything.

Fill-to-the-guides typography

Some layouts are built on a poster move: a one-word hook set huge, with a support line under it, both running exactly flush to the same column edges — think "ONSDAG!" spanning from the left edge of one photo to the right edge of another. Templates express this with fill-width type: mark a text element with constraints.fillWidth: true, give its box the column width (usually authored to two vertical guides), and BrandFit derives the font size automatically so the single line spans the box.

The consequence is the interesting part: nobody chooses the size — the copy's length is the design. A short word sets enormous; a longer line sets proportionally smaller in the same column. That's why fill-width templates give their copy elements tight character budgets and say so in their playbook: "ONSDAG!" fills like a poster, while a sentence would set small and read timid. The fill works in both directions (short copy grows, long copy shrinks), stays inside the element's fontSizeRange, and deliberately stops a hair short of the box edge so the line can never wrap. The usual "make the text bigger/smaller" layout fixes stand down on these elements — the fill owns their size.

Fill-width pairs with clusters: because the filled line's height changes with its length, the elements below it should be cluster members so they re-stack instead of being overlapped. The Event Speaker Duo template is the reference pattern — hook and support line fill the column, the two portraits ride as a group inside the same cluster, and the footer stacks last, so however big the hook sets, everything below it moves down to make room.

The plakat family is the same move as a whole layout: Plakat (text only, on the scheme panel), Photo Plakat (over a full-bleed portrait) and Split Portrait Hook (panel beside a portrait) each set a giant hook in the scheme's accent color with one support line under it, both fill-width, with a small attribution stacking last. The hook is role: "accent" — accent-colored display type straight from the cascade, so it flips with every color scheme and renders in the brand's heading face unless the brand defines an accent type style of its own. Their quote-led siblings, Quote on Portrait and Round Portrait Quote, carry a person's exact words instead of a hook.

Budgets match the design

Every text element in the library carries constraints that describe the template as it was drawn, not a loose envelope around it: idealFontSize is the size the author set on that format and fontSizeRange runs ±5% around it, the character budget is the placeholder copy's own length ±5%, and maxLines is the number of lines that copy actually renders in. Fill-width elements are the one exception on size — their band stays wide because the copy's length decides the size. The consequence for copywriting is deliberate: a template is a design with a shape, so the agent writes to the shape (a 24-character headline stays a 24-character headline) rather than filling whatever a wide budget would allow. pnpm tighten:constraints regenerates the numbers from the seeds themselves — measuring lines in the unbranded render — so a layout change and its budgets can never drift apart.

Reusable rows and cards

Groups and clusters work especially well together. Put each row or card into a group, then make those groups members of one parent cluster. Mark the best source group as reusable. An agent can then clone that group, swap the new text or image, append it to the cluster, and BrandFit stacks the whole list cleanly.

This is the pattern to use for checklist concepts, ranked lists, repeated cards, chat-message rows, quote lists, and any template where "add one more item" should be a normal agent action rather than a redesign.

Agent routes

Agents can see the system-template catalog and copy a layout into a brand:

braaand system-templates list
braaand system-templates instantiate hero-statement --brand <brandId>

Once instantiated, the copy is a normal brand template. Edit it with the template editor, templates update, or MCP tools like update_template_element. For a client layout that should not become part of the global catalog, start a brand template directly with templates create or create_template.