Neutral
The base colours are used for non stylised elements within the kit, this can be things such as the background colour or basic card fills.
neutral-0
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-850
neutral-900
Secondary
Actions are applied to any item you can interact with and click on. Its a simple way to unify states across buttons and other CTAs.
secondary-50
secondary-100
secondary-200
secondary-300
secondary-400
secondary-500
secondary-600
secondary-700
secondary-800
Primary
Actions are applied to any item you can interact with and click on. Its a simple way to unify states across buttons and other CTAs.
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
Success
Success as its name indicates demonstrates success or a confirmation of actions. Success can be see in badges, toggles, messages, and illustrations.
success-50
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
Error
Error is used for backgrounds in messages and in states to draw attention to important information or actions that are destructive or block workflow.
error-50
error-100
error-200
error-300
error-400
error-500
error-600
error-700
error-800
error-900