🔳 Dark mode > Establish design principles

Purpose

Establish design principles that can be used in both light and dark mode. Although the current effort is specific to dark mode, there are existing principles that can be leveraged. Having principles that work for any mode helps us with future design work on other modes too.

The principles will enable more consistent and meaningful design decisions, regardless of the UI being designed.

Principles do exist today in Pajamas/Foundations/Color/Concepts.

Deliverable

• Update content in Pajamas/Foundations/Color/Concepts based on decisions here.
• Document our dark mode design principles in our architecture design doc (internal). Can be a summary of what's in design.gitlab.com + a link to the full source.

---

Current concepts (principles)

• Surfaces are top lit by a single, invisible, white-light source.
• Surfaces reflect light and don't emit it.
• Forward elements are lighter and receding ones are darker.
• In a light UI, surfaces are made of light materials and text uses darker colors.
• In a dark UI, surfaces are made of dark materials and text uses lighter colors.
• UI elements, like buttons and alerts, rely on chromatic hues and neutrals for meaning and hierarchy, and adapt contrast based on the surface.