Brands
A brand says what a design may use: logos, a palette, fonts and a type scale, spacing and radius, voice, and rules. Link a file to a brand, and your agent designs within it, Bogen checks the result, and a change to the brand can be carried into every linked file.
A brand is a document of its own. It syncs to your devices, has undo and history, and can have several people in it, like any file. You can have several brands, one per client.
Create a brand
On the home screen, under Brands, choose New brand. It opens at #/brand/<id>, the brand panel. In a design file, the Brand tab in the left panel shows its brand and the check.
A brand holds:
| Section | What goes in |
|---|---|
| Identity | Name, positioning, audience, tone. |
| Logos | Variants, each with the background it is for, a minimum width and clear space. |
| Palette | Colours with roles and tokens, and pairings of text and background, allowed or forbidden, with their contrast computed. |
| Type | Families with their roles (display, body, mono), weights, licence note and font files; a type scale with sizes, line heights, weights and tracking. |
| Layout | Spacing scale, radius, grid, container width, minimum contrast. |
| Imagery and iconography | Rules for each. |
| Voice | Words to use and to avoid, with replacements, and good and bad examples. |
| Rules | Do and don't rules, each hard (must) or soft (should). |
| Examples | Artboards on the brand's own canvas, marked good or bad. |
The panel edits all of this with undo, shows a brand sheet generated from the data, and downloads the brand guide as Markdown or PDF. Colour values per theme mode are set by your agent with brand_update; the panel has no field for them yet. An empty brand's sheet is bare.
Bring in what exists
Your agent fills a brand from what is already there, with brand_extract:
- a design file or a layer in Bogen;
- a live web page, captured with Snapshot and kept as an example;
- your repository's CSS, or a Tailwind config as text;
- pasted guide text, from which only literal colours are read. Your agent enters the rest by hand.
It goes by what is really used: colours by how often they appear, with a guess at their role, fonts and the type scale, spacing, radius, and logo candidates. Nothing comes in that the source does not have, and gaps stay empty.
Values given in vw come out as their size at the width of the capture, so spacing and sizes from a live page need a look from you. A Tailwind config that computes its values cannot be read.
Suggestions and confirmation
Everything extracted, and everything an agent adds on its own, is a suggestion. Suggestions are allowed in designs but not enforced. In the panel they carry a mark: Confirm one, confirm them all, or edit one, which confirms it. Your agent can confirm only when you tell it to.
Link a file
A file links to one brand. Linking brings the brand's tokens and fonts into the file, its type scale as text styles, and its colour values per theme mode. A brand can be the default for new files.
Once a file is linked, your agent learns about the brand without asking: opening the file gives it a short summary, and runs started from Bogen (Ctrl+K, comments) carry the whole brand in their prompt. Hard rules, the palette and the fonts are requirements to it. What a brand says is treated as data about a design: it cannot give an agent other orders. Rules that try to are flagged, shown to you and left out of what binds.
Check a design
brand_check, or the Brand tab of a file, checks a layer, a page or the whole file. It renders the design, so inherited fonts and colours count. Each violation names the layer, the rule, how severe it is and a concrete fix. Safe fixes, such as a near colour snapped to its token, a font swapped for the brand's or a shadow removed, apply as one undo step.
What it checks:
- colours off the palette, forbidden pairs and contrast;
- fonts, weights, sizes, spacing, radius, shadows and gradients;
- logos on the wrong background, too small, stretched, crowded, or not one of the brand's (a logo captured from a page is recognised by its shapes);
- words to avoid;
- rules that have a machine check, such as no gradients, no uppercase or at most two families;
- drift from the brand's tokens.
Rules no machine can check come back as a checklist, to judge by eye. Text over an image or drawing is not measured for contrast, and the result says so.
The score
The score runs from 0 to 100 and explains itself:
- 60% conformance: per category, the share of checks that passed, a near miss counting half. Categories and their weights: colour 25, type 20, contrast 10, spacing 10, shape 10, voice 10, rules 10, logo 5, tokens 5.
- 40% quality: type hierarchy, spacing rhythm, the palette's roles with the accent showing, and brand tokens, logo and components in use.
- Less a penalty: 2 per distinct hard problem, and up to 30 for the share of layers with one, at most 25 in all.
Fluid values count at the width of their artboard: clamp(16px, 3vw, 48px) on a 390 artboard is 16px. Checklist items are never counted. A page with nothing drawn has no score.
Quality is a heuristic; it does not judge taste. Work that keeps every value but is flat, with one size, one gap and no accent, scores in the sixties. The brand panel does not show the parts of the score yet; brand_check returns them in why.
Waivers
Only a person can waive a rule, per layer and with a reason: in the Brand tab of the file, choose Waive for this layer on a violation. Waived layers are listed and can be taken back. No tool can waive.
Strict mode
An agent's writes in a linked file come back with brand warnings from quick static checks, at most eight at a time. Turn on Strict in the brand panel, and a write that adds a hard violation is refused instead, with the fix, and nothing of it stays.
At the end of a run, its output and the Agents tab show the score and the open violations. Quiet markers on the canvas show where problems are; they come from the last check, and a toggle hides them.
Change a brand
- Publish version records the brand as it is. Versions can be compared with each other or with now.
- Before you apply a change, the panel shows its impact: which linked files and layers it touches, published or not.
- Apply to linked files carries tokens, fonts and old values into each file as one undo step per file, made by
brand. - Linked files offer a newer version, and agents working in them hear
brand_changed.
Logos and assets
Logos, fonts and images are stored by content and sync with the brand, in a library with tags. Your agent places a logo with brand_asset_use, which picks the variant for the background, keeps the minimum size and adds the clear space.
brand_template_use copies an example artboard or component of the brand into a file. The copy does not follow the brand later. For components that stay live, publish them from the brand as a shared library.
Templates
A template lays out a whole file from a brand's data in one step, as ordinary editable layers with the brand's tokens, fonts, logos and type scale, and components where something repeats:
| Template | What it makes |
|---|---|
brand-system | A brand guideline on seven boards: cover, logo, colour, type, layout and spacing, components, voice. |
landing-page | A page skeleton at 1440 and 390. |
social-images | Open Graph (1200 x 630) and square (1080 x 1080). |
On the home screen, a brand's menu has New brand system file, New landing page file and New social images file; the brand panel has Brand system file. Your agent uses template_list and template_use, and can make only some parts.
A template never invents brand values. Where the brand has a gap, the board says how to fill it, and the result lists the gaps. It is a start: look at it and refine it.
Safety
What a brand says reaches agents, so Bogen treats it as untrusted data: rules that talk to agents are flagged and left out, a brief sits in a block its content cannot close, SVG is sanitised on every read, and colours and font names are checked before they reach CSS. A brand that arrives from another device starts nothing, and the brand routes are closed on the tailnet listener.