AirframeComponent gallery
Every part, both themes.
40 components built from theme/airframe-components.css on theme/airframe.css. Each one is rendered from its
airframe/components/<Name>/preview.html; its README next to it says when to use it. Back to the Airframe docs.
Cover1
Foundations9
- AvatarPeople round, agents hexagonal, firms square: initials in mono on a hairline, no fill, no hue; 22, 28 and 44 px; stacked groupsNightDay
- ButtonPrimary, secondary, ghost, danger; 34 and 28 px; icons; disabled; the sentence-case text variant for where people readNightDay
- Icons55 glyphs on a 20 px grid; agent redrawnNightDay
- InlineDataKeyed metadata: a sentence-case key, then a mono value; never a · b · cNightDay
- LabelSmall sentence-case sans that names a card or section, with an optional sub and iconNightDay
- ObjectChipA business object by reference: glyph, key, title, state; trust on hoverNightDay
- ProductMarksOutline tiles, glyph in the product hue; the hue's only other home is a 2px nav markerNightDay
- ReadoutMono digits on unlit cells inside a recessed display windowNightDay
- StatusColor + shape + word; plain, lit, and the dark-cockpit ruleNightDay
Cards3
- CardTonal, no border: top, body, foot; default and litNightDay
- EnvironmentCardAn image a sandbox boots from: name, purpose, digest, use; one failed buildNightDay
- SummaryCardsRunning, waiting on you, spend today, turn to PRNightDay
Controls2
Patterns5
- DialogA <dialog>: title, body, footer in inspect / refuse / accept order; the confirm and danger variants replace window.confirm()NightDay
- DrawerA right sheet and a bottom drawer over a scrim, with airframe.jsNightDay
- EmptyStateClear, no data, after an action, error; a compact variant for panelsNightDay
- PageHeaderTitle in two sizes, a lede, a summary line (status mark, keyed counts, capacity), an actions slot; stacks when narrowNightDay
- ToastBottom centre, overlay tone, one optional action; the bad variant carries the failed mark; role=status; held while a person is mid-decisionNightDay
Alerts1
- MasterCautionFlat lamps with black legends: caution, warning, and the dark no-cautions stateNightDay
Governance3
- ApprovalCardA held action: inspect, deny with a reason, approve, quorum; verdict rowsNightDay
- DecisionDeckOne decision at a time: the soonest to expire on top, the next two peeking, n of N, previous and next, an up-next list; approve, deny with a reason, answer, retry, acknowledge, inlineNightDay
- QuestionAn agent asks a person: the question, its context, option chips or free text, one primary action; the same diamond, the word Needs inputNightDay
Data4
- DiffA unified greyscale diff: stat, hunks, line comments, the one failing hunkNightDay
- FleetTableDense 32px rows: tail number, environment, harness and model, status, CPU, age, costNightDay
- TerminalAlways dark, mono output under a sentence-case bar; quiet ✓ lines, red ✗ lines, prompt and cursor in brandNightDay
- TraceSpansSpan tree, timeline, critical path, detail panelNightDay
Fleet11
- ActivityTimelineWhat an agent has done, in order: wall-clock time, how long ago, the event; stage boundaries in fg, the latest dot litNightDay
- AgentCardThe board card: hex avatar, tail, stage ring, work, now-line, capsule, owner, and the status word or the heartbeatNightDay
- AgentRowThe Runway row: mark, tail, work and the live now-line, owner, harness, rail, stage times, tokens, cost; it opens in place into a consoleNightDay
- FleetBaysA box per sandbox: task, owner, stage track, time left, one actionNightDay
- FleetColumnsOne column per state, attention first; Running spans twoNightDay
- FleetConsoleThe composed Fleet: decision deck on top, the runway (rows) or the board (cards) below, an agent open in placeNightDay
- FleetOwnersPeople down, environments across: who uses the capacity, and whereNightDay
- FleetViewPools of stand tiles; switch to session lanesNightDay
- HeartbeatA recency dot and the time since the last activity; it breathes only for a live agentNightDay
- SessionLanesLast 60 min of sessions: stages, waits, outcomesNightDay
- StageRailPlan, edit, test, PR as a rail, a ring or a capsule; solid only for a reported pct, dotted for an estimate; the head takes the status color when a person is neededNightDay