## 01 Tokens colours · type · spacing · the alphabet of v1

Surface, line, ink
bg
--bg
panel
--panel
panel-hi
--panel-hi
line
--line
ink
--ink
ink-mid
--ink-mid
ink-mute
--ink-mute
ink-fade
--ink-fade
State + accent
ok
--ok · success / online
warn
--warn · degraded / cache-warning
bad
--bad · failed / alert
off
--off · offline (neutral)
accent
--accent · running, links
Type scale
28 / 500 Hero / numeric stat stat tile values
22 / 500 Page title h1 in body
18 / 500 Section header h2 above panels
13 / 400 Body & table cells default for prose
12 / 400 Helper, captions, secondary detail .field-help, meta lines
11 / 600 · 0.08em Section heading · column header all caps tracking

## 02 Status five states · only place colour is used as semantic

online heartbeat received within last 90 seconds .dot.dot-online
online · running a job is in flight on this host — pulse only when active .dot.dot-online.pulse
degraded online, but open alerts > 0 — soft amber, not loud .dot.dot-degraded
offline no heartbeat for > 90 seconds — neutral, not alarming .dot.dot-offline
last job failed distinct from offline — host is up, but its last job did not succeed .dot.dot-failed

## 03 Buttons one primary per page · everything else is the neutral secondary

Primary · the one verb the page is about. Use at most once per page.
Secondary · everything else. Run-now per row, all panel actions.
Ghost · inline / “View →” affordances inside cards and rows.
Danger · destructive verbs only. Always pair with a confirmation modal for irreversible ones.
Disabled · 0.4 opacity, not-allowed cursor, no hover.
Sizes · default 12px. .btn-lg for the page-level primary (slightly bigger affordance).

## 04 Form fields labels above · helper below · 0.005em letter-spacing

Default text
Helper text. Plain prose.
Monospace text
Use .field.mono for URLs, IDs, anything machine-shaped.
With prefix
repo:
Password
Focus state
Border becomes accent on focus.
Invalid
repo_url must look like rest: / s3: / b2: …
Tag chip input
prod × cache ×
Free-form tags. Comma or Enter to commit.

## 05 Tags & chips labels for hosts · status pills · removable in form

prod db homelab storage edge test prod ×
succeeded running failed cancelled expires in 59m

## 06 Tabs primary nav (accent underline) · sub-nav (ink underline)

## 07 Host row the dashboard's load-bearing row · degraded/failed/offline get a left edge

Host
OS · arch
Last backup
Repo size
Snapshots
Alerts
Tags
healthy-host
linux/amd64
succeeded · 5m ago
87 GB
2,103
—
prod
degraded-host
linux/amd64
succeeded · 1h ago
128 GB
1,402
3
prod
failed-host
linux/amd64
failed · 47m ago
97 GB
2,847
1
ci
offline-host
linux/amd64
last seen 2d ago
64 GB
127
1
dev
offline

## 08 Log viewer live or replayed · ts · stream · payload · color reserved for events & stderr

11:43:21.039 EVENT{"message_type":"status","percent_done":0.000,"total_files":21402,"files_done":0}
11:43:21.412 OUT scan finished in 0.371s
11:43:25.812 ERR warn: file changed during read: /var/lib/postgresql/13/main/pg_wal/000000010000007800000042
11:43:31.625 EVENT{"message_type":"status","percent_done":0.380,"files_done":8124,"bytes_done":1503870976}
11:43:32.122···▏

## 09 Progress bar running · complete · failed

running · 38%42 MB/s · ETA 2m 14s
complete · 100%finished in 5m 21s
failed · 0%repo locked

## 10 Stat tile used in summary strips · fleet, host header, job summary

Hosts
12 total
10 online · 1 degraded
Backed up
4.9 TB
23,649 snapshots
Last 24h
147 jobs
144 ok · 2 failed
Open alerts
5
oldest 3h

## 11 Modal used for confirms · destructive actions · short prompts

### Remove host?

Removes prod-cache-01 from the dashboard and revokes its agent token. Backup data on the rest-server is left intact — delete that yourself if you want it gone.

This action is logged in the audit trail.

## 12 Toast success and error variants · auto-dismiss after 4s

Token minted
install command shown below — expires in 1h
×
Couldn’t reach the agent
prod-cache-01 didn’t respond within 5s. Try again or check the WS connection.
×

## 13 Install snippet load-bearing affordance on Add host · Empty state · Settings → Agents

install command · 59m left

    curl -fsSL https://restic.lab.example/install.sh | sudo \
      RM_SERVER=https://restic.lab.example \
      RM_TOKEN=HdqFbQh8U-I1fb52iP1M8qxvoYS5t9VZ-T-yghr_CzA sh

## 14 Empty-state pattern nothing-yet screens · centred prompt + the affordance that fixes it

### Nothing here yet.

Empty states always pair a one-sentence explanation with a single primary affordance. Don’t fill the space with stats or graphics — the void is the message.

end of v1 component reference · 14 sections · ~all the pieces the Phase 1 templates need