Volume II

Components

Every interface element, built from Volume I and specified to the same standard. Each component is documented as: anatomy · variants · states · sizing · spec · motion · do / don't. If a component isn't here, it doesn't exist yet — propose it, don't improvise it.

2.0 · How to read this volume

Reading a spec

Every component below follows the same skeleton so you can scan it the same way each time.

Anatomy	The named parts and where padding lives
Variants	Distinct purposes — not just colours
States	Default · hover · focus · active · disabled · loading · error
Sizing	The allowed sizes and their tokens
Spec	Padding, radius, type, border — all as tokens
Motion	What animates, for how long, on what curve

MUSTUse the component as specified. Restyling a component inline ("just a bigger radius here") forks the system and is treated as a defect.

2.1 · Components

Buttons

Buttons trigger actions. Hierarchy is communicated by variant, never by making everything loud.

2.1.1 Anatomy

123

Container — padding --s3×--s4, radius --r-md.
Leading icon — optional, 16px, inherits text colour.
Label — Plex Sans 600, sentence case, one or two words.

2.1.2 Variants

Variant	Purpose	Rule
Primary	The one main action	Max one per view / section
Secondary	Alternative actions	Any number
Ghost	Low-emphasis / toolbar	In dense UI
Destructive	Irreversible actions	Always confirm

MUSTShow one primary button per view. If everything is primary, nothing is.

NEVERUse a solid green primary button for a destructive action. Destructive is the bordered danger variant; green means "good / go."

2.1.3 States & sizes

sizes

with icon

icon-only

group

disabled

MUSTIcon-only buttons carry an aria-label. A glyph with no accessible name is invisible to assistive tech.

2.1.4 Spec & motion

padding	11px 18px (base) · 7px 13px (sm) · 13px 22px (lg)
radius	--r-md (9)
type	Plex Sans 600, 13.5px
icon	16px, gap --s2
motion	bg + translateY(1px) on press · d-quick · standard

2.2 · Components

Fields & controls

Inputs collect data. Every field has a visible label, a focus state with a green ring, and clear error messaging.

2.2.1 Text input — states

default

Hostname

focus

Hostname

error

HostnameNot a valid hostname.

disabled

Hostname

2.2.2 Select, checkbox, radio, toggle

Failure domain

Checkbox

Object lock Versioning

Radio

Raft DCS etcd DCS

Toggle

MUSTEvery field has a visible label. Placeholder text is a hint, never a substitute for a label — it vanishes on input.

SHOULDUse a toggle for an instant on/off state, a checkbox for a selection confirmed on submit. They are not interchangeable.

2.2.3 Spec

input padding	10px 13px
radius	--r-md (9)
focus ring	border --p500 + 3px --p-tint glow
error	border --danger + help text #FCA5B4
label–field gap	--s1 (7px)

2.3 · Components

Status & badges

Aros is a status product. These are its most important components — and the most disciplined. State is always colour + shape + label, never colour alone.

2.3.1 The live dot

Healthy Degraded Offline Unknown

Only the healthy dot pulses — the signature heartbeat, meaning "live and observed right now." Degraded, offline, and unknown are static.

2.3.2 Pills, badges, tags

status pillsOperationalDegradedOfflinePending

badgesEC:4v1.0dev

tagspve1aros-pg-dev-1

2.3.3 State → colour → glyph

State	Colour	Dot	Words we use
Healthy	--p500	pulsing	Operational · Healthy · Live
Degraded	--warn	static	Degraded · Read-only · At risk
Offline	--danger	static	Offline · Down · Failed
Unknown	--slate	static	Pending · Unknown · Stale

NEVERCommunicate status with colour alone. A red dot with no label is useless to a colour-blind operator and ambiguous to everyone at a glance.

2.4 · Components

Cards

Cards group related information on a raised surface. They are the primary unit of the dashboard.

pve1

187 GB RAM · 28 TB HDD-R5
Storage workhorse

pve2

251 GB RAM · local-lvm
Compute node

pve3

15 GB RAM · quorum-class
RAM upgrade queued

surface	--surface on --bg
padding	--s5 (20)
radius	--r-lg (14)
border	1px --hair
hover	border --hair-2 + translateY(2px) · d-quick

