Handbook
Design System GuideCheat Sheet
Design System GuideCheat Sheet
10. Accessibility Foundations
13. Color System13.1 Functional colors13.2 Dark mode13.3 Contrast
15. Typography16. Motion and Interaction
13. Color System

13.1 Functional colors

Color System · Section 13.1

Typical semantic roles:

success
warning
danger
info
disabled
focus
selected

Avoid communicating state by color alone.

Pair color with:

  • icon
  • text
  • shape
  • status label

13. Color System

Define functional colors, dark mode, and accessible contrast.

13.2 Dark mode

Color System · Section 13.2