Milo BRAND + INTERFACE SYSTEM V1.2
34Device Hierarchy

A vocabulary, not a texture.

V1's visual language is strong, which makes it easy to overuse. Three tiers, with budgets: structural devices need no justification, signature devices need a reason, editorial devices need a reason and a budget. The objective is blunt — prevent Milo from becoming a parody of its own language.

EDITORIAL ≤ 1 PER SURFACENONE AT SYSTEM INTENSITYGATE jev device
The three tiers34.1

Structural · signature · editorial.

Tier A is the system itself. Tier B carries meaning where meaning exists. Tier C is punctuation, and punctuation used constantly stops being punctuation.

A · Structural — may appear broadly

  • grid and columns
  • the spacing scale
  • typographic hierarchy
  • hairline rules
  • semantic colour
  • alignment
  • the state vocabulary

B · Signature — contextual, ≤ 3 kinds per surface

  • dither and halftone treatments
  • technical microtype
  • coordinates
  • index numbers
  • image channel separation
  • the executor line

C · Editorial — ≤ 1 per surface, none at SYSTEM

  • crosshairs
  • registration marks
  • large conceptual annotation
  • extreme image treatments
  • Abloh-style intervention
  • oversized technical marks
Worked example34.2

The crosshair, three ways.

One crosshair means this point. Six crosshairs mean nothing at all.

Registered One point, marked. 37.7459° N · 119.5332° W · HALF DOME
Use — one mark, one meaning
Four corners. The card is now a target sheet.
Do not overuse — decoration by repetition
Wallpaper.
Bad — the mark has become a pattern
The catalogue34.3

Use · do not overuse · bad.

Each device earns its place by meaning something in the place it appears.

DeviceUseDo not overuseBad
Registration markonce, near a plate genuinely separated into inkson every image, including untouched oneson a settings page — nothing was registered, so the mark is a lie
Coordinatesa real coordinate for a real placecoordinates as texture40.7128° N under an artwork held in Chicago: false precision is the opposite of provenance
Index numbersa real position in a real sequenceindexing unordered things03 / 27 on a list that reorders itself
Conceptual annotationonce per editorial page, quoting the thing it annotatesseveral on one screenannotation in product UI — the interface quoting itself at a working person
Dither / extreme treatmentwhere the image is the subject, or the transition means somethingevery thumbnail dithereda dithered portrait in a costs table
Microtypemachine facts: model, cost, duration, executor, pathtracked uppercase for ordinary copya paragraph of .micro — 0.12em tracking is for four words, not forty
Operational surfaces34.4

Costs, Fleet, Models, Diagnostics get structural devices only.

Adding decoration there is not more Milo; it is less. The identity survives through hierarchy, spacing, strict semantic colour, microtype, interaction quality and honest numbers.

The three-question test
  1. What does it mean here? If the answer is “it looks like us”, remove it.
  2. Would removing it lose information? If not, it is decoration.
  3. Is it the only one of its tier on this surface? If not, cut to the strongest.

A useful heuristic: on any screen a stranger should be able to point at the one thing that makes it Milo. If they can point at six, the system is shouting.

python3 tools/jev.py ask device --file site/pages/screens/costs.html