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.2 Dark mode

Color System · Section 13.2

Dark mode is not:

white -> black
black -> white

It requires semantic remapping.

Example:

light:
surface.primary -> gray.0
text.primary    -> gray.950

dark:
surface.primary -> gray.950
text.primary    -> gray.50

13.1 Functional colors

Color System · Section 13.1

13.3 Contrast

Color System · Section 13.3