BitWithBite
UI/UX Worksheet
🎨 Design Systems
SCORE___ / 20
NameClassDate
After this worksheet you can
Distinguish style typesExplain shared librariesExplain why systems scale teamsPlan a small design system📚 Quick Recap
🎯 What you'll practice: Color, text, and effect styles organized into a shared library.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A saved, reusable named color is a:
2A saved font/size/weight combination is a:
3Saved shadows/blurs are:
4Shared libraries let a team:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Publishing styles/components for a team to reuse is done via a shared .
6Without a design system, every designer may pick slightly different and fonts.
7Why does a design system reduce inconsistency across a large team?
8Give an example of an effect style you might save and reuse.
9What happens to designs using a shared library when the library is updated?
🚀 Section C · Challenge ● CHALLENGE 5
10Plan a mini design system for a to-do app: list 3 color styles, 2 text styles, and 1 effect style you would create.
💭 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-C 3-A 4-B | 5 = library 6 = colors 7 = Because everyone pulls from the same shared source of truth instead of recreating styles independently 8 = e.g. a subtle drop shadow used consistently on all cards 9 = Designs referencing the library update automatically to reflect the new style values | 10 = Answers vary — e.g. Primary/Success/Danger color styles; Heading/Body text styles; a soft card-shadow effect style.