App icon25.1

One mark. Every size.

The Milo mark — a Vermilion disc inside a thin ring — is the icon at every size, on cream or carbon, flat on Linux and on a rounded square on macOS.

On cream

1024 / 512 → shown 128

64

32

16 · favicon.svg

On carbon

128

64

32

16

macOS · rounded square, cream

macOS · dark

Omarchy / Linux · flat carbon tile

assets/icons/milo.svg · 48 in a 128 tile

Spec

Sizes: 1024, 512, 256, 128, 64, 32, 16. Ring width = 11% of diameter; ring gap = 3.5%.
Colour: Disc --milo-agent (#F04A24 light, #FF5A32 on dark grounds); ring is the ground colour cut through the disc, then a 1-unit Vermilion outer line.
Grounds: macOS: cream.500 rounded square (22.37% radius); dark: carbon.900. Linux: flat carbon.1000 tile. Never a gradient, never a shadow inside the mark.
Source: assets/icons/milo.svg, assets/icons/favicon.svg; the CSS above renders the same geometry.
Rule: Below 32px drop the outer line; keep disc + ring. At 16px the ring gap is 1px.

Launch / splash25.2

What shall we make today?

The launch frame is cream, one serif question, the mark, and one small natural photograph; its dark twin swaps the ground and the photograph's treatment to Nous.

MILO09:41 · OFFLINE HEALTHY · 4 OF 5

What shall we make today?

Grand Teton, natural — GRAND TETON · C. M. HIGHSMITH · LOC

Light · 1440×900 shown at 16:10 · natural figure (30%)

MILO21:14 · OFFLINE HEALTHY · 4 OF 5

What shall we make today?

Grand Teton in the Nous recipe — GRAND TETON · MILO / NOUS

Dark · same frame, Nous treatment (60%)

Spec

Frame: 1440×900 (macOS window on first launch), 1170×2532 on phone (question above, figure below).
Type: Question in display-xl Instrument Serif, the verb italic in --milo-agent-ink. Status line in mono-micro, tracked.
Image: One figure, 2/5 of the width, 4:3. Light: natural (--web). Dark: nous. Caption always: place · creator · institution.
Motion: Figure enters with data-fx="reveal" once; the question is static.
Credit: Grand Teton, Carol M. Highsmith, Library of Congress, no known restrictions.

Campaign poster25.3

For the makers.

A 2:3 poster: the National Park treatment of Bierstadt full-bleed, the campaign line low in the serif, and a mono credit strip that names the painter.

Bierstadt, The Rocky Mountains, Lander's Peak, National Park recipe

MILO№ 01 / 2026

For the makers.

ALBERT BIERSTADT · THE ROCKY MOUNTAINS, LANDER'S PEAK · 1863THE MET · CC0

Stylized · engine output (60%)

Bierstadt, The Rocky Mountains, Lander's Peak, original reproduction

For the makers.

ALBERT BIERSTADT · 1863THE MET · CC0

Natural · original on a cream field (30%)

Generated campaign concept: vermilion sun over a dithered landscape band

For the makers.

Generated · Codex Image 2.5CONCEPT ONLY

Concept frame from the Codex delegation — labelled generated, never presented as art

Spec

Format: 2:3 (A-series and 24×36 in). Bleed 3 mm; the credit strip sits inside the safe area.
Image: Full-bleed. Stylized version: national-park recipe. Natural version: the clean reproduction with a cream field for the type. The generated frame is a concept and is labelled .source-kind.generated.
Type: Campaign line in Instrument Serif at 1/12 of the short edge; credit strip in JetBrains Mono, 0.08em tracking, uppercase, one hairline above.
Caption rule: ARTIST · TITLE · DATE on the left; INSTITUTION · RIGHTS on the right. Always. Every time.
Colour: Cream type on stylized image; carbon type on cream field. Vermilion appears only through the image.

Social25.4

Square, story, one alive.

Three frames: a stylized square, a natural square, and a 9:16 story whose image is animated by the engine — the 60 / 30 / 10 mix in one row.

Spec

Sizes: 1080×1080 square; 1080×1920 story; 1200×628 link card uses the email-header composition below.
Mix: Per campaign set of ten: six stylized, three natural, one animated (exported as video from the engine; ≤ 15 s, the burst cadence of fx.js).
Type: Editorial line in the serif at 1/14 of the short edge; credits in mono; the mark top-left with the word MILO tracked.
Field: On a natural image the type sits on a cream field at the bottom (never on the picture); on a stylized image cream type may sit directly on the image.
Credits: Van Gogh, Cypresses, The Met, CC0 · Monet, Stacks of Wheat (End of Summer), AIC, CC0 · Highsmith, Half Dome, Library of Congress.

Email header25.5

Six hundred pixels wide.

A mail header is a bar with the mark, a 220px image band, and one serif line; it survives dark mail clients because it uses the same two token sets.

MiloSEPTEMBER 2026 · № 04

A more human future.

What changed in Milo this month, what Offline can do now, and one artist worth an afternoon. EARTHRISE · NASA · APOLLO 8 · MILO / NATIONAL PARK

MiloSEPTEMBER 2026 · № 04

A more human future.

Dark client: same header, natural image, lifted Vermilion. EARTHRISE · NASA · APOLLO 8

Spec

Width: 600px fixed; band 600×220; bar 52px.
Fonts: Web fonts where the client allows; fallback Times / Helvetica / Menlo (the stacks in tokens/typography.json). The layout must hold in the fallback.
Image: One band, 30:11, credited in mono under the lede. Light: stylized. Dark: natural (dark clients invert nothing; the token set is chosen by prefers-color-scheme where supported).
Colour: Vermilion only in the mark and one italic word. No buttons in Vermilion; the one call to action is .btn-primary (carbon).

Document header25.6

Every document begins the same way.

README, spec or report: an index line, the title in the serif, and a mono metadata block under one hairline — the same devices as the site.

MILO · SPEC · 07 / IMAGERYV1.0 · 2026-09-22

The imagery system.

Who this is for: anyone choosing, treating or captioning an image in Milo. It defines the territory, the five recipes, the mix and the provenance rule.

Status: Locked (D-015)
Owner: Brand system
Source: docs/MILO_IMAGERY_SYSTEM_V1.md
Tokens: tokens/imagery.json · tokens/color.json
Engine: milo-image-engine 1.0.0

Spec

Order: Index line (mono, tracked) → title (display-m serif) → who-this-is-for (body-s, muted, ≤ 56ch) → metadata (dl, mono-micro) under a hairline.
Markdown: In .md the same order: MILO · SPEC · 07 as the first line, # Title, an italic audience line, then a two-column table for the metadata.
Print: Headless Chrome to PDF; margins 20 mm; the index line repeats as a running head.
Never: No logo lockup at the top of a document; the mark belongs to the product, the index line to the document.

Slide title25.7

Sixteen by nine, one idea.

A title slide is a statement in the serif and a plate on the right that breaks the frame edge — the site's own composition at 16:9.

MILO

Technology in service of human purpose.

BRAND SYSTEM · 202601 / 24

Turner, Whalers, Nous recipe — J. M. W. TURNER · WHALERS · CA. 1845THE MET · CC0

Spec

Frame: 1920×1080. Left column 6% inset; the plate bleeds off the right edge (composition plate-right, see 22 Layouts).
Type: Statement at 1/20 of the width; running foot and page number in mono.
Image: Stylized (nous here) or natural; credited under the plate in mono. Content slides use the same grid without the plate.
Dark: Carbon ground, mineral type, lifted Vermilion; the Nous plate is preferred on dark.

Wordmark25.8

Milo, in the serif, with the mark.

The wordmark is the word set in Instrument Serif beside the mark; horizontal or stacked, on cream or carbon, with clear space of one mark diameter and a minimum of 18px.

MiloHorizontal · primary

MiloStacked · square applications

MiloClear space · one mark diameter all round

Milo Milo MiloMinimum 18px · then 24 · 32

MiloOn carbon · Vermilion lifted

OfflineOffline · same construction, Moss disc

Misuse

Milostretched

Milorecoloured

Miloset in the sans

Miloon a busy image, no field

Milomark crowding the word

Miloshadowed

Spec

Construction: Word in Instrument Serif Regular, tracking −0.01em; mark diameter 0.55× the cap height's em; gap 0.35em; baseline of the word passes through the mark's centre.
Clear space: One mark diameter on all sides. Nothing else inside it.
Minimum: 18px word size on screen (mark 10px); 5 mm in print.
Colour: Word in --text-primary; mark in --milo-agent. On carbon the mark lifts to #FF5A32. Offline uses the same construction with a Moss disc.
On images: Only on a field (cream or carbon) or on a stylized image's flat region; never over a busy natural image.
Files: The mark: assets/icons/milo.svg. The word is live type; no outlined wordmark file exists in V1.0 (open item).

Animated mark25.9

The mark resolves. Then it is still.

Two motions and no more: the symbol resolves from an ordered-dither field on launch (1.4 s, once), and the ring breathes while Milo is listening. Everywhere else the mark does not move.

launch · resolve · dither → disc, 1.4 s, print easing, once

listening · breathe · ring 1.0 → 1.06, 1.2 s, while the pill is open

everywhere else · still · no hover, no idle loop, no spin

done · settle · ring completes to solid, 220 ms, then still

Spec

Resolve	Bayer-8 field at 12% → disc; `--dur-dither` 1400 ms, `--ease-print`; runs once per launch; reduced motion draws the disc.
Breathe	Ring scale 1.00 → 1.06, 1.2 s ease-in-out alternate, only while the voice pill is in listening; the same keyframe as `.voice-pill .ring`.
Settle	On done the ring closes to solid over `--dur-base` 220 ms, holds 900 ms, then the pill leaves.
Never	Spin, bounce, hover growth, idle pulse in the rail, orbiting dots.

Share image25.10

Twelve hundred by six-thirty.

The Open Graph card is the manifesto composition at card scale: statement left, plate right bleeding off the edge, mark and version stamp on the hairline.

MILO · BRAND + INTERFACE SYSTEM V1.0

A personal operating system for intent.

Milooffline.wokegod.cc/brand

MILO · NATURE GALLERY

Nature creates wonder.

Milooffline.wokegod.cc/brand

Spec

Size	1200 × 630 (1.91:1); safe area 60 px; text column 7/12, plate 5/12 bleeding right.
Treatment	Light card: National Park or natural; dark card: Nous. One image, one statement, the mark, the URL.
Type	Statement in the display serif ≥ 44 px at output size; one vermilion italic; mono strip at 18 px.
Render	`tools/shot.mjs` at 1200 × 630 of a page carrying only `.og`; the pages ship `og:image` from `assets/og/` (open: generate per page).

Video25.11

Lower third, end card.

On moving picture the brand is a hairline, a mono strip and the mark — never a bug in the corner for the whole film. The end card is the dark launch frame.

Lower third · enters from the hairline, 360 ms, holds 4 s, leaves

Milo

What shall we make today?

OFFLINE.WOKEGOD.CC · A PERSONAL OPERATING SYSTEM FOR INTENT

End card · 4 s, carbon, mark resolves from dither, no music sting

Spec

Lower third	Bottom-left, inset 5% / 8%; cream field, carbon hairline top; mono 20 px strip + serif 44 px title at 1080p; enters by height from the hairline (360 ms, enter easing), holds 4 s, leaves by opacity 140 ms.
Bug	None. The mark appears only in the lower third and the end card.
End card	Carbon, mark resolves from dither (25.9), serif question, mono URL strip; 4 s; silent (sound policy 26).
Captions	Subtitles in Inter 500, cream on carbon 60% field, never over the lower third.
Delivery	Animated WebP for previews (page CSP blocks cross-origin video), MP4 for the record — see `tools/motion.mjs`.

Loading, empty, error25.12

Nothing here. Suspiciously peaceful.

Waiting states are drawn with the same hairlines as content — a skeleton is rows without words, an image loads as a dither field, an empty surface is one calm line and a Quick Entry hint.

Skeleton

□
□
□

.row.sk · hairline bars at 8% ink · no shimmer

Image loading

Bayer-8 field at 10% until decode, then the reveal

Empty

Nothing here.
Suspiciously peaceful.

Quick Entry ⌘K · Voice ⌥Space

one line, one hint, no illustration

Spec

Skeleton	Rows keep their height (64 px) and hairlines; bars are `--hairline` at the line height; no shimmer, no pulse; replaced in place with `expand`.
Image	A Bayer-8 dither field at 10% ink in the image's box until decode; then `data-fx="reveal"` or a 220 ms opacity.
Empty	Serif statement from 21 Language, one mono hint. Never an illustration, never a mascot.
Error	"That didn't work. Here's what stayed unchanged." + `.state-error` row + Retry; the surface itself does not change colour.

Charts + data25.13

Ink, one accent, no rainbow.

Data is drawn in carbon on hairlines. Vermilion marks the one series that matters or the value that needs you; Moss appears only for a local / Offline series. Five series is the limit; past that, group.

Ledger line chart · carbon series, one vermilion accent with its label, hairline grid, mono axis

Bars · Moss only on the local / Offline series; everything else ink at two tints

Spec

Series colours	1: carbon · 2: graphite · 3: stone · 4: fog · 5: hairline-strong dotted. Vermilion: the accent (one series or one value). Moss: local / Offline only. Warning, error: their tokens, with glyph.
Grid + axes	Hairline, no box; mono-micro labels; tabular figures; units in the label, not the axis title.
Marks	1.5 px lines, 3 px points on the accent only; bars 48 px max with 32 px gaps; no rounded bar tops, no gradients, no shadows.
Sparklines	Inline in `.metric`: 1 px carbon, 24 px tall, last value in vermilion.
Never	Rainbow categorical palettes, 3D, donut charts, animated counting, a legend when direct labels fit.

The brand, applied.

One mark. Every size.

What shall we make today?

For the makers.

Square, story, one alive.

Six hundred pixels wide.

Every document begins the same way.

The imagery system.

Sixteen by nine, one idea.

Milo, in the serif, with the mark.

Misuse

The mark resolves. Then it is still.

Twelve hundred by six-thirty.

Lower third, end card.

Nothing here. Suspiciously peaceful.

Ink, one accent, no rainbow.