Source: https://monarchui.dev/colours/

Foundations

# Colours

Live values for the current theme, contrast and product accent. Change them in the appearance settings and every swatch and ratio updates. Ratios are the WCAG contrast of the sample text against the swatch.

## Brand

The only hard-coded colours in Monarch. Every other colour derives from them.

brand.

red

#dc2e3e

· white text

4.66

:1

brand.

blue

#0096d4

· white text

3.33

:1

brand.

green

#28af4c

· white text

2.87

:1

brand.

yellow

#f4b400

· white text

1.85

:1

brand.

violet

#6366f1

· white text

4.47

:1

## Surfaces

--mn-color-bg-canvas

--mn-color-bg-surface

--mn-color-bg-raised

--mn-color-bg-subtle

--mn-color-bg-muted

--mn-color-bg-emphasis

--mn-color-bg-inverse

## Text on canvas

--mn-color-text-default

--mn-color-text-muted

--mn-color-text-subtle

--mn-color-text-disabled

--mn-color-text-link

## Borders

--mn-color-border-subtle

--mn-color-border-default

--mn-color-border-strong

--mn-color-border-input

## Accent

accent The product brand. Never a status.

accent-solid

accent-solid-hover

accent-solid-active

accent-subtle

accent-subtle-hover

accent-strong on canvas

accent-strong

accent-border

## Danger

danger Rook Red: errors and destructive actions.

danger-solid

danger-solid-hover

danger-solid-active

danger-subtle

danger-subtle-hover

danger-strong on canvas

danger-strong

danger-border

## Success

success Rook Green: completed and healthy.

success-solid

success-solid-hover

success-solid-active

success-subtle

success-subtle-hover

success-strong on canvas

success-strong

success-border

## Warning

warning Rook Yellow: needs attention.

warning-solid

warning-solid-hover

warning-solid-active

warning-subtle

warning-subtle-hover

warning-strong on canvas

warning-strong

warning-border

## Info

info Rook Blue: neutral information.

info-solid

info-solid-hover

info-solid-active

info-subtle

info-subtle-hover

info-strong on canvas

info-strong

info-border