Act 1 · Seeing · Course 03

The System

Fifty screens that agree with each other are never a coincidence – they're tokens, components and patterns referencing one source of truth. This course hands you the machinery, the vocabulary to direct it, and the seven steps that build one from nothing.

A design system is the "how we build it" layer underneath a brand's "what it should look like" layer – a coded, governed toolkit of tokens, components and patterns that lets a product stay coherent at scale. The mechanism running through all of it is reference-not-copy – one decision, made once, followed everywhere – and the skill this course builds is speaking that machinery precisely enough to review it, request it, or have an agent build it under your direction.

Walk away able to

Catch the copy-paste definition of composable in the wild, and explain the reference model that replaces it
Read a token file and name the layer any decision lives in – primitive, semantic, or component
Critique one component precisely – part, variant or state – down to the cell of the grid that's broken
Ask for a screen's four data conditions by name, and notice when only the happy path was designed
Sequence a from-scratch build, scope its minimum honestly, and supply the judgement anchors when an agent does the building
Judge any system – including the famous ones – by the problem it answers and the trust it earns, never by component count

The tests you leave with – five questions that size up any component conversation

Five questions that size up any component conversation – ask them in order, stop at the first honest no:

Is it composed, or copied? Will a change to the base piece propagate everywhere it’s used – or will someone re-edit duplicates by hand until they drift? Reference-not-copy is the whole difference between a system and a pile (lesson 1).
Which layer does this decision live in? A primitive value, a semantic alias, or a component override – and is anyone bypassing the layers with a hex code in a component? (lesson 2).
Variant, or state? Is the problem the authored version chosen for this screen, or the live condition’s treatment – and does the variant × state grid have all its cells designed? (lesson 3).
Where are the other three moods? Loading, empty, error – or was only the populated screen designed? Ask by pattern name and the fix scopes itself (lesson 4).
Would the build survive scrutiny? Audit before palette, governance before contributor two, adoption measured as trust rather than installation – and if an agent built it, who supplied the judgement? (lesson 5, lesson 6).

The six lessons build these in order. The quiz at the end checks the judgement, not the definitions.

The lessons

Already seeing it? Take the quiz first – a pass marks the course done, no lessons required.

Case studyAesopA brand so distinct that competitors read as derivatives – held together by bottles, stores and voice, with barely a component library in sight.This course draws the line between brand guidelines and design systems – Aesop is the cleanest case of a world-class identity living almost entirely on the upstream side of it.

“not a tech product, I just love their branding. Simple, distinct, instantly recognisable — companies that emulate it read as derivatives.”
– you, in the placement quiz

Aesop’s signature – amber apothecary bottles at uniform sizes, black sans-serif type on cream labels, plain ingredient-forward copy instead of beauty-industry hyperbole – has been consistent enough, for long enough, that it now functions as the reference point competitors get measured against. Two documented responses make that concrete: Malin+Goetz kept the simplicity but added colour-coding to differentiate lines; Le Labo kept the minimalism but added hand-labelled personalisation. Both are legitimate strategies – and both are legible as reactions to Aesop, which is exactly what “reads as derivative” means as a design outcome.

Here’s why it anchors this course: almost none of that lives in a component library. The identity is carried by brand guidelines – reportedly a 256-page brand book covering logo, type, colour, art direction and campaign construction (that page count comes from the agency’s own case study and isn’t confirmed by Aesop itself, so treat the number as illustrative). Separately, Aesop’s digital team built a modular design system matched to that identity, so new product pages and campaigns assemble quickly without re-deriving the brand’s rules each time. Rules upstream, tools downstream – the brand would survive a change of design system; the design system, on its own, would not carry the brand.

The detail a designer would point at: every Aesop store is individually architect-designed – different spaces, different materials, no two alike – and yet unmistakably the same brand. One system does not mean one template. Consistency lives in the decisions, not in duplication, which happens to be this course’s whole argument at a different scale.

The moves, named – follow one into the glossary:

Brand rules, not component tools
The downstream system built to match
One identity, no single template
Restraint as a competitive moat

Check your understanding

6 questions with distractors built from real misconceptions – each answer explains itself immediately. Nothing unlocks and nothing is gated; passing just marks the course done.

Take the quiz