Milo BRAND + INTERFACE SYSTEM V1.0
09Interface system

Components

37 COMPONENTSLIGHT + DARKSTATES: DEFAULT · HOVER · FOCUS · ACTIVE · DISABLED · ERRORSOURCE: site/css/milo.css

Each component is drawn from rules, fields and type before it is drawn from boxes. Every state carries a glyph and a label; colour is never the only signal. One primary action per surface.

Index09.00
    AppShell09.01
    Light · nav + main

    Primary surface · level 1

    What matters now?

    .app-shell → grid: var(--sidebar-nav) 1fr. Add .has-inspector for a third column; .rail collapses to 56px.

    Dark · with inspector

    Primary surface

    What matters now?

    PrimaryNavigation09.03
    Light · default, current, hover, disabled
    Today Milo Goals3 Projects7 Tasks12 Work Activityoff
    Dark
    Today Milo Goals3 Projects7 Tasks12
    SecondaryNavigation09.04
    Light · secondary group never competes with primary
    System Memory Files Automations Costs Fleet Settings
    Dark
    System Memory Costs Fleet Settings
    MiloComposer09.05
    Light · conversation + composer
    YOU

    Pause the render and tell me what's left.

    ◉

    On it. Paused at frame 3 of 12. Nine frames remain, about 40 minutes on the M4.

    render-queue.json
    ~/Documents/euangelion/out/
    Open ↗
    ▣ euangelion⌁ local
    Dark · focused
    ◉

    Three files changed. Review them?

    ◇ Daily Bread⌁ local
    VoicePill09.06
    Light · five states
    LISTENINGPause the Euangelion render
    UNDERSTANDINGPause the Euangelion render
    WORKINGPausing render · 3 of 12 frames kept
    DONEPaused. Resume from Today.
    ERRORDidn't catch that.
    Dark
    LISTENINGOpen the terminal beside this
    WORKINGOpening terminal · tiling right
    DONEDone.

    Level 3, top-centre, transient. See 11 Voice.

    QuickEntry09.07
    Light
    ↵ makes a task · esc closes⌘K
    Dark · typed
    ↵ makes a task · esc closes⌘K
    CommandPalette09.09
    Light
    • Run task: Reprint series art↵
    • Pause all runs⌘⇧P
    • Project · Daily Bread
    Dark
    • Fleet · wkgd-macbook↵
    • Fleet · imac-pro
    TaskRow09.10
    Light · default, active, selected, done
    Dark · error, paused
    TaskSummary → RunDetail09.11 · 09.13
    Light · summarised → revealed (open it)
    Render Day 1 voice trackrun 3 · step 2 of 5m4-pro
    Running
    1. Load reference clip0.8s
    2. Synthesise 2,140 words1m 12s
    3. Normalise loudness—
    4. Write artifact—
    Dark · open
    Sync the vault indexrun 1 · failed at step 2
    Failed
    1. Read manifest0.2s
    2. Push part 145 — broken pipe21m
    RunIndicator09.12
    Light · idle, running, done, error

    Always paired with a .state label in the row; role=img with aria-label when standalone.

    Dark
    Progress09.14
    Light · determinate, indeterminate
    Rendering42%
    Connecting
    Dark
    Upscaling88%
    Status09.15
    Light · every state = glyph + label + colour
    Idle Queued Running Paused Needs you Done Attention Failed Local Connected Unreachable
    Default pill◉ Milo⌁ Offlinegpt-5.6-sollocal
    Dark
    Running Needs you Done Attention Failed Local Unreachable
    ◉ Milo⌁ Offlineclaude-opus-5
    ProjectRow09.16
    Light
    • Euangelion◎ A more human future6 tasks
      1 running
    • FAM◎ Family record2 tasks
      Idle
    Dark
    ProjectHeader09.17
    Light
    ◇ PROJECT◎ A more human future

    Euangelion

    6 tasks1 running$0.00 today
    Dark
    ◇ PROJECT

    Daily Bread

    4 taskspaused
    GoalHeader09.18
    Light · display-l serif, editorial
    ◎ GOAL

    A more human future.

    3 projectsQ4 2026
    Dark
    ◎ GOAL

    Make more than I manage.

    2 projects
    ActivityRow09.19
    Light · by Milo, by Offline, by you
    • Paused render at frame 3
      euangelion
    • imac-pro reconnected
      fleet
    • You approved the spend
      $1.20
    Dark
    • Three files changed
      fam
    • wkgd-macbook went to sleep
      fleet
    ArtifactHeader09.20
    Light
    ▣ ARTIFACTComputationally transformed

    hero-2400.png

    ~/Documents/euangelion/out/hero-2400.png · 2400×1600 · 3.1 MB
    Dark
    ▣ ARTIFACTHuman-created source

    by-the-heel-day1.wav

    ~/Documents/euangelion/audio/ · 25:14 · 48 kHz
    FileRow09.21
    Light
    Dark
    PermissionRequest09.22
    Light · level 3
    Dark · spend authorisation
    Confirmation09.23
    Light · level 4, destructive

    Delete the project Daily Bread?

    4 tasks and 12 artifacts move to Trash. You can restore them for 30 days.

    Dark · security

    Allow SSH to imac-pro from this session?

    Key: id_ed25519 · freelance4@100.120.167.63

    Notification09.24
    Light · unread, read
    Finished in 2m 14s.
    Day 1 voice track written to audio/.
    11:02
    I found two conflicts. Review them?
    yesterday
    Dark
    This needs your approval.
    Spend $1.20 on a cloud model.
    now
    Toast09.25
    Light · by Milo, error
    On it.
    That didn't work. Nothing changed.
    Dark
    Done.
    Popover09.26
    Light

    Executor

    m4-pro

    Load
    3.2 / 12 cores
    Memory
    18 / 48 GB
    Cost
    $0.00
    Dark

    Model

    claude-opus-5

    Lane
    cloud
    Quota
    62% used
    ContextMenu09.27
    Light · selected, danger
    Dark
    Tabs09.28
    Light · live (arrow keys)
    Twelve open tasks.
    Dark
    Source, rights, transformation.
    Metric09.29
    Light
    Tasks done40this week12 vs last
    Spend$4.80Sep$2.10
    Local share91%⌁ 3 machines
    Dark
    Runs12831
    Failed21.6%
    QuotaIndicator09.30
    Light · ok, warning (△ + label)
    Codex account 238 / 100 images
    Claude Opus82% of window
    imac-pro disk1.2 / 4 TB
    Dark
    Jev free tierexhausted
    Local laneunlimited
    CostIndicator09.31
    Light · cloud, local
    $1.20$0.04$0.00
    Dark
    $12.40/ month$0.00
    ResourceIndicator09.32
    Light · Moss = infrastructure
    CPU27%
    Memory18 GB
    GPU91%
    Dark
    Disk1.2 TB
    Thermal64 °C
    MachineStatus09.33
    Light · up, with Milo, down
    imac-pro
    2017 · 18-core Xeon · 128 GB
    Connected100.120.167.63
    m4-pro
    M4 Pro · 48 GB · this machine
    Milo runninglocal
    wkgd-macbook
    A1989 · Omarchy
    Unreachableasleep
    Dark
    m4-pro
    M4 Pro · 48 GB
    Milo runninglocal
    imac-pro
    Xeon · 128 GB
    Connectedtailscale
    ModelStatus09.34
    Light
    claude-opus-5cloud$15 / MIdle
    gpt-5.6-solsubscription$0.00Running
    qwen-9b-local⌁ imac-pro$0.00Stopped
    Dark
    claude-opus-5cloud$15 / MRunning
    voxcpm⌁ kaggle$0.00Quota
    ConnectionStatus09.35
    Light · on, off
    Tailscale
    8 devices · tailnet
    Connected
    Cloudflare
    wokegod.cc · Pages
    Connected
    GitHub (wokegodX)
    needs login
    Not signed in
    Dark
    Codex account 2
    ~/.codex-2
    Signed in
    Jev
    free tier
    Quota exhausted
    ArtworkCaption09.36
    Light · the artist is visible
    Under the Wave off Kanagawa, colour woodblock print
    Katsushika Hokusai
    Under the Wave off Kanagawa
    1830/33 · colour woodblock print
    Art Institute of ChicagoPublic domain (CC0)
    View originalMilo interpretationAbout artist
    Dark · interpretation marked
    Milo Nous interpretation of Under the Wave off Kanagawa
    Katsushika Hokusai
    Under the Wave off Kanagawa
    1830/33 · Milo / Nous
    Art Institute of ChicagoPublic domain (CC0)
    View original
    ImageMetadata09.37
    Light · provenance record
    Source
    Human-created
    Creator
    Carol M. Highsmith
    Agency
    Library of Congress, P&P
    Object
    LC-DIG-highsm-25622
    Rights
    No known restrictions
    Accessed
    2026-09-22
    Derivative
    Milo / National Park · milo-image-engine 1.0.0
    Dark · generated record
    Source
    Generated
    Generator
    Codex Image 2.5 (codex --2)
    Date
    2026-09-22
    Inputs
    text prompt · palette tokens
    Status
    untransformed
    Buttons + fields (foundation, used by every component)09.38
    Light · default, primary, agent, quiet, danger, disabled
    Enter a number
    Dark