Effects
Effects in the Socra UI system.
Semantic roles
These @socra/theme roles are the normative contract. Each platform maps them through its adapter without changing their meaning.
Spacing, Shape, And Access
Semantic spacing, shape, density, target-size, and focus relationships. Each platform translates them through native layout mechanics.
inlineGap
Space between adjacent inline elements.
controlInset
Internal padding for interactive controls.
contentGap
Space between related content.
sectionGap
Space separating content sections.
pageInset
Space between a viewport edge and page content.
control
The shape relationship for interactive controls.
container
The shape relationship for grouped content.
overlay
The shape relationship for transient surfaces.
avatar
The shape relationship for identity marks.
Comfortable density
The default space and control scale relationship.
Compact density
The compact space and control scale relationship.
Minimum target
The minimum interactive target dimension.
Preferred target
The preferred interactive target dimension.
Focus indicator thickness
The minimum visible focus-indicator thickness.
State And Motion
Intent, emphasis, and opacity relationships for acknowledgements, transitions, reveals, and dismissals.
acknowledge motion
Immediate feedback that an action was received.
transition motion
Movement between stable interface states.
reveal motion
The appearance of newly available content.
dismiss motion
The removal of transient content.
disabled state
The shared disabled opacity relationship.
muted state
The shared muted opacity relationship.
hoverWash state
The shared hoverWash opacity relationship.
selectedWash state
The shared selectedWash opacity relationship.
focusWash state
The shared focusWash opacity relationship.
rest emphasis
The shared rest emphasis relationship.
hover emphasis
The shared hover emphasis relationship.
active emphasis
The shared active emphasis relationship.
Elevation And Hierarchy
Semantic elevation roles and renderer-independent layer order. Depth expresses hierarchy, never decoration.
resting elevation
Content at rest on its owning surface.
card elevation
Grouped content raised from a surface.
menu elevation
Transient action or selection content.
dialog elevation
Focused, blocking task content.
showcase elevation
Prominent presentation content.
Hierarchy order
The renderer-independent ordering of content, navigation, overlays, dialogs, and critical feedback.
Web adapter preview
This specimen resolves the same semantic roles through @socra/web-token. It is browser conformance evidence, not part of the cross-platform contract.