One mark. A whole family.
The disc in its ring is Milo. Around it sits a technical family — wordmark, mono register, monogram, seal, stamp, a dithered twin and the Offline sub-brand — so the identity can speak in a headline, a file header, a corner of a plate or a 16-pixel tab, and still be one thing.
Updated 2026-09-26 Milo's mark is now the traced monkey — 28.00. The disc in its ring is retired as the mark; the family below is kept as the record.
Milo is the monkey.
James, 2026-09-26: "Option 1, the monkey Milo … the monkey in design 1 works. I need the monkey traced directly from the image so it's accurate to what I provided." It is traced, one path, and the product draws it everywhere the ring used to stand.
One path, even-odd fill, currentColor: the mark takes its ink from the surface, exactly as the family below does. The three colourways are the three the product ships as PNG.
The wordmark lockup
The mark in Vermilion beside Milo in Instrument Serif — the welcome's wordmark and the top of the app's rail. Vermilion keeps its one meaning: Milo is here.
At a range of heights
The mark is 1.59 times as wide as it is tall. A minimum size and a clear-space rule for it have not been set yet; the ring's rules in 28.3 do not carry over.
- Source
- James's design 01 image (22 Sep 2026), the monkey cut from it
- Trace
- potrace at 8× on a threshold of 126; 83 polygons in one path
- Agreement
- 97.4% of pixels (intersection over union) against the source cut; the older cell drawing scored 89.3%
- Box
- 153.75 × 96.875 units
- Drawn in
- the welcome, the first-run walk and its celebration, the app's rail, the web app, and the launch film (48)
- Reference PNG
- a transparent clean-up made with codex --2 image_gen scored 91.2%, so it is kept as reference only; the product draws the trace
Files for the mark
| file | use |
|---|---|
| milo-mark.svg | the mark, one path, currentColor |
| milo-mark.js | drawMiloMark(ctx, x, y, height, colour) — any Canvas 2D: a browser, node-canvas, a QML Canvas |
| mark/milo-mark-ink-*.png | ink, 32 · 64 · 128 · 256 · 512 · 1024 |
| mark/milo-mark-cream-*.png | cream, the same six sizes |
| mark/milo-mark-vermilion-*.png | Vermilion, the same six sizes |
Copied from offline-os assets/brand/ (branch lane-c, 2026-09-26). The product's other forms: plugins/_shared/MiloMark.qml and the web app's hosted/web/icon.svg, all from the same path.
The disc in its ring is no longer Milo's mark. Nothing below is deleted: 28.0–28.8 stay as the V1.2 record, and 39 Mark Studies stays as the exploration. New work uses the traced monkey. The favicon of this site still shows the ring until a 16-pixel version of the monkey is tested.
The disc in its ring was drawn before anyone knew why it was right. The origin arrived afterwards and explained it.
Milo is named after a golden lion tamarin — a small primate whose distinguishing feature is a radiating mane with a bare face inside it (38 Origin). Reduced to a grid, that anatomy is a void inside a ring of radiating marks: the same topology this mark already had.
The convergence was not designed in. It came out of a frontal photograph during the mark studies, which is the strongest argument for keeping the geometry rather than replacing it.
The exploration that found this — twelve studies, three finalists, none chosen — is 39 Mark Studies. It is exploratory: nothing on this page has been superseded, and no mark has been locked.
The mark's vermilion face and the wordmark's vermilion full stop carry the same meaning — Milo is present — which is why the two read as one system rather than as a symbol beside a word.
Every member, on cream and on carbon.
Each file takes its ink from the surface it sits on; only the disc keeps its colour.
Which member, where
| member | register | lives on |
|---|---|---|
| Symbol | the constant | nav brand, favicon, voice pill, presence dots, every lockup |
| Wordmark | editorial | site header, launch screen, poster, document title |
| Technical | Nous / Hermes | file headers, exports, README, slide corners, packaging, the zip cover |
| Monogram | compact | avatars, social profile, single-colour reproduction, embossing |
| Seal | ceremonial | provenance panels, certificates of a run, the artwork caption's "Milo interpretation" badge at large size |
| Stamp | index | plate corners, screenshot corners, printed pages, the MILO / 00 numbering |
| Dither | computational | the image engine, playground, loading states, the 10% animated layer |
| Offline lockup | sub-brand | fleet, connections, machine rows, anything infrastructure; never in vermilion |
| Version stamp | metadata | footers, exported documents, package covers |
Two circles on a 24-unit grid.
The ring is 1.5 units at radius 9.25; the disc is radius 4.5; the optical centre is the geometric centre. The technical mark is a 240 × 72 frame with 8-unit corner ticks.
Measurements for every member
| member | viewBox | geometry | type |
|---|---|---|---|
| Symbol | 24 × 24 | ring r 9.25 / 1.5; disc r 4.5 | — |
| Wordmark | 132 × 40 | symbol at x 4, baseline shared | Instrument Serif 34, tracking −0.6 |
| Stacked | 96 × 88 | symbol centred above | Instrument Serif 40 |
| Technical | 240 × 72 | 1-unit frame, 8-unit corner ticks, symbol at 0.75 scale top-left | JetBrains Mono 26, tracking 5.2 (0.2em); labels 7 |
| Monogram | 48 × 48 | circle r 22; M from (12,14)–(24,28)–(36,14); point r 2.5 | — |
| Seal | 160 × 160 | rings r 78 / 74 / 44; text path r 58; ticks 6 | JetBrains Mono 8.6, tracking 2.4 |
| Stamp | 200 × 56 | frame inset 6.5; crosshair corners 13 | JetBrains Mono 16 / 7 |
| Dither | 48 × 48 | ring r 22; Bayer-8 threshold against radial luminance; 1-unit cells | — |
One diameter of air. Never smaller than it can be read.
The dashed box is the exclusion zone: one symbol diameter on every side. Below the minimums the ring closes up and the mark becomes a dot.
Rules
- Clear space is measured from the ring, not the disc, and applies to type, rules, image edges and other marks.
- Below 24 px the favicon file replaces the symbol: its ring is mid-grey so it holds on both themes.
- The technical mark never scales below 96 px; below that use the stamp; below 80 px use the symbol.
- The seal is never used smaller than 64 px, and never as a button.
Ink follows the surface. The disc does not.
Seven permitted situations. On imagery the mark always sits on a field — cream or carbon — never directly on the picture.
ON A PHOTOGRAPH · cream field
ON A DERIVATIVE · carbon fieldColour rules
- Ink is
--text-primaryof the surface: carbon on cream, mineral on carbon. Nothing else. - The disc is Milo Vermilion
#F04A24(#FF5A32on the dark app icon for contrast). It is the only coloured element. - One-colour: the mono symbol may be all-carbon, all-cream or all-vermilion. The wordmark is never all-vermilion.
- Moss appears only in the Offline lockup's ⌁ and field. The Milo symbol is never moss.
- On imagery: a cream or carbon field behind the mark, with the clear space inside the field. No mark sits on a picture bare.
The mark carries its own coordinates.
In the technical register the identity travels with an index number, a coordinates strip and a version stamp — the Nous / Hermes habit of a mark that is also a label.
MILO_IMAGERY_SYSTEM_V1
DOCUMENT 03 OF 19 · 2026-09-22 · 172 LINES
Lockup rules
- Metadata is set in JetBrains Mono at
--type-mono-micro, tracked 0.06–0.1em, uppercase, on a hairline. - The stamp's index (MILO / 00) is the page or plate number; it is never decorative — a stamp without a real index is a misuse.
- Coordinates, dates and versions are real values from the manifest or the build; never placeholder digits.
- A plate corner mark sits on a cream field inside the image's clear space; one per plate.
Milo lives inside Offline. The marks say so.
Offline is a moss field with a mono word; Milo is the vermilion disc that enters it. Neither borrows the other's colour.
The sub-brand on its own: moss ⌁, mono OFFLINE, hairline. It marks infrastructure — fleet, connections, machines, local execution.
The relationship: when Milo acts, the vermilion edge and disc appear inside the moss field. Offline stays healthy when the disc is absent.
Coexistence rules
- The Milo symbol is never placed inside or as part of the word OFFLINE.
- OFFLINE is never set in vermilion; its glyph ⌁ is moss, its word is ink.
- A Milo field is bordered by ink; an Offline field is bordered by moss. Vermilion is used as an edge or a disc, never as a fill behind either word.
- Both may share a surface (fleet, task detail); Milo enters an Offline field, not the other way round.
Eight things the mark never does.
Each is rendered on purpose so it is recognised on sight.
Sixteen files, one folder.
All SVG, all currentColor, all in assets/logo/ with a README that repeats the minimums.
| file | use | minimum | size |
|---|---|---|---|
| milo-symbol.svg | the mark | 12 px | |
| milo-symbol-mono.svg | one-colour mark | 12 px | |
| milo-wordmark.svg | horizontal lockup | 18 px tall | |
| milo-wordmark-stacked.svg | stacked lockup | 40 px tall | |
| milo-technical.svg | technical register | 96 px wide | |
| milo-monogram.svg | hairline monogram | 16 px | |
| milo-monogram-solid.svg | solid monogram | 16 px | |
| milo-seal.svg | seal | 64 px | |
| milo-stamp.svg | index stamp | 80 px wide | |
| milo-dither.svg | computational variant | 24 px | |
| offline-lockup.svg | Offline sub-brand | 64 px wide | |
| milo-in-offline.svg | relationship diagram | 120 px wide | |
| milo-favicon-16.svg | favicon | 16 px | |
| milo-app-icon.svg | app icon, cream | 32 px | |
| milo-app-icon-dark.svg | app icon, carbon | 32 px | |
| milo-version-stamp.svg | version strip | 160 px wide |
