BitWithBite
UI/UX Worksheet
🌑 Dark Mode Design
SCORE___ / 20
NameClassDate
After this worksheet you can
Explain elevation via lightnessExplain desaturationAvoid pure black backgroundsApply contrast in dark mode📚 Quick Recap
🎯 What you'll practice: Elevation, glow, saturation, and contrast for dark UI.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1In dark UI, higher surfaces typically get:
2Dark mode palettes typically use:
3A common dark mode mistake is:
4Pure black (#000) backgrounds can cause:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Subtle light effects communicate elevation where shadows would disappear.
6WCAG contrast ratios apply in dark mode as in light mode.
7Why don't drop shadows work well on dark backgrounds?
8Why do fully saturated bright colors feel uncomfortable on dark backgrounds?
9Why should you re-check contrast ratios after switching from light to dark mode?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a dark mode surface hierarchy for an app with 3 elevation levels (background, card, modal). Give a hex or lightness value for each.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = glow 6 = exactly 7 = Shadows rely on a lighter background to be visible; on an already-dark background they barely register 8 = Highly saturated colors against a dark backdrop create strong visual vibration that's uncomfortable to look at for long 9 = Because text/background color pairs change entirely between themes, so a pair that passed in light mode may fail in dark mode | 10 = Answers vary — e.g. background #121212, card #1e1e1e (slightly lighter), modal #2a2a2a (lightest, highest elevation).