✨
🖌️ Web Design 🦸 Advanced

✨ Design Systems Studio

Ship a brand kit that actually works

👶 13–16 yrs 🗓️ ~12-week path 🚀 Self-paced · start anytime
▶ Start learning

What you’ll do 🌈

A real design-systems studio for ages 13–16. Campers stop decorating one-off pages and start shipping reusable, accessible, motion-aware UI.

Design tokensAccessibilityCSS animationComponents

Adventure log 🧭

0%

0 of 18 activities & labs done

🎮 12 activities · 🧪 6 labs
🎯

🎬 Showcase project

Brand Kit Website

A living design system: tokens, accessible form, motion, and reusable components on one demo site.

Ship a mini design system for a made-up brand — color/spacing tokens, an accessible form, a motion flourish, and a component gallery.

Must include

  • ✅A token list (colors, spacing, radius) used by more than one component
  • ✅An accessible form with labels, focus styles, and an error state
  • ✅At least one CSS animation or transition used on purpose
  • ✅A component gallery page that shows button, card, and form together

Stretch goals

  • 🌟Add a dark-theme token set
  • 🌟Document do/don’t examples for the button
  • 🌟Add reduced-motion notes in a comment
Design tokensAccessibilityCSS animationComponents

🎤 Show it off: Demo like a designer: “Here are the tokens, here is a component using them, here is the form treating a keyboard user well.”

Ready to start?

Take the skill check and enroll in this course.

Enroll now →