Visual semantics
The visual system is restrained, theme-aware, and built around signal clarity. This page mirrors the mockup sheet: dark orientation band, gridded visual-system blocks, type samples, icon tiles, spacing diagrams, motion cues, and explicit design cues.
Exosuit style guide v1 — visual system03 / 12
Signal grammar
Visual System
Color, type, rhythm, iconography, and motion for cockpit clarity.
Signals over decoration
Dense but readable
Native before branded
Color roles
InkPrimary text and high-emphasis content.
SurfacePages, panels, and product modules.
LineDividers, borders, rails, and boundaries.
BluePhase, neutral progress, and orientation.
GreenSteering, success, and completed work.
YellowPerception, inbox, drift, and attention.
RedVerification failure, diagnostics, and blockers.
Type system
DisplayAa
HeadingState before style
BodyReadable paragraphs for explanations and workflow context.
CaptionOperational metadata and labels
MonoRFC-042 · phase.active
Iconography
Spacing + rhythm
Use generous outer sheet margins with compact internal module spacing. Thin dividers organize density without making the page airy.
Motion
Loading
Progress
Attention
Design cues
- 01Show status before explanation.
- 02Use rails for workflow position.
- 03Keep color tied to explicit labels.
- 04Prefer operational copy over personality.