Socra UI
Simplicity
Design Principles / Simplicity

Simplicity

The simplest interface that preserves value wins.

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

Remove every element, branch, label, state, and setting that does not improve the user outcome or system trust.

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

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