llms.txt: structured index of this documentation for AI agents. Append .md to any page URL, or send Accept: text/markdown, for a Markdown version of any page.
Skip to content

Module 04 of 10 · 6 lessons

Craft

Build visual systems that survive real devices, real content, and real networks.

0 of 6 lessons complete

01

Spacing & alignment

Use a spacing grid, optical alignment, and related corner radii

02

Colour systems

Build perceptually consistent colour scales with OKLCH

03

Layout patterns

Prefer resilient CSS layouts that survive long content and narrow screens

04

Mobile resilience

Account for safe areas, dynamic viewports, zoom, and mobile keyboards

05

Performance details

Prevent layout shift and keep visual details from slowing the page

06

Polish: the last 5%

Run a final pass across spacing, colour, edges, and shadows