Design System GuideDS Guide
Docs
Docs
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