Foundations
Visual System
The visual grammar that every product inherits.
Layout
Layout organizes attention into canvases, panes, rows, and controls.
Layout
Role first
Token named
Gate enforced
Spacing and Grid
Spacing is a rhythm scale, never a local measurement.
Spacing and Grid
Role first
Token named
Gate enforced
Typography
Type variants express role and density.
Token role
Typography
Primary text carries the decision. Secondary text explains context. Default text belongs to inherited product surfaces.
Materials and Depth
Depth separates tasks without decoration.
Materials and Depth
Role first
Token named
Gate enforced
Images
Images support recognition and content identity.
S
Socra component asset
Real content, accessible fallback, no decorative filler.
Motion
Motion clarifies state change and spatial continuity.
Motion
Role first
Token named
Gate enforced