Briefle words · UI design
Surface color
The background color of a layer such as a page, card or tile, which in dark mode is a dark grey rather than pure black.
Say it to an AI
Dark-theme post-run summary card. Use dark grey surface colors, not pure black, and show elevation by making each layer lighter (page, card, stat tiles) instead of outlines. Off-white text, and one desaturated accent, a soft mint, for the distance, progress bar and button.
How an expert would brief the stronger version of “Workout summary (dark)”.
See it
Try it as a puzzle →Post-run summary card in a fitness app's dark theme.
Why: A's surfaces are #121212 (page), #1E1E1E (card) and #2A2A2A (tiles). B uses #000000 for all three.
Related words
Room 4 · Color
Learn “Surface color” in a five-minute lesson