Module 4 / Design basics
Typography and color systems
Moves type and color from decoration into reusable systems for readability, emphasis, accessibility, and brand expression.
Learning outcomes
- Build a type scale with roles for headings, body text, captions, labels, and UI controls.
- Create a color palette with primary, secondary, neutral, semantic, tint, and shade roles.
- Check contrast and readability before treating a direction as finished.
Lessons
Type roles and readable text
Typography must support scanning, reading, hierarchy, and dense UI labels across breakpoints.
Practice: Create six text styles and test them in a hero, form, card, and dashboard row.
Color roles and tonal palettes
A palette needs roles: primary action, supporting accent, neutral surfaces, text, border, success, warning, and error.
Practice: Build a 50-900 tonal palette for one primary color and assign semantic roles.
Gradients, shadows, and depth
Depth effects should clarify surface, elevation, and interaction. They should never reduce readability.
Practice: Design the same card using border-only, shadow, and gradient treatments, then explain which is most useful.
Style guide as a training asset
A style guide turns design decisions into a reusable system other trainees and developers can follow.
Practice: Create a mini style guide with type, color, spacing, radius, shadow, button, and form examples.
Studio assignment
Mini style guide with tokens, examples, accessibility notes, and misuse warnings.
Build a Jambo-style mini design system for a learning product aimed at first-time designers.