One block. One meaning.
Milo's colour is semantic, so a block of it is a statement: this is Milo's; this is Offline's; this is the one number that matters. A block holds exactly one thing, covers no more than a twelfth of the surface, and appears once. It is never a background for reading and never a card.
Four blocks, each with one job.
Vermilion is a Milo intervention, Moss is infrastructure, Carbon holds a metric on cream, Cream holds a caption on an image. Text on a block is carbon, or mineral on carbon — measured, not guessed.
A caption strip, a stat, an index field, the word that matters. Carbon text; cream only at display size.
A machine strip, a local badge, a status ledger row. Carbon text. Never on the same surface as a vermilion block.
One number, one line. On dark the plate uses cream instead — carbon on carbon is not a block.
Inside a dark plate, or the corner of any image. It is how type reaches an image (24.7).
+Limits and the never-list
| One per surface | A screen or a page carries at most one block. A second block is a second meaning; the surface has one. |
|---|---|
| One twelfth | At most one grid column by one section, or a caption-sized field. A block wider than that is a ground, and grounds are cream or carbon. |
| One thing | A strip holds a caption; a field holds a number or an index; the em holds a word. A block that holds a paragraph has become a card. |
| Never | Behind body copy · two blocks touching · a block as a card · gradients · a block that carries no meaning · vermilion and moss on one surface. |
| Rounded? | No. Blocks are square-cornered like every field in the system; only the voice pill is a pill. |
Seven placements, on the components they belong to.
Each is shown on its real component in light and in dark. Notice the dark twin sometimes changes colour: carbon on cream becomes cream on carbon, because the block is the contrast, not the hue.
.block-agent.block-strip · the plate is Milo's interpretation, so the strip is Milo's colour
same strip, Nous plate · vermilion is the only chroma on the surface
.block-agent.block-field on the section index · marks the one section Milo is speaking in
unchanged on carbon
.block-signal.block-field · the executor is infrastructure, so the field is Offline's
moss lifts to #8DA64A on carbon; text stays carbon
.block-signal.block-field replaces the ::after text of .cost.is-local when the row must be scanned
unchanged
.block-ink · the one number the ledger exists for
.block-paper on carbon · the block is the contrast, not the hue
NASA · AS08-14-2383 · 24 DEC 1968.block-paper.block-field, bottom-right, inside the caption safe area (24.10)
NASA · AS08-14-2383 · 24 DEC 1968a Nous plate on cream still takes the cream field — the field belongs to the image, not the surface
A personal operating system for intent.
the vermilion em in a serif statement is a block of one word; it counts as the surface's block
A personal operating system for intent.
#FF5A32 on carbon
+Which component, which class, which theme rule
| # | component | class | dark rule |
|---|---|---|---|
| 01 | .plate / .figure caption | .block-agent.block-strip | same |
| 02 | .eyebrow .index | .block-agent.block-field | same |
| 03 | .machine | .block-signal.block-field | moss lifts via token |
| 04 | .cost | .block-signal.block-field | same |
| 05 | .metric .value | .block-ink → .block-paper | inverts |
| 06 | image corner | .block-paper.block-field | always cream |
| 07 | display em | colour only | vermilion lifts via token |
Three surfaces. One block each.
A manifesto with a vermilion strip, a Fleet screen with a moss strip, a Nous plate with a cream field. Cover the block with a thumb and each surface is still complete; the block is the one place the colour speaks.
A personal operating system for intent.
Nature creates wonder.+Why each block is where it is
| Manifesto | The plate is Milo's interpretation; the strip says so in Milo's colour and carries the credit. The statement above it stays carbon on cream. |
|---|---|
| Fleet | The strip sits under the machine that is executing and says what Offline is doing. It is the only moss field; the machine glyphs are moss ink, not blocks. |
| Nous plate | On carbon, cream is the block. It holds the statement and its one vermilion word; the plate around it is untouched. |
Six ways a block stops meaning anything.
Each is rendered so it can be recognised on sight.
The rule, as data.
tokens/color.json → blocking is the source; the classes in milo.css implement it.
+tokens/color.json → blocking
| max_per_surface | 1 |
|---|---|
| max_area | 1/12 of the surface (one grid column × one section, or a caption-sized field) |
| allowed.vermilion | a Milo intervention: a caption strip, a stat, an index number field, the word that matters |
| allowed.moss | an Offline/infrastructure field: a machine strip, a local badge, a status ledger row |
| allowed.carbon | a metric or a quotation on cream; a plate on dark uses cream instead |
| allowed.cream | a caption or metadata field inside a dark plate or on top of an image |
| text_on_block | vermilion → carbon 5.3:1 (cream at display size only) · moss → carbon 6.1:1 · carbon → mineral · cream → carbon |
| never | blocks behind body copy · two blocks touching · a block as a card · gradients · a block that carries no meaning · vermilion and moss blocks on the same surface |
| classes | .block · .block-agent · .block-signal · .block-ink · .block-paper · .block-strip · .block-field |