Colors
The Aback UI palette
Every colour in the theme, read from the tokens package at build time. Pick a format and click a swatch to copy it. Translucent values are shown over the theme's own background.
Aback Blue
The brand ramp. 500 (#009bf9) is the anchor in both themes; the roles below pick from it.
Surfaces and text (light)
Page, card, and popover backgrounds with the text that sits on them.
Surfaces and text (dark)
Page, card, and popover backgrounds with the text that sits on them.
Actions (light)
The default action is neutral ink. Brand blue is reserved for the brand variant.
Actions (dark)
The default action is neutral ink. Brand blue is reserved for the brand variant.
Brand roles (light)
Where Aback Blue appears: links, focus, icons, tints, and the brand fill.
Brand roles (dark)
Where Aback Blue appears: links, focus, icons, tints, and the brand fill.
Status (light)
Success, warning, danger, and info, each with a soft background and a strong text shade.
Status (dark)
Success, warning, danger, and info, each with a soft background and a strong text shade.
Use the role, not the swatch
In components, reach for the semantic role, such as text-link or bg-brand-wash, rather than a ramp step like text-primary-700. Roles change between light and dark; ramp steps do not. The theming guide explains each role, and design tokens lists type, spacing, and shape.
Want your own brand colour?
The theme generator rebuilds the ramp and brand roles from any colour and checks their contrast. For a scale on its own, use the Tailwind colour scale generator.