Aspekt logoAspekt UI

Colors documents text roles, action colors, feedback colors, structure tokens, and radii.

Color roles

Colors document meaning and contrast: text depth, inverse text, action color, status color, structure, and radius tokens. Neutral depth has its own Surfaces page so the z-axis model can be explained with examples.

Intent colors should describe what a state means, not how high it is. Use action, success, warning, destructive, and info tokens for product meaning; use surface levels when the interface needs spatial separation.

Text depth

--text-primary

Default body, labels, headings, and high-emphasis text.

--text-secondary

Supporting copy, helper text, captions, and quieter labels.

--text-tertiary

Low-emphasis metadata, hints, and decorative interface text.

--text-disabled

Unavailable, disabled, or intentionally inactive text.

Text roles

--text-inverse

Text on inverse neutral surfaces.

--text-on-color

Text on filled brand or action colors.

--text-link

Links and navigational text affordances.

Actions

--action

Primary brand and action color.

--action-secondary

Lower-emphasis actions and neutral controls.

--accent

Soft emphasis and selected states.

--destructive

Dangerous or destructive actions.

--destructive-surface

Soft destructive surfaces for status components.

--destructive-border

Lower-chroma destructive borders and outlines.

Feedback

--success

Successful states and positive confirmations.

--success-surface

Soft success surfaces for status components.

--success-border

Lower-chroma success borders and outlines.

--warning

Cautionary states that need attention.

--warning-surface

Soft warning surfaces for status components.

--warning-border

Lower-chroma warning borders and outlines.

--info

Informational states and neutral notices.

--info-surface

Soft info surfaces for status components.

--info-border

Lower-chroma info borders and outlines.

Structure

--border

Borders and separators.

--input

Input borders and field surfaces.

--ring

Focus rings and active outlines.

--overlay-scrim

Modal and drawer scrims that dim inactive content.

Radii

--radius

Base corner radius used to derive the scale.

--radius-sm

Small controls and compact nested elements.

--radius-md

Default control radius.

--radius-lg

Cards, previews, and larger controls.

--radius-xl

Large surfaces and prominent panels.

--radius-2xl

Roomier modal and sheet surfaces.

--radius-3xl

Maximum radius for expressive large containers.

--radius-full

Fully rounded pills, toggles, and circular controls.