Socra UI
Value
Design Principles / Value

Value

Every interface must earn its place by creating clear user value.

Library Status

Built
Socra UI knowledge

Prefilled as the decision system for every future page.

Live Showcase

StateTheme pathRule
Default

theme.palette.text.primary

Clear, enabled, and ready.

Hover

theme.palette.action.hover

Pointer feedback only.

Selected

theme.palette.action.selected

Persistent chosen state.

Loading

theme.palette.action.disabledBackground

Show honest work underway.

Disabled

theme.palette.action.disabled

Unavailable until the cause is resolved.

Theme References

Primary action
color
theme.palette.primary.mainLive value: #00CDF0

One primary action per screen.

Spacing
spacing
theme.spacing(n)Live value: Resolved by recipe

Remove local measurements.

Component recipes
component
@socra/theme-muiLive value: Resolved by recipe

Use the shared primitive before inventing.

Usage Contract

Start with the user outcome and keep only UI that helps the user understand, decide, act, recover, or trust the product.

A named user outcome.

A decision rule that removes subjective taste.

A standard component or theme reference whenever the rule reaches UI.

A deletion test: if the element does not create value, simplify or remove it.

Do

Use the shared primitive first.

The system improves once and every product inherits the fix.

Name the user job before the component.

A component earns a place only when it helps the user decide, act, recover, or understand.

Promote missing behavior into the library.

Local UI creates drift; library contracts create standardization.

Do not

Do not build a product-local replacement.

A local primitive splits behavior and future migrations.

Do not copy theme values.

Values live in @socra/theme and are consumed by name.

Do not add decoration as a substitute for structure.

If the hierarchy is weak, fix the hierarchy.

Copy-Paste Code

Value recipe
<Stack spacing={2}>
  <LazyLiveExample kind="Value" />
</Stack>