Signal first
Color and geometry expose state quickly; labels preserve meaning when color is unavailable.
Independent interface standard / 19 × 18 unit system
CARGO 19
A small, modern CSS framework for industrial interfaces: sharp hierarchy, rounded semiotic modules, high-visibility status color, segmented data displays, and restrained motion.
CSS prefix.c19-
Dependencies0
Icon glyphs59
01 / Foundation
Design principles
Built, not polished
Panels feel manufactured and maintainable rather than ornamental or cinematic.
Modern underneath
Cascade layers, custom properties, container units, native dialog, reduced motion, and keyboard tabs.
02 / Typography
Three operational voices
Typeface stackOpen source
Display / Rajdhani
Atmospheric processor
Interface / Space Grotesk
Commercial lift operations remain nominal.
Data / IBM Plex Mono
GRID 19×18 · PRESSURE 101.3 KPA · 04:17:22
Hierarchy / display
Flight control
Deck status
Module 07 / nominal
Fluid display sizes establish rank while compact headings preserve density.
Interface / reading
Clear instructions carry operational context without competing with status data.
Use the interface voice for procedures, descriptions, form values, and longer documentation.
Caption text / secondary evidence and constraints.
Telemetry / mono
VECTOR 077 / NOMINAL
UTC 04:17:22.184
O₂ 20.8% · 101.3 KPA
CARGO-ID C19-0042-A
Tabular figures keep identifiers, units, and changing readings aligned.
<h1 class="c19-heading-1">Flight control</h1>
<p class="c19-data">VECTOR 077 / NOMINAL</p>03 / Color semantics
Condition before decoration
Signal red
Viable / alert
var(--c19-signal-red)Life gray
Life-support condition
var(--c19-life-gray)Vacuum black
Vacuum / death / hazard
var(--c19-vacuum-black)Process yellow
Heat / atomic / chemical
var(--c19-process-yellow)Cold blue
Lowered thermal condition
var(--c19-cold-blue)Biological green
Non-human biological
var(--c19-biological-green)04 / Iconography
39 framed glyphs
Original geometric symbols use a 19 × 18 viewBox and a shared rounded frame. The framework applies semantic color at the container level.
This showcase preserves the original 39-sign register. The full manual includes all 59 generated equipment and interface glyphs.
pressurized
Pressurized compartment
gravity
Artificial gravity active
gravity off
Artificial gravity absent
cryogenic
Cryogenic system
airlock
Airlock
bulkhead
Bulkhead door
vacuum
Vacuum or no pressure
suit
Pressure suit locker
optics
Photonic optics
laser
Laser emitter
power
Power system
hazard
General hazard
thermal
Thermal process
bio
Non-human biological material
medical
Medical station
navigation
Navigation
communications
Communications
cargo
Cargo
repair
Repair
computer
Computer terminal
data
Data store
location
Location marker
warning
Warning
check
Confirm
close
Close
arrow left
Previous
arrow right
Next
arrow up
Up
arrow down
Down
menu
Menu
search
Search
settings
Settings
user
User
lock
Locked
unlock
Unlocked
oxygen
Oxygen
shield
Protected
light
Lighting
clock
Time
<div class="c19-symbol c19-symbol--red">
<svg class="c19-icon" aria-hidden="true">
<use href="#c19-airlock"></use>
</svg>
</div>05 / Components
Controls and state
Buttons
Acquiring telemetry
System actions
Badges and status
NeutralAlertProcessCryogenicBiologicalNominalReviewCritical
Alerts
Incoming transmission
Telemetry packet 19-B is ready for review.
Thermal variance
Processor bank exceeds the preferred range by 4.2 kelvin.
Pressure boundary open
Seal the compartment before proceeding.
Tabs
All primary systems report within operational limits.
SYS/A 00 · SYS/B 00 · SYS/C 01
18:42:09 / ROUTINE CHECK COMPLETE
Dialog, toast, accordion
Native dialog
Uses the platform dialog element and a small interaction helper.
Manifest saved
Local copy 04-771-B
What is included?
CSS source, distributable builds, JavaScript helpers, SVG icons, examples, and documentation.
Is JavaScript required?
No. It only enables tabs, dismiss actions, theme switching, and dialog triggers.
06 / Forms
Operational input
07 / Data displays
Dense without becoming noisy
Environmental statusDeck 03
Pressure101.3kPa
Temperature19.6°C
Oxygen20.8%
Scrubber cycle74%
MU/CARGO INTERFACE 2.4
AUTH NODE: LOCAL
LINK: STABLE
LIST BAY/04
04-A MEDICAL SUPPLY
04-B OPTICAL ARRAY
04-C PRESSURE VALVE
_
| Module | Condition | Load | Updated |
|---|---|---|---|
| Atmosphere | Nominal | 42% | 18:42:09 |
| Cryogenic | Stable | 67% | 18:41:37 |
| Thermal exchange | Review | 88% | 18:40:11 |
Segmented load indicator07 / 10
08 / Application pattern
Bridge dashboard
Airlock 02Open
Pressure delta
−101.1
Cryogenic bankStable
Core temperature
−184.7
Bio isolationSealed
Containment
100%
⌘K