Milo BRAND + INTERFACE SYSTEM V1.0
01Foundations

Opinionated by default. Flexible by exception.

One primary surface at a time. Information appears because it is relevant, not because it exists. Every visible control does something real.

PRINCIPLES 08DEPTH LEVELS 05OWNERS 02
Complexity01.1

Summarized → tucked → revealed → expanded.

Information appears because it is relevant, not because it exists; each level is one gesture away.

Summarized

A task row shows its state, one line, and the time it will take. Nothing else.

Tucked

The run lives behind the row. A glyph says it is there. A count says how much.

Revealed

Open the row and the steps appear in place. The page does not navigate.

Expanded

Open a step and the executor, cost, path and artifact appear. Still in place.

Recut the Daily Bread animation to 24 fps◇ Euangelionest 40mRunning
  • Read the v11 comp0.4s
  • Resample frames 30 → 241m 02s
  • Render preview as animated WebP m4-pro · ffmpegrunning
  • Attach preview to the taskqueued
Containment01.2

No card soup.

Space, typography, alignment and rules do the containing; a card only where containment is real.

Prefer: space, typography, alignment, rules, fields, colour blocking, hierarchy

  • Pitch the second brain to the Fleet channel◇ offlinetodayIdle
  • Verify Milo first boot on wkgd-macbook◇ Miloblocked on unlockAttention
  • Answer the JEV benchmark thread◇ JEV15mDone

Not this

Pitch the second brain…
Verify Milo first boot…
Answer the JEV thread…

Cards only where actual containment is useful: a permission request, a popover, an artifact emerging from conversation.

Colour is semantic01.3

Two owners. Nothing decorative.

Vermilion is Milo acting; Moss is Offline available. Neither is ever an accent.

Milo Vermilion means Milo the agent is present, speaking, deciding, acting or intervening. Signal Moss means Offline: local, available, connected, healthy infrastructure. Orange and green never appear for decoration, and Moss is never a generic "success" colour. Success is the ink plus a check.

Milo lives within Offline. Offline can be healthy while Milo is inactive. When Milo acts inside Offline, Vermilion enters Moss space:

imac-pro Xeon W · 64 GB · sleeping allowedConnected100.77.187.94
m4-pro M4 Pro · 48 GB · this machineMilo runninglocal
Milo is rendering derivatives on m4-pro. Offline reports the machine healthy; Milo reports the work.
Depth is semantic01.4

Five levels. A level is a meaning, not a shadow size.

Depth says what a surface is for — environment, primary, work, transient, critical — never that it is a card.

L0Environment · OS, art, natureno shadow
L1Milo primary surface · the one surfaceno shadow
L2Active work · artifact, run detail1px strong edge
L3Transient controls · Voice, Quick Entry, command palette, permissionsshadow-3
L4Critical interruption · destructive action, security, spend authorisationshadow-4 + scrim

Do not use shadow merely because something is a card. Levels are tokens: --z-3, --shadow-3.

What Milo never does01.5

The things Milo never does, so the defaults can be trusted.

  • Ask a person to choose what Milo can reliably choose.
  • Show a pane, button or field that does nothing real.
  • Use colour as the only indicator of state.
  • Put a second primary action on a surface.
  • Move for decoration. Motion explains where something came from and what changed.
  • Use human art as wallpaper. The artist is always named.
  • Speak like generic AI.
This site practises the ladder01.6

Every page here is built the same way.

01 SummarizedThe h2 and its one-line summary. Enough to decide whether to go on.
02 TuckedA labelled details.tuck with a count of what it holds. Specs, tables, configs, the long lists.
03 RevealedOpen it: the material appears in place, in the same rhythm, with no navigation.
04 ExpandedGalleries, the playground and the screens are the expanded layer — whole surfaces, not sections.
The tuck, as markup
<details class="tuck">
  <summary><span class="glyph">+</span><span class="label">Every field, by kind</span><span class="count"></span></summary>
  <div class="tuck-body">…</div>
</details>

The count badge is filled by site.js from the number of tucked children. Keyboard: Enter or Space on the summary; the glyph rotates to × when open. Reduced motion removes the expand animation.