Color

Craft’s palette is a Tailwind-derived ramp plus a bespoke, slightly desaturated gray scale (defined in HSL). Everything is exposed as CSS custom properties, so prefer the semantic token over a raw hex whenever one exists.

Brand & action

Craft Red--red-600

Red hover--red-700

Secondary--gray-500

Focus/Link--sky-600

The primary submit button is Craft red (--red-600). This is the single loudest color in the CP — reserve it for the one primary action per screen. Secondary/neutral actions use the gray control fill.

Gray ramp--gray-050 … --gray-1000

050surfaces

100body bg

150sidebar

200borders

400 

550subtle fg

700text

900headings

Status & feedback

Meaning	Foreground	Background	Used for
Enabled / success	--fg-success	--bg-success / --bg-enabled	Live entries, saved states, success notices
Pending	—	--bg-pending	Pending / scheduled status dots
Warning	--fg-warning	--bg-warning	Field warnings, cautionary notices
Error / disabled	--fg-error	--bg-error / --bg-disabled	Validation errors, off/expired status
Notice / info	--fg-notice	--bg-notice	Tips, informational callouts