Where we are
Session 3 produced a structure in grey boxes. Tonight it becomes a screen, and for the first time in this course something can be checked rather than argued about.
★ What you walk out with tonight. A type scale and a spacing scale written down as named values, a screen that scores 100 on measured criteria, and the ability to answer "can we brighten it up" with a number instead of a sigh.
LiveWhy a scale, rather than choosing each value2 min▶
Every size and every gap you pick individually is a decision you will have to make again, slightly differently, on the next screen. Twenty screens later the product has 31 font sizes and 40 spacing values, none of them wrong on their own, and the whole thing feels subtly cheap without anybody being able to point at why.
A scale is a small set of allowed values. It removes the decision, which is the actual benefit - not tidiness, fewer decisions. And it is what makes session 6's handoff possible, because named values are the only thing a developer can implement without guessing.
Three type sizes used consistently beats nine used expressively, and this is one of the few places in design where that sentence is not a matter of taste.
Two scales, and hierarchy comes out almost free
6 min liveLiveOne primary action, and what the others become4 min▶
Hierarchy is not decoration, it is arithmetic about attention. Five buttons styled identically is five decisions handed to a person who came to make one.
- One filled button. The thing most people came to do. On Daybreak's screen, after session 2, that is Pause deliveries.
- Everything else becomes a text link. Still there, still one tap, visibly secondary. Note what this does not do: it does not hide or slow anything, which is the distinction a reviewer will test you on.
- Destructive actions are quiet, not hidden. Cancel is a text link in the normal text colour. Not red, not shouting, not buried. Red on a destructive link makes it more eye-catching, which is the opposite of what you want.
The test for a hierarchy that works: squint at the screen, or blur it in your browser's dev tools. If more than one thing survives the blur as "the loud thing", you have two primaries and therefore none.
Contrast is the one part of visual design with a right answer
6 min liveAlmost everything else on this page is judgement. This is arithmetic, it is in a published specification, and it settles arguments that would otherwise run for a week.
That seeded pair is the text colour Daybreak currently ships on white. Swap the first value for #4A4458 and run it again. Then try your own product's body-text grey, which is the moment this usually stops being theoretical.
Self-studyColour decisions that are not contrast4 min▶
- Never carry meaning in hue alone. Roughly one in twelve men has some form of colour vision deficiency. Pair every colour signal with a word, an icon or a position. "Paused" in green text is a design that excludes people; a "Paused" label with a pause icon is not.
- One accent, used sparingly, is what makes it an accent. The moment there are four accent colours on a screen, none of them means anything and your primary action stops being visibly primary.
- Test the state you are least proud of. Disabled buttons, placeholder text and helper text are where contrast failures live, because they are deliberately faint and nobody checks them.
- Dark mode is a second palette, not an inversion. Contrast ratios do not survive being flipped, and pure white on pure black is uncomfortable to read for long. If you cannot maintain two palettes properly, shipping one good one is the honest choice.
The screen scorer
★ 22 min · everyone buildsDaybreak's screen, live and rendered, with the levers from tonight and sessions 2 and 3. The contrast row is genuinely measured: it reads the colours of the pixels you just changed and computes the WCAG ratio. The other rows are a stated rubric. Both are labelled on the widget.
0 / 100 · contrast 2.64:1 · 41 seconds to find pause. The screen Daybreak ships. Nothing about it looks broken in a screenshot, which is exactly why it survived three years.
30 / 100 · contrast 9.16:1. One change: stop using grey for text. That is 30 of the 100 points, it is the largest single move on the board, and it took one colour value.
50 / 100 · 36 seconds. One primary action, the rest demoted to links. Notice nothing was removed or hidden - the screen simply says which thing matters.
62 / 100. One spacing scale. The groups become visible without a single divider line being drawn.
76 / 100 · 27 seconds. Task-named buttons instead of container names. "Pause deliveries" rather than "Manage". Session 3's rule, now worth 14 points and 9 seconds.
88 / 100. Empty, loading and error states designed. On this screen these are not edge cases and the rubric weights them accordingly.
100 / 100 · 5 seconds. Pause on the screen rather than inside a menu. From 41 seconds to 5. That single lever is session 3's entire argument, scored.
Start from "the screen we inherited" and read the score. Zero. Then look at the mock: it is not ugly. This is the important part - a screen can look perfectly professional and score zero, which is why measurement beats impression.
Switch on the contrast lever alone. Watch the measured ratio go from 2.64 to 9.16 and the score to 30. One colour value, 30 points. Nothing else on the board pays like that.
Climb the rest of the ladder in order and read the "measured on" line each time. It tells you which piece of text is currently your worst, which is exactly the feedback a real audit gives you.
Get to 100, then look at the mock properly. It is a calm, plain screen with one filled button. There is no cleverness in it anywhere. That is what a 100 looks like, and it is worth sitting with for a moment.
Now switch on "brighten it up, make it feel more friendly". This is the most requested change in design history and it is on the board as an anti-lever: 100 drops to 58. Measured contrast falls from 9.30 to 1.67. Time to find pause goes from 5 seconds to 11.
Read why, row by row. Contrast collapses because pastel text on white genuinely fails - that number is computed from the pixels, not scripted. Hierarchy drops from 20 to 8 because four competing button colours means the screen no longer says which action matters.
Practise the sentence. Not "I do not like it". Instead: "That palette measures 1.67 to 1. AA needs 4.5. Here are three brighter options that pass, pick one." You have just turned a taste argument into a constraint plus a choice, which is the entire job.
Now score your own screen. Take the six rubric rows to the wireframe you brought from session 3 and grade it honestly. Run your real body-text colour through the contrast checker above. Most people find one failure in the first two minutes.
The anti-lever is not saying colour is bad. It is saying that "make it friendlier" is a goal, not a change - and that the version of it people reach for first happens to break the only part of visual design with a published right answer. Bright and readable is entirely achievable. It is just not what you get by lightening the text.
Before session 5
30 min- Write your type scale and spacing scale down as named values. Four sizes, five spaces. Named, because session 6 hands these to a developer.
- Run your product's body text, helper text and placeholder text through a contrast check. The last two are where the failures hide.
- Blur-test one of your screens. Squint or use the dev tools blur filter. Count how many things survive as "the loud thing". More than one means none.
- Find one place where meaning is carried by colour alone. A status dot, a red number, a green tick without a label. Add a word.
- Apply your scales to the session 3 wireframe. Bring the result to session 5, where every word on it gets written on purpose.
Three questions
Clear all three and session 4 gets stamped in your passport.
1 · On the scorer, one lever alone is worth 30 of the 100 points. Which, and why that much?
Contrast carries 30 points because it is measured rather than judged, and because failing it is not a matter of preference - it makes the screen unusable for some people in some conditions. It is also the cheapest fix on the board: one colour value.
2 · Switching on "brighten it up" takes the screen from 100 to 58. What actually happened?
Nothing is penalised for being bright. The contrast row is computed from the rendered pixels, so it fell because the colours genuinely became unreadable. Bright and readable is achievable - it is just not what you get by lightening the text.
3 · Why should a destructive action like Cancel be quiet rather than red?
A red button is a loud button. If the goal is that people who mean to cancel still can, easily, while people who meant to pause find pause first, then cancel should be present, one tap, and visually calm. Hiding or slowing it would be a different thing entirely, and a reviewer will check which one you did.
What this session teaches, and where it came from
The scorer's rubric and every number on this page are written down in the course's source map, including which rows are measured and which are a teaching model.
Session 4 cheat sheet · pin this
The screen scores 100 and it still does not say anything. Session 5 writes every word on it on purpose - feedback within about a second, error messages that say whether anything changed, forms improved mainly by deleting fields, a motion budget, and confirmations that name the consequence instead of asking whether you are sure.