Brand assets are slots, not values — the file-level equivalent of semantic roles. Rebrand by editing brand/brand.json and replacing its declared files, then run scripts/export_brand.py; consumers keep one generated recipe. The manifest owns each slot’s ratio, delivery status, and optional polarity or small-size optical cuts. Slots a brand does not own are absent; pending slots are named as pending instead of displaying placeholder art as final. The manifest lives in brand/brand.json.
The identity alone, from brand/mark.svg. Drawn in currentColor, so it takes the color of whatever surface it sits on — toggle the theme to watch it follow.
The name alone, from brand/wordmark.svg — art, not live text, so it never picks up a font role.
The same name folded onto two lines, from brand/wordmark-stacked.svg — an orientation of the wordmark for columns too narrow to take the horizontal one, not a separate identity and not a lockup.
Mark and wordmark locked in their fixed relation, from brand/lockup.svg — one file, so the spacing between the two can never drift per placement. Only a brand that owns both a symbol and a name has one; stacking the wordmark does not make a lockup.
Previews render the shipped files live; replace a file and this page rebrands with you.
| Example | Slot | File | Usage |
|---|---|---|---|
mark | brand/mark.svg | Optional. The symbol alone in compact product and social placements; shown at 48px, minimum 24px. The favicon owns the distinct 16px browser-tab use. | |
wordmark | brand/wordmark.svg | The name alone at the base signature scale; minimum width 96px | |
wordmark-stacked | brand/wordmark-stacked.svg | Optional. Two lines at the same letterform scale as the horizontal wordmark; stacking adds height without enlarging the name | |
lockup | brand/lockup.svg | Optional. Symbol and name locked together at the base signature scale; the full signature for headers and footers, stepping down below 128px | |
favicon | brand/favicon.svg | Shown at its actual 16px browser-tab size; the preview follows this page's theme and the browser tab follows the OS theme embedded in the adaptive SVG | |
fonts | brand/fonts.css | Every declared font.family.* stack appears automatically; font.role.* maps consumers to those available families |
The manifest carries these same rules for agents.
| Verdict | Rule |
|---|---|
| Do | Keep identity artwork single-color currentColor; use adaptive-monochrome for favicons unless multiple brand colors must be preserved. |
| Do | Step down to the next smaller form the brand actually owns below a slot's minimum size — never scale past legibility, and never step to a slot this brand has not declared. |
| Do | Declare only the forms the brand owns, and delete the slots for the rest. A wordmark-only brand has no lockup. |
| Do | Keep clearspace around the mark at least a quarter of its height on every side. |
| Do | Render identity at about half the app-bar height (20–28px) — the lockup where the brand has one, the wordmark where it does not; when the bar cannot afford that width, use the mark alone. |
| Do | Render every slot with the production ds-brand-asset recipe so external SVG artwork inherits currentColor on every surface. |
| Do | Run scripts/prepare_favicon.py after replacing the favicon; adaptive mode normalizes the silhouette and injects OS-theme colors, while self-colored mode preserves the upload. |
| Do | Load custom faces from brand/fonts.css with the files beside it. |
| Don’t | Recolor, distort, rotate, or add effects to a brand asset per instance. |
| Don’t | Substitute an i-* interface icon for the mark or rebuild the wordmark as live text. |
| Don’t | Fill a slot with a copy of a neighbouring drawing to keep a reference working. Two slots holding the same artwork means one of them is lying about what it is, and every placement sized for that slot renders the wrong form. |
| Don’t | Call a stacked wordmark a lockup. Orientation is not identity — a lockup is a symbol and a name locked together. |
| Don’t | Inline @font-face into generated adapters — web/theme.css is regenerated. |