Lay out your D6 on your desk or screen.
Walk around and look at 3–4 classmates' second platform designs.
Find someone who chose a different platform than you — compare notes.
Carol, will you pray for us today?
A design system is the toolkit you build before you build the product.
A working Figma file with text styles, color styles, and a logo — the foundation for every screen
7 named text styles (Display through Button) that update everywhere when you change them
Colors defined by role (Primary, Surface, Error) with contrast ratios checked
A simple logo + wordmark that works at app icon size
Day 21, you build screens from scratch. Without a design system, you'll make hundreds of one-off decisions — picking colors by eye, guessing font sizes, rebuilding the same button five times.
A design system eliminates those decisions upfront. Every professional UI team builds one first.
Reusable decisions, not a pretty PDF
A working Figma file with styles, tokens, and components. It answers: What font size is a heading? What color is a primary button? What's the border radius?
App icon, nav bar logo
Named text styles with sizes & weights
Named colors with roles
Buttons, inputs, cards built from your tokens
Simple beats clever at small sizes
Quick approaches: Lettermark (stylized initials) · Simple symbol (one shape) · Wordmark only (distinctive font treatment)
Look at 5 well-known app icons. What makes them work at small sizes?
2 minutes
Function over expression
Choosing typefaces: Test at Caption size first. One family with weight variations is often enough.
Open Figma. Create 7 text styles using these roles. Pick a typeface and set your sizes. (5 min)
Name it by role, not by color
Primary — buttons, active states, links
On Primary — text on primary
Surface — cards, modals
Background — app background
Text Primary — body text
Text Secondary — captions, placeholders
Success / Error / Warning
Border — dividers, outlines
Set these up as Figma color styles. “Primary” not “Blue.”
Text on backgrounds must hit 4.5:1 contrast (WCAG AA)
Use WebAIM contrast checker — test every text/background combination. If it fails, adjust the shade. Don't skip the check.
Let's check one live. Pick your primary color — does it pass against white text?
15 minutes total
Due Monday, Mar 23 @ 5:15pm
Work Session (90 min) — Build your design system
First 15 min: Logo + wordmark (test at 29×29) · Next 20 min: Type scale (7 text styles in Figma) · Next 20 min: Color tokens (all roles + contrast checks) · Final 35 min: Design iterations
Push yourself — Try something unexpected in at least one iteration. If all 5 look similar, you haven't explored enough.
D7: Design System + 5 Iterations — due Mon, Mar 23 @ 5:15pm — PDF to Learning Suite