Buttons
Use a filled button for the primary action and preserve a 44 px target with visible focus.
Gallery styling · SOFO target · Playback controls
Type & UI
Component library
Try the controls, inspect their states, and open examples in context. Each component records its source.
Segmented choice
Gallery proposal · Projection picker
Dropdown
Gallery proposal · Token family filter
Slider and readout
Gallery proposal · Plane interval
Checkbox
Gallery styling · Still frames setting
Text field
Use a short name that fits in a list.
Gallery proposal
Color swatches
Signal #1D4C8C
Paper #F1EDE1
Gallery proposal · Token register
Clock status
LIVE
Feed unavailable
Last successful sample: 14:30 UTC.
Last successful sample: 14:30 UTC.
SOFO reference · Clock states in context
Operational inspector
North approach station
Synthetic sample · 14:30 UTC
SOFO reference · Inspector in context
Facet callout
Connect a panel to the selected facet with an elbow leader. Fit the panel in available space and contain overflow.
Gallery proposal · Inspect the hero facets
Timeline anticipation
Keep one edge fixed while the other moves inward, holds, and settles. Step through the same states in reduced motion.
SOFO reference