DSN 325 · UI Design & Design Systems · Week 2 of 7
Build the Foundations
Type, color, and contrast — set by hand, captured in a style tile.
This week you make your first real decisions for your RFP product. Not screens yet. The rules underneath the screens: how text steps in size, what each color means, and whether people can read any of it. Get these right and everything after gets easier.
This week at a glance
Wed 11:59 pm
Discussion: Type & Color in the Wild — initial post
Fri 11:59 pm
Studio: Style Tile — type scale, color roles and states, contrast checked
Fri 11:59 pm
Field Work: Design System Safari — post your findings
Sun 11:59 pm
Replies: discussion (2 classmates) and Field Work (1 classmate)
1The vocabulary
Four terms this week. Each one is a decision you'll make on Friday.
Type scale
A fixed set of text sizes that step in a clear rhythm — like 32, 24, 18, 16, 13. Pick sizes from the scale, never in between. The steps create hierarchy for free.
Do — clear steps: 32 / 24 / 16 / 13Don't — 17, 16, 15, 14: no steps, no order
Color roles
Every color in your product has a job: one accent for actions, one for danger, neutrals for everything else. If a color has no job, it doesn't belong.
Do — the accent marks the one main actionDon't — five colors, zero jobs
Color states
Some colors carry meaning users already know: green means it worked, red means it failed, yellow means be careful. Define them once and never use them for decoration.
Do — color matches meaning (shown in this guide's palette — in your tile, success gets its own green, not your accent)Don't — red for everything = red means nothing
Contrast ratio
A measured number, not a feeling. Body text needs at least 4.5 to 1 against its background. Large text needs 3 to 1. Free checkers do the math for you.
A style tile is a single page showing your visual decisions before any screens exist. Yours needs:
Type scale — every size you'll use, shown as real text, with the sizes labeled
Type choices — your font (or font pair) with heading and body weights shown
Color roles — accent, neutrals, backgrounds, each labeled with its job
Color states — success, warning, error, shown in context (a message, a badge)
Contrast proof — the measured ratio for your body text and your accent-on-white
A sample — one small piece of UI (a card, a message) using only the above
Plus 100 words on why these choices fit your RFP audience. A medication app for older adults and a study app for teenagers should not produce the same tile.
The trap this week: picking colors you like instead of colors that work. Your taste matters, but it comes second. First the color has to do its job — readable, meaningful, consistent — for the specific people in your RFP sector. Low-bandwidth EdTech users on old phones need contrast more than they need your favorite blue.
3How to do this week's work
Open your Week 1 swipe file. That's your raw material. What did the five screens you admired do with scale and color? Steal the moves, not the pixels.
Set the type scale first. Pick 4–6 sizes that step clearly. Test them with real words from your product, not "Lorem ipsum."
Assign color jobs. One accent. Neutrals. Then the states: success, warning, error. Label every color with its job on the tile.
Check the numbers. Run body text and accent-on-background through a contrast checker. Fix anything under 4.5:1 before Friday, not after feedback.
Build the sample. One small piece of UI using only your tile's decisions. If you need a color or size that isn't on the tile, the tile is incomplete.
Write the rationale, submit, then do Field Work. The safari (explore a real design system, document one component) preps Week 3, when your tile becomes reusable parts.
AI this week: checkers, not generators. Contrast tools do math for you — use them freely, no disclosure needed. But the scale and the palette are hand-picked, by you. You'll be glad they were when Week 4 asks you to reject AI options against your own standard.
4Resources
Everything here is free. Start with the starred items.
★Butterick's Practical Typography — free full book. Start with "Typography in ten minutes."
7 Practical Tips for Cheating at Design — Wathan and Schoger. On Medium; use a private window if it asks you to sign in.
★Material Design 3 — Styles — Google. Color roles and type scales, labeled with their jobs.
WebAIM Contrast Checker — Paste two colors, get your ratio.
WhoCanUse — Your color pair through color blindness, low vision, and sunlight.
Fix Color Contrast — Pimp my Type.
Steve Schoger — visual design redesigns — Refactoring UI. Video walkthroughs of before-and-after redesigns.
Design System Safari — the public systems to pick from for Field Work. Material Design 3, Apple Human Interface Guidelines, IBM Carbon, Atlassian Design System, and the GOV.UK Design System — the accessibility gold standard. Pick one, then document one component's variants, states, and tokens.
5Before you submit
Type scale has 4–6 sizes with clear steps, shown as real text
Every color on the tile is labeled with its job
Success, warning, and error states are defined and shown in context
Body text measures at least 4.5:1; the ratio is printed on the tile
The sample uses only decisions from the tile — nothing off-menu
100-word rationale connects choices to my RFP audience
AI disclosure included (checkers don't count; generators would)
Field Work safari posted: one real design system, one component documented