Light and dark, increased contrast and every text size are first-class appearances, not afterthoughts.
Settings to respect
| Setting | Effect |
|---|---|
| Light, Dark, System | Every colour role switches; System follows the device |
| Text size | Every text style scales across seven levels |
| Pointer or touch | Larger controls and text on touch screens |
| Increase Contrast | Stronger labels and separators; Glass becomes opaque |
| Reduce Transparency | Opaque surfaces instead of Glass |
| Reduce Motion | Transitions become instant |
Dark appearance
Dark isn’t inverted light. Backgrounds get darker in layers, with the page darkest and elevated surfaces lighter, and colours get slightly brighter so they keep their weight. Design and review every screen in both appearances.
Best practices
- Follow the device’s appearance, contrast and motion settings instead of duplicating them. Offer Light, Dark and System, plus a text size, and nothing more.
- Never hard-code a colour that only works in one appearance (R16).
- Printed output uses the light appearance.