SHOULDOnly make a card interactive (hover lift) if the whole card is a single link/target. A card full of separate buttons must not also lift.

2.5 · Components

Tables

Tables are how Aros shows the estate. Dense, scannable, monospaced where it counts.

Resource	Host	Type	Status	Uptime
aros-pg-dev-1	pve1	VM 231	Live	42d 6h
aros-pg-dev-2	pve2	VM 232	Live	42d 6h
aros-minio-4	pve1	VM 274	SPOF	18d 2h

header	Plex Mono 10px, +0.12em, UPPER, --slate
cell padding	13px 14px (compact: 9px 12px)
row divider	1px #161d29
row hover	bg rgba(255,255,255,.02) · d-fast

MUSTRight-align and use tabular figures for numeric columns (uptime, counts, sizes). Left-aligned proportional numbers can't be compared down a column.

SHOULDLead each row with a 16px domain icon for its resource type. The icon does the scanning the eye wants to do.

2.6 · Components

Navigation

Wayfinding components. The persistent rail (left) is the spine; tabs, breadcrumbs and pagers handle local movement.

2.6.1 Tabs

Overview pane — the default landing tab.

2.6.2 Breadcrumbs & pagination

breadcrumb

pager

MUSTMark the active tab / nav item with the green underline (tabs) or solid icon + tint (rail). Exactly one active item per nav group.

2.7 · Components

Feedback

Telling the operator what happened. Severity maps to the semantic palette, every time.

Migration 0012 applied. notification.alert and remediation_candidate tables created on dev.

Discovery cycle running. 2 entities touched · next sweep in 5 min.

MinIO SPOF. aros-minio-1 and aros-minio-4 are both on pve1.

Quorum lost. pve3 unreachable — cluster is read-only.

2.7.1 Toast

Saved to Vault

alert	Persistent, inline. Tinted bg + 1px border in the semantic colour.
toast	Transient confirmation, auto-dismiss ~1.3s, bottom-centre, z-toast.
banner	Page-level, system-wide notices (full-width alert at top).

SHOULDUse a toast for "it worked," an alert for "here's a condition you need to know about," and a banner for "the whole system is affected."

2.8 · Components

Overlays

Layers above the page: modals for decisions, popovers for menus, tooltips for labels.

Modal

Destroy VM 109?

monitoring.ryanit.com will be repointed first. This action is permanent.

Popover menu

Rename

Rescan

Delete

Tooltip

aros-pg-dev-3 · leader

MUSTA modal traps focus, closes on Esc and on scrim click, and returns focus to its trigger. The scrim uses z-modal with a darkened backdrop.

SHOULDReserve modals for decisions that must interrupt. Don't put routine forms behind a modal that a side panel would serve better.

2.9 · Components

Code & terminal

Aros shows commands and output verbatim. Monospace, syntax-tinted, copyable.

Terminal

hlvm@iaccn01:~$ vault kv get secret/aros/grafana/postgres
==== Data ====
db_name      aros_grafana
username     grafana
password     <hidden>

Config block

patroni:
  dcs: raft     # DCS-agnostic toggle
  nodes: 3      # one per physical host

MUSTCode and command output are always Plex Mono on the darkest surface (#06080C). Never paraphrase a command into prose.

2.10 · Components

Empty · loading · error

The states most products forget. Aros treats them as first-class, because an operator sees them at the worst moments.

No resources yet

Discovery hasn't found anything on this host.

Couldn't reach pve3

Connection timed out after 30s.

MUSTEvery empty and error state names what happened and offers one next action. A blank panel or a bare spinner with no context is a defect.

NEVERShow a skeleton forever. If load fails, the skeleton must resolve into the error state — not hang.

2.11 · Components

Avatars & progress

2.11.1 Progress & meters

EC overhead · 33%

pve1 storage · 66%

pve3 memory · 94%

SHOULDMeters change colour by threshold — green under load, amber when tight, red when critical — so the bar's colour carries the warning, not just its length.

End of Volume II

Next: Patterns

Components in isolation are vocabulary. Volume III — Patterns → is grammar: how they compose into screens.