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.
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 |
