# Logo: agent spec

Twin of `/logo`. Source wins: `app/assets/marks/marks.json`, `app/utils/marks.ts`, the components below.

## Assets

Fixed vector artwork on a `0 0 1920 1920` artboard. `pnpm marks:import` (`scripts/import-marks.ts`) writes `app/assets/marks/<name>.svg` from the Production Dropbox (`brand-assets/marks/`). Do not edit those files by hand.

| Name | Is | Component | Glyph bounds (x y w h) |
|---|---|---|---|
| `mark` | The M on its stage | `LogoMark` (`::logo-mark{fit}`) | `456.11 700.27 1007.75 519.46` |
| `wordmark` | “Motive” over “unknown”, drawn | `Wordmark` (`::wordmark`) | `246.05 784.18 1427.92 351.63` |
| `profile-circle` | Mark in a circle | `ProfileMockup` (ink disc on a `--ui-bg` disc) | `342.95 340.93 1234.12 1238.14` |
| `profile-square` | Mark in a square | `LogoArt` (`::logo-art{name}`) | `340.94 340.94 1238.12 1238.12` |

- `LogoMark`: default is a square viewBox, glyph width 75% of it, `size-[1em]`. `fit`: viewBox = glyph bounds, `h-[1em] w-auto`. `aria-hidden`. `intro="load"`: rolls in once per visit, after 0.2s (the guide's bars). `intro="view"`: rolls in when half of it is on screen (`SiteFooter`). Both use `unrolls.mark` and `useUnroll`, as `LogoMarkStage` does; use them with `fit`, whose box is the matte. The bars and the site's header and footer carry the mark, not the wordmark, at 30px (`text-(length:--text-h3-leading)`).
- `Wordmark`: viewBox = glyph bounds, height `351.63 / 218.04 × 0.72em` (`1.1611em`), so its “M” is `0.72em`. `WORDMARK_CAP = 218.04` (`app/utils/marks.ts`). `role="img"`, `aria-label="Motive Unknown"`. Prop `intro`: plays the unroll entrance once per visit, after a 0.2s delay. The bars set it on the H3 step (26px): 30.19px tall.
- `LogoArt`: `h-[1em] w-auto`, `role="img"`. `inverse`: an ink box with the artwork cut out to `--ui-bg`, the box inset 2 units. The square profile picture renders without `inverse`: an ink square with the M cut out, no box behind it, so the tile shows through the M. Its ink matches the circle's.
- `ProfileMockup` (`::profile-mockup`): the circle on an Instagram profile in `--ui-primary` on `--ui-bg`, `aspect-[3/2]` tile. Images per theme: `public/social/instagram-profile.webp`, `instagram-profile-dark.webp` (1920 artboard).
  - Profile hole: `d 304` at `(433, 822)`. The artwork is 90% of the hole's height.
  - Highlights: `d 179.5` at `y 1612.5`, `x 404.9, 691.0, 978.1, 1264.2`. Icons `paid-media`, `network`, `reporting`, `recorded-music`, each 60% of its disc.
  - Every disc bleeds 2 units past its hole.
- `LogoMarkStage` (`::logo-mark-stage{asset="mark"|"wordmark"}`): the 3D scene, `aspect-[3/2] max-h-[70svh]`, full content width, `bg-elevated text-highlighted`. The asset at rest is 58% (mark) or 70% (wordmark) of the frame's width.
  - Light at rest: elevation 45°, azimuth 0°.
  - Only the shadow is a drag handle. Drag moves the light: azimuth ±60°, elevation 25° to 89°. On release it springs back (`/agent/motion.md`, Logo exceptions).
  - Entrance: the unroll (`useUnroll`), when 50% of the tile is in view. Grabbing the shadow ends it at rest.
  - Caption: label, “· Drag the shadow”, and the asset's download link.
- `LogoTile` (`:::logo-tile{palette layout label size download}`, also `bg` + `ink`): `aspect-[3/2]`, `p-6`. No palette: `bg-elevated text-highlighted`. `size` sets the art's font size, in `cqi` of the tile's content box: `mark` `30cqi`, `wordmark` `15cqi`, `profile` `46cqi`, `md` (default) `text-2xl sm:text-3xl`. `download`: a `MarkName`; the caption then carries “Download ZIP · <size>”. `reverse-theme`: with a colour theme picked, the tile shows that palette in the other layout and captions it so (Lime Bright picked → Lime · Deep); otherwise its own `palette`/`layout`. /logo’s third colour option uses it.
- `motive-unknown` in the `motive` icon collection is the mark on a square viewBox around the glyph (`288.15 288.17 1343.67 1343.67`), glyph long side 75%. The other icons are on `0 0 512 512`. See `/agent/icons.md`.
- `public/favicon.ico` is `profile-square`, black on white, 16/32/48px.

## Downloads

`pnpm marks:import` builds `public/downloads/`. Sizes are in `marks.json` → `downloads`.

| File | Holds |
|---|---|
| `motive-unknown-<name>.zip` | Folder `motive-unknown-<name>/`. `svg/`: `-black`, `-white`. `png/`, 4000px long side: `-white-on-transparent`, `-black-on-transparent`, `-black-on-white`, `-white-on-black`. |
| `motive-unknown-logos.zip` | All four assets, one folder each. |

| Zip | Bytes | Printed |
|---|---|---|
| `mark` | 173072 | 173 KB |
| `wordmark` | 430220 | 430 KB |
| `profile-circle` | 474970 | 475 KB |
| `profile-square` | 226299 | 226 KB |
| `logos` (all) | 1304495 | 1.3 MB |

- `formatBytes`: `MB` to one decimal from 1e6 bytes, else whole `KB` (1e3).

- Every file is cropped to the glyph bounds plus 2: 2 units in an SVG, 2 pixels in a PNG.
- Zips are deterministic (fixed mtimes, `zip -X`).
- Use `markDownload(name)` for `href` and `bytes`. Give every zip link `external`, or the router returns 404.
- `/logo` frontmatter `download: {label, href}` puts the all-logos link in the page header.

## Rules

1. The mark leads. Use it wherever possible. Never pair it with the wordmark, and never lock the two up as one unit.
2. Use the wordmark only where people must read the name and the mark alone may not be recognised (context out of our control), or where the mark fits badly (logo walls, a quick written shorthand for the company). Use it sparingly.
3. Write “Motive Unknown” as text only where the mark or wordmark is already present and the text describes the company (“Motive Unknown is a …”). A letterhead may carry the mark with the name in its text or address.
4. The wordmark is drawn artwork. Do not set “Motive Unknown” in any typeface as its stand-in. Do not redraw, stretch or re-space it.
5. Render each asset in one colour, `brand/ink` of the active palette and layout (`/agent/colour.md`). No second colour, no stroke, no drop shadow. A gradient only in an interactive context (`LogoMarkStage`'s fading shadow); a static mark is always solid.
6. Clearspace is ½Y minimum on every side, for both assets. Y is the cap height.
   - Mark: Y is the M without the stage, `347.86` of `519.46` units (`--cs-cap: 0.6697`).
   - Wordmark: Y is the “M” of “Motive”, `218.04` units, `0.72em` (`--cs-cap: 0.72`).
   - Measure from the glyph bounds (`LogoMark fit`), not the artboard, not the default square.
   - Tokens, in `main.css` `.logo-clearspace`: `--cs` (Y), `--cs-space: 0.5` (the share of Y), `--cs-cap` (Y as a share of the glyph height). Padding is `--cs × --cs-space`; the glyph is `--cs / --cs-cap` tall.
   - Y scales with the tile: `--cs: 21cqi` for the mark, `10.8cqi` for the wordmark (`.logo-clearspace-wordmark-variant`).
   - Drawn by `LogoClearspace` (`::logo-clearspace{variant label}`, `variant` `mark` (default) or `wordmark`), `aspect-[3/2]`, `bg-elevated`: dotted line is the rule, hairline (35% ink) is the glyph bounds, `½Y` ticks in the Label role.
   - Approved by the brand owner. Never go below it.
7. Minimum size: 16px tall on screen, about 6mm in print.
8. Use `profile-circle` and `profile-square` only as avatars on a social platform. Use the circle where the platform crops to a circle, the square elsewhere. Do not use them as a logo on a page or in a layout.
9. Default placement: bottom-left or bottom-right, at the clearspace distance from both edges.
10. On screen, use `LogoMark`, `Wordmark` or `LogoArt`. Off screen, use the `/logo` downloads. Do not redraw, trace or screenshot an asset.

## Craft rules (from `better-ui`)

1. Every asset uses `currentColor` and takes each state from CSS.
2. Use `fit` when the mark shares a row with type or a control. The default square is mostly empty space.
3. Align the mark optically. Its weight sits low, so box-centred in a square it looks high.
4. An image beside the mark takes a 1px outline: `oklch(0 0 0 / 0.1)` in light, `oklch(1 0 0 / 0.1)` in dark. Never a tinted neutral.
5. Set the mark `aria-hidden` where adjacent text names the brand. Give it an `aria-label` only when it is the sole content of a link or button.

## Related

- `/agent/colour.md`: ink colour per palette and layout.
- `/agent/pattern.md`: wordmark placement on covers.
- `/agent/icons.md`: `motive-unknown`, the mark as an icon.