Lessons
Learn something. Thenhold it to a principle.
A working example, then the law it answers to.
Performance Is DesignSee first
Taste
Taste is trained. Collect references, change one variable, and keep the better one.
Setting
Typography
Tracking, wrapping, optical alignment, figures and icons — the jobs type actually has to do.
- 01Letter SpacingTighten big text, loosen small text.
- 02Text WrappingBalanced headings, no lonely last words.
- 03Tabular NumbersSteady digits for values that change.
- 04Optical AlignmentCenter for the eye, not the math.
- 05IconsOne set, one weight, sized to the text.
- 06Font SmoothingLight text on dark renders heavier.
Ground
Colour
Palettes that survive a ground change, shadows that are not borders, and colour that is never the only signal.
- 01OKLCHLightness values that look equal.
- 02NoiseGrain hides banding and adds texture.
- 03Shadows, Not BordersLayered shadows give edge and depth.
- 04Image OutlinesA faint inner edge that frames images.
- 05Same Hex, Different GroundThe surround changes what you see — pick and judge color in context.
- 06DepthElevation, occlusion, and soft contact shadows.
- 07Depth of FieldFocus plane versus bokeh for hierarchy.
- 08TexturesSurface character that kills plastic flatness — grain, relief, fiber, brushed metal.
Structure
Layout
Hit areas, nested radii, clip paths and scroll — structure you can feel with a thumb.
Change
Motion
Easing, stagger, hold, press and exit. Movement that explains a change, then gets out of the way.
- 01Icon MorphBlur, scale and fade between icons.
- 02Button PressScale down on press so it feels real.
- 03EasingsEase-out for anything the user triggers.
- 04StaggerTurn one block into a sequence.
- 05InterruptibilityAnimation that can change its mind.
- 06Hover RestraintFrequent interactions should be instant.
- 07Shared LayoutOne element moving beats two swapping.
- 08Exit AnimationsLeave faster and quieter than you came.
- 09Scale EntrancesGrow from the trigger, not from zero.
- 10AnticipationWind-up before the move.
- 11HoldPause at the peak before you settle.
- 12Follow-ThroughSecondary motion after the primary stops.
- 13Camera MovesPush, pan, parallax, orbit — not Ken Burns.
Cue
Sound
Interface sound as confirmation, not decoration. Layered, quiet, and interruptible.
Read
Data
Charts that stay honest when the numbers move. Smooth the curve without lying about the points.
House
Identity
Cover the mark. If a stranger still knows the house, you have a system.
- 01Cover-Up TestHide the mark, and the type, the shared margin, and one rule should still name the house.
- 02Closed Identity SystemsPublish four colour jobs — ink, surface, action, and danger — and do not let the next screen add another.
- 03Quiet StationeryLetter, card, and envelope share one left rail and one thin rule before a mark is placed.
- 04Type Role LadderGive display, title, body, meta, and chrome each a size, a weight, and a tracking, and keep body at a reading measure.
- 05Optical MastheadAlign a circle and a word by eye, then write the nudge down, because a shared bounding box leaves the round side loose.
- 06Logo Paste LocksPlace the official mark inside clearspace equal to its own height, with no redraw, no matte, and no glow.
- 07Measured Field Before MarkSet a letter’s header, side margins, and footer before the mark, and start the salutation at the top of the body.
- 08Suite Proof Before MarkCover the marks, and the letter, card, and envelope should still match in rail, type, and one quiet device.
Object
Packaging
Stock, gravity, foil and lock-paths. The object is designed before the wrap is applied.
- 01Plant GravityA pack stands where its base meets a continuous floor, with a contact shadow from one light.
- 02INTO ≠ ONFoil, emboss, and letterpress displace the sheet. A sticker sitting on top does not.
- 03Named Stock Before FinishName the sheet, the weight, the finish, and the caliper before you specify foil or emboss.
- 04Foil-IntoStamp foil on the flat wrap, then wrap that sheet onto the box.
- 05Crash-Lock Load PathIn a crash-lock carton the load runs through the flaps and the manufacturer’s joint, not through the print.
- 06Standing FloorThe base of the pack and the floor line are one contact, and every shadow agrees with that light.
- 07Kiss ImpressionKiss leaves ink and almost no dent. Bite is a chosen relief. Crush closes the counters.
- 08Carcass Before WrapCut the board, groove it, and press the corner before any wrap is glued on.
Use
Product
Empty, error, focus, density and tokens. The states people actually live in.
- 01Theme Surfaces / Mode Re-AliasComponents use semantic names, and a dark theme changes those aliases instead of inverting the page.
- 02Component TokensName the job first, then the state, and do not publish a token just because the value looks like a colour.
- 03State MatrixPublish only the interaction and application pairs that can happen, and share one focus ring.
- 04Density ≠ SizeDensity changes padding and gap, while size changes the control height and the type.
- 05Sticky + FocusA sticky bar may hold context, but it must not cover the focused control or its ring.
- 06MeasureKeep reading lines near 45 to 75 characters, and take space from a short step scale.
- 07Badges and ChipsA chip needs a readable word and one job, and one colour means one meaning.
- 08Empty StatesAn empty screen says what is missing and offers the one next action.
- 09Destructive ConfirmA destructive confirm names what will be lost, keeps Cancel easy, and paints Delete as danger.
- 10Command PaletteA command palette opens on a shortcut, puts search first, and runs the highlighted row.
- 11Semantic RowA row has a primary line, a meta line, a status, and one action, and selection is a state rather than a stripe.
- 12Focus AppearanceOne vermilion ring shows keyboard focus, stays clear on light and dark surfaces, and is never clipped.
- 13Illustration RestraintA product illustration is one object drawn from the system palette, not a cluster of unrelated shapes.
The standard
Forty laws. The lessons are how you practise them.
Each lesson is held to a law from the canon.