Two owners. A quiet ground.
Vermilion is Milo. Moss is Offline. Carbon, cream, graphite, stone and fog build the room. Orange and green are semantic and are never spent on decoration.
Vermilion is Milo the agent; Moss is Offline the ecosystem. Both are semantic, never decoration.
Milo the agent
- present
- speaking
- deciding
- acting
- intervening
Dominant brand colour. Dark mode lifts it to #FF5A32 for contrast on carbon; on cream, text uses #C93A18 to reach 4.5:1.
Offline the ecosystem
- local
- available
- connected
- healthy infrastructure
- resource availability
Secondary to Vermilion. Never generic "success". On cream, text uses #5A6D2A.
Every primitive with its hex and role, rendered from tokens/color.json.
Loading tokens/color.json…
Light and dark are separate sets, not an inversion.
Cream ground with carbon ink; carbon ground with mineral ink and Vermilion lifted for contrast.
Both semantic sets, token by token
Measured, not assumed.
Every text pair is computed live; body needs 4.5:1, glyphs and large text 3:1.
Ratios computed live from the token values (WCAG 2.x relative luminance). Body text needs 4.5:1; large text and UI glyphs need 3:1.
All contrast pairs, computed live
| Pair | Sample | Ratio | Use |
|---|
Use the two colours only where they mean Milo or Offline; never as badges, never Moss as success.
Vermilion for Milo's actions and presence. Moss for machines, locality and connection. Done is the ink with a check.
Moss as success, Vermilion as "featured", either as a badge colour. None of these mean Milo or Offline.
Sixty ground. Thirty structure. Ten signal.
The same ratio as the images, applied to colour. About sixty per cent of any surface is ground, about thirty is ink and structure, and at most about ten is Vermilion and Moss — Vermilion leading.
The work stays credited.
Ground carries the page. Ink, rules and the picture in its own colour make the structure. One vermilion strip and one moss dot are the whole signal.
Measuring…
The work stays credited.
Ground carries the page. Ink, rules and the picture in its own colour make the structure. One vermilion strip and one moss dot are the whole signal.
Measuring…
The rule, and how it meets the image mix
| Ground leads | If a surface is not mostly ground it is a poster. Say so, and use campaign expression (33). |
|---|---|
| Signal ≤ 10% | Two blocks, or a block plus a vermilion plate, usually break it. Within the ten, Vermilion leads Moss. |
| Images | The images follow the same ratio: 60% Milo-interpreted, 30% the source's own colour, 10% alive (05 Imagery, 24 Image Usage). A Milo plate counts toward structure on the page it sits on; its own vermilion counts toward the signal. |
| Measured | By area, roughly: sixty-ish, thirty-ish, ten-ish. The two specimens above are measured live on this page from their own boxes. Source: tokens/color.json → proportion. |
| Why | The interior designer's 60-30-10 rule — one colour clearly leads, one supports, one punctuates — is the same thing the ownership rule already said: two owners, and a quiet ground. |