Socra Developer
DesignComponentsTokensRules
Human Interface Guidelines
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.

Color

Color is a system of meaning, hierarchy, and state.


Color

Role first
Token named
Gate enforced

Materials and Depth

Depth separates tasks without decoration.


Materials and Depth

Role first
Token named
Gate enforced

Iconography

Icons are a controlled language from @socra/icons.


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

Dark Mode

Dark mode is first-class, not a post-pass.


Dark Mode

Role first
Token named
Gate enforced