Aspekt logoAspekt UI

Colors explains the z-axis surface scale and the theme tokens that ship through Aspekt.

Color on the z axis

Aspekt treats neutral surface tokens as planes in depth. The stack runs from deepest to foremost: surface-sunken, surface, surface-raised, and surface-floating. Deeper planes are darker; foremost planes are brighter.

Text follows its own depth ramp from primary to disabled. Role tokens handle inverse surfaces, colored fills, and links. Intent colors still describe meaning: action, selection, success, warning, destructive, and information states.

Depth surfaces

--surface-sunken

Inset wells, code blocks, table headers, and quiet nested regions.

--surface

The default app and site canvas.

--surface-raised

Cards, panels, sheets, and controls above the canvas.

--surface-floating

Popovers, dropdowns, command menus, dialogs, and tooltips.

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.

--control-soft

Soft neutral control fills for buttons, toggles, and inactive rails.

--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.