Foundations

Color

Color tokens are named for their job, not their hue. Use them and light and dark themes work without extra code. Switch the theme in the header to see every value on this page update.

Surfaces

Backgrounds, from the page up through raised containers.

Canvas The page background.
Card Raised containers: cards, dialogs, menus.
Subtle Grouped areas, such as table headers.
Muted Hovered rows, inactive tracks.

Text

Use the highest contrast that fits the content's importance.

Default Headings and body text.
Muted Captions, helper text, metadata.
On fill Text on strongly colored fills.

Borders

Dividers can be quiet. Control edges need to stay visible.

Subtle Dividers and soft outlines.
Strong Edges that identify a control.
Focus Keyboard focus rings only.

Interactive

Aster's primary action is monochrome, so status colors keep their meaning.

Primary The main action on a screen.
Primary hover Primary action while hovered.
Primary text Label on the primary fill.
Link Inline text links.

Status

Each status pairs a surface with its text color. Always add a word or icon, because color alone isn't enough.

Success surface Background for positive messages.
Success text Text and icons for positive messages.
Warning surface Background for cautions.
Warning text Text and icons for cautions.
Critical surface Background for errors.
Critical text Errors and destructive actions.
Info surface Background for neutral notices.
Info text Text and icons for neutral notices.
Active surface Background for active items.
Active text Text for active items.

Contrast

Calculated live from the current theme. Text needs 4.5:1, and controls and focus rings need 3:1.

PairingRatioResult
Default text on canvas
Muted text on canvas
Muted text on card
Primary label on primary fill
Success text on its surface
Warning text on its surface
Critical text on its surface
Info text on its surface
Active text on its surface
Focus ring on canvas
Control edge on card

Using color

Do

Use semantic tokens such as --as-semantic-color-text-default in all component and page styles.

Don't

Use primitive tokens or hex values. They won't follow the theme.

Esc
↑↓ navigateEnter openEsc close