Essence Colors ship as 12-step color scales (inspired by Radix Colors), as CSS custom properties consumed by Themes via accent_color and gray_color.
Import
Color tokens ship with Essence UI styles:
@import "../deps/essence_ui/priv/static/essence-ui.css";
Use with Theme
<.theme accent_color="indigo" gray_color="slate">
<.button>Indigo accent</.button>
</.theme>
CSS variables
Each scale exposes steps 1–12, for example var(--indigo-9) or var(--slate-a6) for alpha steps when available.
Browse the visual scales on the Colors home.