Skip to content
Motif
All tracks

Track 2

Visual craft

Hierarchy, type, color, grids, and the spacing decisions that make a screen read clearly.

  1. Lesson 1:
    Beginner14 min

    Visual hierarchy

    Hierarchy is how a screen tells you where to look first. Four signals carry it — size, weight, color, and spacing — and you rarely need more than three levels.

  2. Lesson 2:
    Beginner15 min

    Typographic scale

    A modular type scale derives every text size from one base and one ratio, so headings and body relate by a consistent multiplier instead of arbitrary pixels.

  3. Lesson 3:
    Beginner13 min

    Spacing & rhythm

    Consistent spacing on a base unit (usually 4 or 8px) gives a layout vertical rhythm. Ad-hoc margins are the most common reason a screen feels off.

  4. Lesson 4:
    Beginner16 min

    Color & contrast

    Color carries mood and meaning, but contrast carries legibility. Learn the WCAG ratios, how to hit them, and why OKLCH makes accessible palettes easier.

  5. Lesson 5:
    Intermediate16 min

    Layout & grids

    A grid turns scattered elements into a system of columns and gutters. Learn CSS Grid, responsive reflow with auto-fill/minmax, and when to reach for subgrid.

  6. Lesson 6:
    Intermediate12 min

    Dark mode & theming

    Real theming is semantic tokens, not inverted colors: follow the system scheme, allow a persisted override, avoid pure black, and hold WCAG AA in both modes.