08Iconography
Instrumentation, not illustration.
Geometric, scientific, wayfinding. A glyph set the monospace already carries, plus a custom 24-pixel icon set for the things only Milo has.
GLYPHS 09 primitivesCUSTOM 19 iconsGRID 24px · 1.5px strokeTESTED 16 / 24 / 32
Glyph primitives08.1
○idle
●active
◉Milo
□task
◇project
◎goal
▶run
▣artifact
△warning
+create
↗open
⌁connection · Offline
◌queued
‖paused
✓done
✕failed
From tokens/semantic.json. Every state pairs a glyph with a colour and a label; the glyph carries the meaning when colour cannot.
Custom set08.2
Nineteen icons for what only Milo has.
At size08.3
16px for rows and rails, 24px for navigation and controls, 32px for empty states and headers. Strokes stay 1.5px at 24 and round to 1px at 16.
Construction08.4
- 24 × 24 grid, 2px safe area, 1.5px stroke, round caps and joins.
- Circles, squares, diamonds, triangles and straight lines. No hand-drawn curves.
- Milo is the filled-centre ring ◉ and takes Vermilion when active; Offline is the connection glyph ⌁ and takes Moss when healthy.
- Icons use currentColor; state colour comes from the parent.
- Every icon has a text label beside it or an aria-label. None is decorative.
- Filled illustrative icons, 3D, gradients, drop shadows.
- Emoji as UI.
- A different stroke weight per icon.