Design Systems Academy

Figma Automatic Dark Mode

You'll be able to choose the cohort at checkout

Module 1 · Overview

• Accessibility
• APCA Text Contrast
• P3 Color Gamut
• Designed for UIs

Module 2 · Scales

• Color ramps
• Choosing a brand scale
• Choosing a gray scale
• Neutral and natural parings

Module 3 · Semantic scales

• Info colors
• Success colors
• Warning colors
• Error colors

Module 4 · Text scales

• Overview
• Choose a vibe
• Subtle differences
• Experimentation

Module 5 · Use cases

• The 12 steps
• Understanding each step
• Understanding specific cases
• Caveats

Module 6 · Apply Dark Mode

• Create Light & Dark mode
• Importing the tokens
• Applying the tokens
• Examples