Colors

Base colors for the design system.

How to use

Click on any element to copy values to your clipboard:

  • Color swatch - Click the large color box to copy the hex value
  • Hex button - Click to copy the hex color code (e.g., #0040c5)
  • text- button - Click to copy the text color class (e.g., text-brand-primary)
  • bg- button - Click to copy the background color class (e.g., bg-brand-primary)

A green checkmark (✓) will appear when copied successfully.

brand

primary
secondary

blue

ultralight
lightest
light
default
medium
darker
darkest
wrc

accent

light
medium
default
dark
darker
deepBlue

neutral

lightest
lighter
light
default
dark
darker

slate

light
default
dark
darkest

system

success
warning
error
info

state

overlay
disabled