Skip to content
@socra/theme standard

Colors

Colors in the Socra UI system.

Renderer-agnostic contract

Semantic roles

These @socra/theme roles are the normative contract. Each platform maps them through its adapter without changing their meaning.

Color, Surface, And Content

Renderer-agnostic brand, feedback, border, surface, content, and contrast roles. Color carries meaning, hierarchy, and state; it is never local decoration.

35 references
Brand primary
color
designTokens.color[mode].color.brand.primaryLive value: #29C4E8

The primary brand action and emphasis for the active color mode.

Brand hover
color
designTokens.color[mode].color.brand.hoverLive value: #00AAD1

The hover emphasis for a primary brand interaction.

Brand active
color
designTokens.color[mode].color.brand.activeLive value: #009DC3

The pressed or active emphasis for a primary brand interaction.

On brand
color
designTokens.color[mode].color.brand.onPrimaryLive value: #000000

Content that appears on the primary brand surface.

Brand accent
color
designTokens.color[mode].color.brand.accentLive value: #8E8CFF

Supporting brand emphasis that does not compete with the primary action.

info foreground
color
designTokens.color[mode].color.feedback.info.foregroundLive value: #8CC8FF

Readable content for info feedback.

info background
color
designTokens.color[mode].color.feedback.info.backgroundLive value: #102B43

Containing surface for info feedback.

info border
color
designTokens.color[mode].color.feedback.info.borderLive value: #3976A8

Boundary for info feedback.

success foreground
color
designTokens.color[mode].color.feedback.success.foregroundLive value: #8AD6A0

Readable content for success feedback.

success background
color
designTokens.color[mode].color.feedback.success.backgroundLive value: #13321D

Containing surface for success feedback.

success border
color
designTokens.color[mode].color.feedback.success.borderLive value: #3D8151

Boundary for success feedback.

warning foreground
color
designTokens.color[mode].color.feedback.warning.foregroundLive value: #F5C66A

Readable content for warning feedback.

warning background
color
designTokens.color[mode].color.feedback.warning.backgroundLive value: #382A0E

Containing surface for warning feedback.

warning border
color
designTokens.color[mode].color.feedback.warning.borderLive value: #8A6828

Boundary for warning feedback.

danger foreground
color
designTokens.color[mode].color.feedback.danger.foregroundLive value: #FFAAA3

Readable content for danger feedback.

danger background
color
designTokens.color[mode].color.feedback.danger.backgroundLive value: #3D1714

Containing surface for danger feedback.

danger border
color
designTokens.color[mode].color.feedback.danger.borderLive value: #A64B43

Boundary for danger feedback.

subtle border
color
designTokens.color[mode].color.border.subtleLive value: #2A2F36

subtle structural separation by semantic strength.

standard border
color
designTokens.color[mode].color.border.standardLive value: #4B535D

standard structural separation by semantic strength.

strong border
color
designTokens.color[mode].color.border.strongLive value: #8A949F

strong structural separation by semantic strength.

focus border
color
designTokens.color[mode].color.border.focusLive value: #29C4E8

focus structural separation by semantic strength.

text contrast
color
designTokens.accessibility.contrast.textLive value: 4.5

Minimum contrast relationship for text.

largeText contrast
color
designTokens.accessibility.contrast.largeTextLive value: 3

Minimum contrast relationship for largeText.

nonText contrast
color
designTokens.accessibility.contrast.nonTextLive value: 3

Minimum contrast relationship for nonText.

canvas surface
surface
designTokens.color[mode].color.surface.canvasLive value: #000000

The deepest application canvas.

base surface
surface
designTokens.color[mode].color.surface.baseLive value: #101214

The ordinary content surface.

inset surface
surface
designTokens.color[mode].color.surface.insetLive value: #0A0C0E

Content or controls visually set into a surface.

interactive surface
surface
designTokens.color[mode].color.surface.interactiveLive value: #2A2F36

A surface that communicates direct interaction.

selected surface
surface
designTokens.color[mode].color.surface.selectedLive value: #103944

A surface carrying current selection.

primary content
text
designTokens.color[mode].color.content.primaryLive value: #F5F7FA

Essential labels, content, and decisions.

secondary content
text
designTokens.color[mode].color.content.secondaryLive value: #C4CCD5

Explanatory copy and supporting metadata.

muted content
text
designTokens.color[mode].color.content.mutedLive value: #99A3AE

Quiet enabled copy with reduced emphasis.

disabled content
text
designTokens.color[mode].color.content.disabledLive value: #737C86

Content for unavailable controls only.

inverse content
text
designTokens.color[mode].color.content.inverseLive value: #17191D

Content on an inverse surface.

link content
text
designTokens.color[mode].color.content.linkLive value: #71DDF3

Navigational content.

Platform implementation

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.

Brand

primary

hover

active

onPrimary

accent

ramp.faint

ramp.soft

ramp.strong

ramp.vivid

Content

primary

secondary

muted

disabled

inverse

link

Surfaces

canvas

base

inset

interactive

selected

Borders

subtle

standard

strong

focus

Feedback

info.foreground

info.background

info.border

success.foreground

success.background

success.border

warning.foreground

warning.background

warning.border

danger.foreground

danger.background

danger.border