Skip to main content
CARGO/19 CSS
Live example

Inventory / 03

Components

A compact set of real controls, feedback patterns, navigation primitives, data displays, and overlays. Every specimen below is live framework markup.

Groups
09
JS hooks
07
Style tags
00
01 / ACTIONS

Buttons and icon controls

Action hierarchy stays explicit: red primary, bordered secondary, warm warning, critical danger, and low-emphasis ghost controls.

HTML
<button class="c19-button">Primary action</button>
<button class="c19-button c19-button--secondary">Secondary</button>
<button class="c19-button c19-button--warning">Caution</button>
<button class="c19-button c19-button--danger">Critical</button>
02 / INPUT

Forms and switches

Labels, hints, errors, native semantics, and visible focus states are treated as part of the component rather than optional annotation.

Crew record

Draft
HTML
<label class="c19-field">
  <span class="c19-field__label">Cruise velocity</span>
  <span class="c19-input-group">
    <input class="c19-input c19-mono" inputmode="decimal">
    <span class="c19-input-group__addon">km/s</span>
    <button class="c19-button c19-button--secondary">Apply</button>
  </span>
</label>
03 / FEEDBACK

Status, badges, alerts, and toast

Color never carries the full message: each state includes text and preserves semantic structure.

Nominal Observe Critical Cryogenic Priority 01 Hold Cleared
Uplink restored

Telemetry queue is draining normally.

Manifest archived

Checksum 8D-19 accepted.

Acquiring telemetry
05 / DATA

Statistics, tables, and meters

Monospaced values, tabular numerals, restrained rules, and explicit units keep operational data scannable.

101.3Pressure / kPa
20.9Oxygen / %
−142Cold bay / °C
SectorStatePressureAccess
A-01Nominal101.3 kPaOpen
C-04Cryogenic98.7 kPaRestricted
V-07Vacuum0.0 kPaSealed
Reserve power / 68%
06 / OVERLAYS

Dialog, popover menu, and tooltip

Native dialog and popover behavior provide platform dismissal and focus handling. Tooltip content remains supplemental.

System actions
07 / TERMINAL

Command and code surfaces

Terminals are for telemetry and commands, not general body copy. The command bar preserves a real input and label.

SYS/ pressure --sector A01

101.3 kPa / stable

SYS/ cargo --verify manifest-19

checksum accepted / 00 errors

08 / MOTION

One-shot signal acquisition

Use the title cue for a single arrival moment, not persistent decoration. Its mirrored stagger resolves from the outside inward and becomes static under reduced motion.

SIGNAL
09 / INDEX

Complete class index

The concise Markdown index is retained for source browsing; this themed page is the canonical visual reference.

Open COMPONENTS.md

Confirm cycle

Begin pressure equalization for Airlock A-01?

Crew clearance required

Verify the outer hatch is secured.