What Milo repeats.
A brand is recognised by what it repeats. Milo repeats the dither field, the hairline, the grid, the registration slip, the index number, one icon construction and a handful of elements no one else uses. This page is that vocabulary, drawn live from the engine and the token set, with the tiles to download.
The texture is a pattern.
Five screens over one dark-to-light gradient, in the three colourways the system allows. Rendered here by the engine; the same tiles ship as PNG.
A field behind type
Only behind display type, only at 12% ink or less, never behind body copy, never animated. The field says "computation is present"; it must not compete with the words.
Technology in service of human purpose.
Spec and downloads
| Construction | core.quantise(gradient, {matrix, levels: 2, strength: 1}) → core.mapTones to ink and paper. No grain, no blur. |
|---|---|
| Colourways | carbon #0B0C09 on cream #F3EFE6 · vermilion #F04A24 on cream · mineral #EDE9DF on carbon. Moss fields are not a colourway: Moss is a midtone in imagery, not a texture. |
| As background | ≤ 12% opacity, behind display serif only, static. Not behind body, controls or rows. |
| Scale | Bayer 8 at 1:1 device pixels on screen; for print, halftone at 60 lpi equivalent. |
| Files | field-bayer8--carbon-on-cream.png · …vermilion-on-cream · …mineral-on-carbon; bayer2, bayer4, atkinson and halftone follow the same names (15 files, 512 × 512, tools/render_patterns.mjs). |
One pixel does the structure.
Rules, frames, brackets, crosshairs, registration marks, tick scales and the coordinate strip — the whole page architecture is drawn at 1px. Each has a class.
Rules for rules
| Weights | Exactly two: --hairline-strong (ink) and --hairline (fog / carbon-700). Never 2px, never a shadow. |
|---|---|
| Strong | Section heads, the top of a list, the caption rule under a plate, the composer. |
| Light | Between rows, between fields, ledger lines, the baseline grid. |
| Double | Once per page at most: the end of a ledger or a signed total. |
| Brackets and crosshairs | Specimens, quotations, coordinate origins on Field Study plates. Not on controls. |
| Coordinate strip | Mono micro, tracked 0.06em, one strong rule above; content is real (a location, a date, an index), never decorative digits. |
The grid may show itself.
Four ways the structure becomes visible — and when each is allowed.
When a grid is visible
In the product, never on an operational surface. On an image, only as the data layer of a Field Study or the scan field of Nous. In documentation, on demand (04 Grid's toggle) and in specimens. A visible grid is a statement about measurement, so it appears where something is being measured.
The print slip.
A vermilion plate two pixels under the ink, or a channel split around a word — the printmaking motif that says the image was made, not captured.
Intent.
Interpretation
Rule
| Slip | Display serif only. Offset 2px right and down, vermilion, under the ink. One word or one line per surface. Never on body, never on controls. |
|---|---|
| Split | Once per surface, in a hero or in the animated layer's glitch burst (engine/fx.js). ±3px, agent and signal plates, multiply on cream / screen on carbon. |
| Never | On UI text, on captions, on more than one element in view, as a hover effect. |
Everything is numbered.
Section indices, surface stamps, figure numbers, the quotation intervention and the object glyphs — the annotation layer that makes a page read like a catalogue.
Rule
| Index | Two digits, a point, one digit: 02.3. Mono micro at the right of every eyebrow; display size only on a section opener. |
|---|---|
| Stamp | MILO / 00 top-right of a product surface (00 Today … 06 Activity). Mono micro, tracked. |
| Quotation | One word set in vermilion serif with curly quotes; used for a UI state or a term being defined, once per surface. |
| Glyph strip | Tertiary ink, one glyph in vermilion per twelve; a divider or a header texture, never behind text. |
Forty icons, one construction.
24px grid, 1.5px stroke, round caps and joins, 2px optical padding, currentColor. The nineteen semantic icons in ink, vermilion and moss; twenty-one interface icons added in the same hand; all tested at 16px.
Semantic set · ink
The same set in Vermilion and Moss
Interface set
At 16px
As a strip
Construction and colour rules
| Grid | 24 × 24 viewBox, geometry snapped to the pixel grid, 2px optical padding, circles on r = 9 / 6 / 3. |
|---|---|
| Stroke | 1.5px, stroke="currentColor", round caps and joins; solid marks use fill="currentColor". |
| Colour | Ink by default. Vermilion only for milo, voice, generation, activity and active-when-Milo. Moss only for offline, fleet, connection. Warning is --state-warning and always carries a label. |
| Sizes | 16 in rows and chips, 24 in navigation and controls, 32 in headers, 48+ only for the mark. |
| Use | Inline the SVG or mask an element (mask: url(assets/icons/name.svg)) and set background to the token. Never recolour by filter. |
| Files | assets/icons/ — 40 SVGs + favicon; assets/icons/README.md lists meaning and colour for each. |
Only Milo does these.
Seven elements that identify a Milo surface at a glance, each a live specimen with its class.
◉ Milo is rendering batch 8 here.
Milo computational interpretation
generated · Codex Image 2.5
Three more
One.
Two.
Three.
Where each lives
| Presence line | Fleet, Project detail, any Offline field the moment Milo acts in it. milo.css .offline-field .milo-presence. |
|---|---|
| Source-kind stamp | Under every image, always. Three states only. |
| Count badge | Every tuck and every "n more" disclosure; the number is computed, never typed. |
| Dropped caption | Plates on editorial pages; never on operational screens. |
| Corner mark | A plate Milo interpreted, top-right, 14px; never on a natural image. |
| Data layer | Field Study plates; the coordinates are real. |
| Ambient still | One per surface at most; nature only, never art (05 §6). |
Three tiles for surfaces that need texture.
Packaging, splash grounds, social backgrounds. As CSS here; as seamless 256px PNGs to download.
Rule
A tile is a ground, not a graphic: ≤ 20% ink on cream, ≤ 15% mineral on carbon, and always under a solid field where type sits. Never two tiles on one surface. Never behind a photograph. The dither fields (29.1) may also tile; they are the preferred ground for anything printed.