Web design module 1: see like a designer

Day 1 — What interface design is

Goal: tell decoration apart from design, and set the four pillars of the path.

Theory 1/2: design is not decoration

Designing an interface is not making it pretty: it is deciding what the user sees first, what they understand without effort, and what they can do next. A "well-designed" page shows three signs: you find the information without searching, you understand what is clickable, and nothing tires you (legible text, sufficient contrast, breathing space). Steve Jobs summed it up: design is not what it looks like, it is how it works. The beauty of an interface is mostly the visible consequence of useful decisions.

Theory 2/2: the four pillars

Everything you will learn fits in four families of rules, found on every well-designed screen:

• Typography: font choices, sizes, line height, line length. It is 90% of the web's content.
• Color: a small palette, a role for each color, measured contrasts.
• Space: consistent margins and gaps that group what belongs together.
• Hierarchy: guiding the eye from most to least important, through size, weight, color and position.

None of these rules requires drawing talent: they can be learned, measured and checked. That is the good news of this path.

Practice (30 min)

1. Open three sites you use often (for example wikipedia.org, service-public.fr and one of your choice).
2. For each, answer in the notebook in three lines: what do I see first? What is clickable? What tires me, if anything?
3. Rank the three sites from clearest to most confusing, and write one sentence explaining the ranking using today's words (typography, color, space, hierarchy).

Success criterion: three written analyses, each using at least two of the four pillars.

Agent tip: an LLM can critique a screenshot: "Here is the home page of [site]. Tell me what the eye sees first and why, based on size, color and position." Trap: without the screenshot, it invents. Proof to demand: it must name the precise element (the title, the button) behind each remark.

Recap (10 min)

Three lines: the difference between decorating and designing, the four pillars, the sign of a clear page. Then redo the third site's analysis without looking at your notes.

Day 2 — Typography 1/3: families and anatomy

Goal: recognize the main font families and read the anatomy of a letter.

Theory 1/2: serif, sans-serif and the others

Serifs are the small strokes finishing the letters, inherited from Roman engraving — Trajan's Column in Rome bears them since 113 AD. A serif typeface (Georgia, Merriweather) evokes print and tradition; a sans-serif (Inter, Helvetica) evokes screens and modernity. Besides: monospace (fixed width, for code), display faces (decorative, reserved for large headings) and script faces (avoid them in interfaces). On the web, sans-serif dominates body text: its simple shapes stay crisp at small sizes on screen. A page usually uses one or two typefaces, never more than three.

Theory 2/2: the anatomy of a letter

Four words are enough to talk about a typeface precisely:

• X-height: the height of lowercase letters without ascenders or descenders (x, a, e). The larger it is, the more legible the face feels at small sizes — Inter has a tall x-height, one reason for its success.
• Width: how wide letters and their side bearings run. A wide set aerates, a narrow set condenses.
• Weight: the stroke thickness, from 100 (thin) to 900 (black). Body text reads at 400, emphasis at 600-700.
• Case: capitals and lowercase. ALL-CAPS text reads slower — the eye recognizes word shapes, and capitals are all rectangles.

Practice (30 min)

1. Today's analysis: open developer.mozilla.org and wikipedia.org. With the developer tools (F12, inspect icon), click a heading then a paragraph on each site, and record the font-family property from the Computed panel.
2. Note for each site: serif or sans-serif? Same family for headings and body?
3. Micro-exercise: on fonts.google.com, open Inter and Merriweather. Write three lines in the notebook: what difference in x-height and weight do you see between them at the same size?

Success criterion: four font-family values recorded with their family (serif/sans) identified, and the Inter/Merriweather comparison written.

Agent tip: paste the recorded font-family value to an agent: "Classify these typefaces by family (serif, sans-serif, monospace) and tell me which are system fonts." Trap: it may assert a font is paid or free without knowing. Proof: check the license on fonts.google.com or the foundry's site.

Recap (10 min)

Three lines: the font families, the four anatomy words, why sans-serif dominates the web. Then recite the four anatomy words without notes.

Day 3 — Typography 2/3: size, line height, line length

Goal: tune a body text block for comfortable reading.

Theory 1/2: body size and line height

The size of text, in pixels on the web, starts from the browser default: 16px, also the reference comfort for body text. Below 14px, reading tires; above 20px, body text turns clumsy. The line height is the distance between two baselines: too tight, lines touch and the eye loses its place; too loose, the paragraph falls apart. For 16px body text, a line height of 1.4 to 1.6 times the size (22 to 26px) almost always works. Headings, being larger, need proportionally less (1.1 to 1.3).

Theory 2/2: line length

A line too long tires: reaching its end, the eye struggles to find the start of the next. A line too short chops the reading. The classic measure (typographer Robert Bringhurst popularized it) is 45 to 75 characters per line, punctuation and spaces included, with an ideal around 66. The WCAG accessibility recommendation (criterion 1.4.8) caps it at 80 characters. On a web page, line length is not tuned by trimming the text but by capping the block's width: that is why the text columns of serious sites stop around 650-750px wide, even on a large screen.

Practice (30 min)

1. Today's analysis: on developer.mozilla.org, open an article. Select a paragraph and count the characters of one full line (paste it in the notebook; most editors count characters). Also record font-size and line-height from the developer tools.
2. Do the same measurement on a wikipedia.org article. Compare the two line lengths.
3. Micro-exercise: in the developer tools, live-edit the max-width of an article's column (right-click → Inspect, then edit the value) until you get about 66 characters per line. Note the value you found.

Success criterion: two line lengths measured and compared, and a width value giving ~66 characters written in the notebook.

Agent tip: "Count the characters in this line: [paste]. Is it within 45-75? If not, propose the column width that fixes it for 16px text." Trap: the model may miscount a long line. Proof: have your text editor count — it is the source of truth.

Recap (10 min)

Three lines: the reference body size, the line-height range, the line-length range. Then give the three numbers without notes.

Day 4 — Typography 3/3: the modular scale

Goal: build a consistent set of text sizes from a ratio.

Theory 1/2: why a ratio

On a poorly typeset page, sizes look picked at random: 15px here, 17px there, 24px elsewhere. A modular scale replaces chance with a ratio: start from the body size (16px) and multiply by a fixed number at each step. The classic ratios carry musical names, inherited from metal type: 1.125 (major second), 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), up to 1.618 (golden ratio). The larger the ratio, the stronger the contrast between headings and text. For an interface, 1.2 or 1.25 are enough: screens need nuance, not poster effects.

Theory 2/2: a complete scale

Example with 16px and a 1.25 ratio, rounded to integers: 12 (16 ÷ 1.25 ≈ 13, rounded down to 12 for captions), 16 for body, 20, 25, 31, 39, 49 for growing headings. Five to seven steps cover a whole site: body, a small size (captions, notes), three or four heading levels. The scale is not a prison: round to integers, and if the H1 step feels timid, raise the ratio, not one isolated size. What matters is that every size has a role, and the same role always carries the same size.

Practice (30 min)

1. Micro-exercise: build in the notebook the scale of base 16px, ratio 1.25, rounded to integers, from the small size to the H1 (six steps). Redo it with 1.333 and compare the gap between the two H1s.
2. Today's analysis: on stripe.com or gov.uk, inspect with the developer tools the size of the main heading, the subheadings and the body text. Do the recorded sizes form a regular progression? Write the values down.
3. Guess the site's ratio (divide two successive steps) and write it in the notebook.

Success criterion: two scales written (1.25 and 1.333) and a real site's sizes recorded with an estimated ratio.

Agent tip: "Compute the modular scale of base 16px, ratio 1.25, over six steps, rounded to integers." It is the kind of math an LLM gets right… or not. Trap: successive roundings pile up. Proof: redo the multiplication with a calculator, step by step.

Recap (10 min)

Three lines: what a scale ratio is, the two ratios useful to an interface, why we round. Then recite the 16px/1.25 scale from memory.

Day 5 — Color 1/2: hue, saturation, lightness

Goal: describe any color with three numbers and read a hexadecimal value.

Theory 1/2: HSL, a color's three dials

On screen, colors are mixed in light: red, green and blue added together (RGB) give white. But to think about a color, the most practical model is HSL: hue, saturation, lightness. Hue is the position on the color wheel, from 0° (red) to 360°, through green (120°) and blue (240°). Saturation is the intensity: 0% gives a gray, 100% the pure color. Lightness runs from black (0%) to white (100%), with the pure color at 50%. This model is precious because it matches our language: "a desaturated, dark blue" becomes three separate dials instead of a mysterious mix.

Theory 2/2: reading a hex code

The notation #3B82F6 is RGB in hexadecimal digits (base 16, digits 0-9 then A-F): two digits per channel — red, green, blue — each from 00 (0) to FF (255). #3B82F6 = red 59, green 130, blue 246: blue dominates, it is indeed a vivid blue. Two landmarks are enough to read by eye: the strongest pair gives the dominant hue, and the average of the three gives the lightness (#111111 very dark, #F5F5F5 almost white). The short form #FFF doubles each digit: #FFFFFF.

Practice (30 min)

1. Today's analysis: on service-public.fr, open the inspector, click the main button and record its background-color. Also record the body text color and the link color.
2. For each recorded hex value, write in the notebook its approximate HSL description: dominant hue (which of the three pairs dominates?), saturated or grayish, light or dark. Check with the developer tools' color picker (click the color swatch: it shows the HSL conversion).
3. Micro-exercise: in the picker, take the site's blue and make three variants touching only lightness: a light one (75%), the pure one (50%), a dark one (25%). Note the three codes.

Success criterion: three colors recorded and described in HSL language, plus three lightness variants with their codes.

Agent tip: "Convert #3B82F6 to HSL and propose three lightness variants (25%, 50%, 75%) at constant saturation, in hex." Trap: HSL↔RGB conversion is real math; an LLM slips by a step without blinking. Proof: paste its codes into the devtools color picker and compare the displayed HSL.

Recap (10 min)

Three lines: the three HSL dials, how to read hex by eye, what lightness alone changes. Then describe #3B82F6 without notes.

Day 6 — Color 2/2: the 60-30-10 rule

Goal: distribute a palette across a page and give each color a role.

Theory 1/2: 60-30-10, the recipe that avoids cacophony

The rule comes from interior design: 60% dominant color (the backgrounds, almost always a neutral: white, very light or very dark gray), 30% secondary color (the structuring zones: cards, banners, text), 10% accent (the action color, reserved for important buttons and links). The accent draws its strength from scarcity: if everything is orange, nothing signals the action anymore. This rule explains why credible pages feel "calm": the strong color is rationed. Color relationships are chosen on the wheel: analogous colors (neighbors, soothing), complementary colors (opposites, contrasting) — but an interface palette often holds a neutral, an accent, and its lightness variants.

Theory 2/2: semantic colors

Beyond the palette, some colors carry an expected meaning: red for error or danger, green for success, orange/yellow for warning, blue for information and links. These conventions are strong: a red "Save" button disorients. But a color must never carry information alone: about 8% of men and 0.5% of women have some form of color blindness (most often red-green). A field in error is therefore signaled in red and by an icon or a text. This is a WCAG requirement (criterion 1.4.1) and we will come back to it on day 24.

Practice (30 min)

1. Today's analysis: open stripe.com. Estimate the 60-30-10 distribution of the home page: what is the dominant neutral, what is the secondary color, what is the accent and where does it appear? Record the three hex codes with the inspector.
2. Count how many times the accent appears in the first screenful. What does it signal each time?
3. Micro-exercise: in the notebook, compose your own trio: a neutral (e.g. #FAFAF9), a text color (e.g. #1C1917), an accent of your choice. Write one sentence: what the accent will be used for, and what it will never be used for.

Success criterion: a real site's distribution recorded with its three codes, and your own trio with the accent's usage rule written.

Agent tip: "Here are my three colors: [hex]. Critique this palette against the 60-30-10 rule and tell me if the accent stands out enough from the neutral." Trap: the model judges codes, not the screen — also paste a screenshot. Proof: open both colors side by side and squint: the accent must pop.

Recap (10 min)

Three lines: the 60-30-10 distribution, why the accent is rationed, why color alone is never enough. Then recite the rule and the accessibility exception without notes.

Day 7 — Contrast and legibility

Goal: measure a contrast and know the reference WCAG thresholds.

Theory 1/2: the contrast ratio

The contrast between a text and its background can be measured: it is the ratio between the relative luminance of the lighter and the darker, from 1:1 (white on white) to 21:1 (black on white). The WCAG 2.2 standard sets the thresholds: level AA, the minimum expected of a public site, requires 4.5:1 for body text and 3:1 for large text (at least 24px, or 18.5px bold). Level AAA rises to 7:1 and 4.5:1. Informative graphic components — icons, field borders, indicators — need 3:1 against their neighbors (criterion 1.4.11). These numbers are not a matter of taste: they measure legibility for people with low vision, and by the way for everyone in sunlight or on a poor screen.

Theory 2/2: the classic traps

Three mistakes come back everywhere: medium gray on white (elegant in a screenshot, illegible in reality — #999999 on white is only 3.5:1), white text on a light accent (a light orange button #F59E0B with white text does not reach 2:1), and the light-gray placeholder treated as secondary text. Conversely, pure black #000000 on pure white (21:1) is not mandatory: many designers prefer a very dark gray (#1C1917, ~17:1) which softens long reading. The practical rule: body text aims at 7:1 or more, secondary texts stay above 4.5:1, and nothing important goes under 3:1.

Practice (30 min)

1. Today's analysis: on a news site of your choice, record the body text color and the background color, then compute the ratio in the WebAIM checker. Also record the color of secondary texts (dates, captions): do they pass 4.5:1?
2. In Chrome or Edge devtools, inspect a text, click the color swatch: the picker shows the ratio and the AA/AAA lines. Cross-check one of your recordings with it.
3. Micro-exercise: your trio from day 6. Measure accent-on-neutral and text-on-neutral. If the accent fails 4.5:1, make a darker variant that passes, touching only lightness. Note both ratios.

Success criterion: four ratios measured (two on the site, two on your palette) and, if needed, a corrected accent that passes AA.

Agent tip: "Compute the contrast ratio between #1C1917 and #FAFAF9, then between #F59E0B and #FFFFFF." Trap: relative luminance math has four steps; LLMs often give a plausible but wrong ratio. Non-negotiable proof: the same pair measured in the WebAIM checker.

Recap (10 min)

Three lines: the three thresholds (4.5 / 3 / 7), the two classic traps, why pure black is not mandatory. Then give the thresholds without notes.

Day 8 — Spacing 1/2: the 8-point grid

Goal: space with multiples of 8 and tell padding from margin.

Theory 1/2: why 8

Professional interfaces do not space by eye: they use a spacing scale, almost always built on 8: 4, 8, 12, 16, 24, 32, 48, 64px. The 4 serves fine adjustments (an icon and its text), 8-16 the common gaps, 32-64 the separation of sections. Why 8? Because it divides by 2 and 4 (half-steps stay integers), because at standard screen density it lands on crisp pixels, and because a short scale kills hesitation: the question is no longer "13 or 14?" but "8 or 16?". As with the type scale, the rule matters less than its consequence: the same gap always means the same relationship.

Theory 2/2: inside and outside

Every block has two families of spacing: padding, the space between the content and the block's edge — the air inside the button — and margin, the space between the block and its neighbors. The eye reads these two spaces differently: generous padding makes a button comfortable and clickable; a steady margin paces the page. Universal reading rule: what is close is perceived as related. A heading must therefore be closer to the paragraph it introduces than to the previous paragraph — say 32px above, 12px below. When a page feels "messy", it is almost always because these distances do not tell the true relationships.

Practice (30 min)

1. Today's analysis: on github.com, inspect a card or a panel. Record its paddings (the Computed panel's box diagram shows them) and the margins between two cards: are they multiples of 8 or 4? Write them down.
2. Also record the space above and below a section heading: which is larger?
3. Micro-exercise: write your full spacing scale in the notebook (4 to 64) and, for each value, a use: "4: icon-text; 8: between related elements; 16: common padding; 24…".

Success criterion: real measurements recorded with the verdict "multiples of 8 or not", and your scale annotated with uses.

Agent tip: an agent with a drivable browser can extract a whole page's spacings: "Record every padding and margin of the main component and tell me if they fit an 8-point scale." Trap: it will report inherited or computed values without distinguishing. Proof: compare one of its numbers with your inspector's box diagram.

Recap (10 min)

Three lines: why 8, the padding/margin difference, the heading rule. Then recite your 4→64 scale without notes.

Day 9 — Spacing 2/2: proximity and rhythm

Goal: use space to group information, without borders or rules.

Theory 1/2: the grouping laws

Gestalt psychology (the German school of the 1910s-1920s) measured how the eye groups what it sees. Three laws make the designer's daily life: proximity (close elements are perceived as a group), similarity (elements that look alike are perceived as related — same color, same shape), common region (elements inside the same frame are perceived together). Practical consequence: space is a tool of meaning, not emptiness. To separate two groups, increase the space before drawing a line — most of a page's rules and borders can be replaced with white space, and the page only gets calmer.

Theory 2/2: vertical rhythm

Going down a page, the eye expects a cadence: same spaces between paragraphs, same space before each section, headings landing on the same intervals. This vertical rhythm makes reading predictable, hence restful. Some designers align everything on an 8px baseline grid (text at 24px line height "lands" on the lines); at our level, keep it simpler: three measures are enough — the gap between related elements (8-12px), the gap between paragraphs or blocks (16-24px), the gap between sections (48-64px) — and each stays constant across the whole site. A steady rhythm beats a clever one.

Practice (30 min)

1. Today's analysis: open the gov.uk home page. Spot one place where elements are grouped by proximity alone (no border, no background), and one place where a common region (background or frame) creates the group. Note both.
2. Measure the space between two sections of the page and between two links of one block: confirm the three-measure rhythm.
3. Micro-exercise: copy in the notebook the structure of a card (title, image, text, price, button — any product card will do), marking for each gap its value from your scale and what it must say: "here 12px, these two belong together".

Success criterion: two grouping techniques identified on a real site, and the card annotated with a justified gap for each relationship.

Agent tip: paste a screenshot: "On this page, identify the groups created by proximity and those created by a common region. Is there a place where the spacing contradicts the meaning?" Trap: it cannot always see exact pixels. Proof: check one of its distances with the inspector's ruler.

Recap (10 min)

Three lines: the three useful Gestalt laws, why space before borders, the rhythm's three measures. Then redraw the annotated card without notes.

Day 10 — Visual hierarchy

Goal: lead the eye in the intended order with size, weight, color and position.

Theory 1/2: the four levers

The eye does not read a page, it scans it. Visual hierarchy is the art of choosing what it sees first, second, third. Four levers, from strongest to subtlest: size (the biggest wins), position (top and left first, in left-to-right reading cultures), color (the rationed accent from day 6 pulls the eye) and weight (bold in a paragraph, the dark heading among the grays). A successful hierarchy passes the "squint test": blurred, the page must still show its three main elements in the right order. If everything pops, nothing pops: hierarchy is a decision about what is less important.

Theory 2/2: the eye's paths

Eye-tracking studies by the Nielsen Norman Group (from 2006) showed two typical paths: the F-pattern on text-dense pages (the eye sweeps the top, then descends with shorter and shorter lines), and the Z-pattern on airy pages (top-left corner → top-right → bottom-left → bottom-right). Practical consequences: the first words of headings and lines carry the essentials ("50% off" beats "Exceptional offer: -50%"), and on a Z page, the main action sits at the end of the path, bottom-right of the watched zone. These patterns describe tendencies, not laws: a clear hierarchy guides them instead of suffering them.

Practice (30 min)

1. Today's analysis: open apple.com and run the squint test: write down the three elements seen in order. Repeat on the wikipedia.org home page: is the order as sharp? Why?
2. On one of the two, identify the lever used at each level: size? weight? color? position?
3. Micro-exercise: take the card from day 9. List its information (title, image, text, price, button) in the order of importance you decide, then note which lever you will use for each rank (1: title at 25px bold; 2: price in accent 20px…).

Success criterion: two squint tests recorded with each level's lever, and the card prioritized with a lever per rank.

Agent tip: blur your screenshot (or describe the blocks and their sizes): "Here is my blurred page. Which are the first three elements that stand out, in order?" If its answer is not your intended order, the hierarchy needs rework. Trap: it may guess content under the blur — ask it to stick to what it sees, sizes and masses.

Recap (10 min)

Three lines: the four levers, the F and the Z, what the squint test proves. Then redo the card's hierarchy without notes.

Day 11 — Grids and alignment

Goal: set up a 12-column grid and make alignment a reflex.

Theory 1/2: the 12-column grid

The grid is an invisible frame: regular vertical columns on which every block aligns. The most common counts 12 columns, separated by gutters of 16 to 32px, because 12 divides by 2, 3, 4 and 6: the same grid carries two equal columns (6+6), three (4+4+4), four (3+3+3+3) or the classic asymmetry content 8 + sidebar 4. The grid's outer margins define the page's working width — often 1100 to 1300px centered on a large screen. The grid is unseen but felt: when two neighboring blocks align neither their edges nor their text, the page turns "approximate" without anyone knowing why.

Theory 2/2: alignment as discipline

Three alignments ground a solid page: edges (blocks start and end on the same verticals), text baselines (two texts side by side rest on the same line) and the center, reserved for short compositions (hero, quote) because centering everywhere makes edges ragged and reading tiring — long text aligns left. The beginner's temptation is to "nudge by eye" an element by 3px: never do it; if two things must align, they share a grid value, otherwise the gap is deliberate and visible. The best test: turn on your tool's grid overlay and look at what lands on no line.

Practice (30 min)

1. Today's analysis: on stripe.com, look for the grid lines: how many columns carry the layout? Record the central content width (inspect the container) and the gutter between two cards.
2. Spot one sharp alignment (edges sharing a vertical) and one place where asymmetry is deliberate. Note both.
3. Micro-exercise: in the notebook, sketch a 12-column grid by hand with its gutters, then place the card from days 9-10 on it: image over 5 columns, text over 7. Note each block's start and end columns.

Success criterion: a real site's frame measured (columns, gutter, working width) and your card set on a drawn grid.

Agent tip: "Here are the widths I recorded on this site: container 1152px, 3 cards of 368px, gutters 24px. Check whether it fits a 12-column grid and compute the column width." Trap: it may force a "clean" result by rounding silently. Proof: redo the division (1152 − 11×24) ÷ 12 by hand.

Recap (10 min)

Three lines: why 12, the three alignments, why we never nudge by eye. Then redraw the grid and the card without notes.

Day 12 — Consistency and repetition

Goal: understand why interfaces look alike, and turn it into a strength.

Theory 1/2: Jakob's law

Jakob Nielsen stated it in 2000: users spend most of their time on other sites than yours, so they arrive with expectations — the logo top-left returns home, the magnifier opens search, the underlined or colored link is clickable, the cart is top-right. Respecting these conventions is not a lack of originality: it is courtesy. Originality is paid for in learning effort; it belongs where it adds something (visual identity, illustration), never in navigation. Internally, the same logic: a primary button keeps the same color, shape and label pattern across the whole site — "Save" does not become "Confirm" on the next page.

Theory 2/2: patterns, the bricks of consistency

A pattern is a proven solution to a recurring problem: the card (image, title, text, action), the breadcrumb, the tab, pagination, the alert message. Public design systems — the French government's DSFR or the GOV.UK one — document dozens of them, with use cases and pitfalls for each. When you repeat the same pattern, the user learns only once. Consistency is simply measured: everything that behaves the same must look the same, and two different things must look different. On day 37, this habit will take a name: the design system.

Practice (30 min)

1. Today's analysis: on github.com, list every button style visible on one page (primary, secondary, danger, link-button): how many are there, and what distinguishes each? Note color, background, border.
2. Spot two named patterns (tabs, breadcrumb, card…) and write in the notebook the problem each solves.
3. Micro-exercise: for your card from the previous days, define written conventions: "primary button = accent, white text, 8px radius; link = accent, underlined on hover; price = 20px bold". Five rules minimum.

Success criterion: a real site's button inventory and your five conventions written in the notebook.

Agent tip: "Here is the list of button styles I recorded on my site: [paste]. Detect inconsistencies (two styles for the same role, or one style for two roles)." Trap: it cannot guess the role without your annotations — provide them. Proof: every reported inconsistency cites the two places involved.

Recap (10 min)

Three lines: Jakob's law, what a pattern is, the "same = same look" rule. Then recite your five conventions without notes.

Day 13 — The details that look professional

Goal: polish states, borders and shadows — the finishes visible at first glance.

Theory 1/2: interactive states

An interactive element has not one appearance but several: rest, hover (the pointer is over it), focus (reached by keyboard, with Tab), active (while clicked), disabled (action impossible), and sometimes loading. The focus state is the poor relative: yet without it, the keyboard user is lost — WCAG requires a visible focus indicator (criterion 2.4.7) contrasted at 3:1 (1.4.11). A form adds its own states: error, success, required. Counting states is a good design reflex: a button has at least four, a field six. The sites that feel "finished" are those where every state was drawn, not left to the browser's defaults.

Theory 2/2: borders, corners, shadows

Three finishes betray amateur work. Rounded corners: pick a radius (4, 6 or 8px) and hold it everywhere — a button at 6px and a card at 20px without reason breaks consistency; the full circle is reserved for avatars and icon buttons. Borders: 1px is enough, in a gray contrasted just enough (3:1 for a form field). Shadows: a realistic shadow is discreet — low opacity (10-20% black), generous blur, slight vertical offset; two shadow levels at most, one for cards, one for what floats (menu, modal). A hard 100% black shadow shouts "beginner" more surely than any taste mistake.

Practice (30 min)

1. Today's analysis: on a site of your choice, walk a form with the mouse then keyboard only (Tab, Shift+Tab, Enter). List the states you see change: hover? focus? error? Note what is missing.
2. Inspect a card: corner radius (border-radius), border, shadow (box-shadow). Record the three values.
3. Micro-exercise: write in the notebook the state sheet of your primary button: rest / hover / focus / active / disabled, with what changes in each (background, cursor, outline) — values from your day 6 palette.

Success criterion: a real form's states audited, three finishes measured, and your button's state sheet complete (five states).

Agent tip: "List every state a form field must provide, with for each a visual change that does not rely on color alone." Trap: it will forget focus or disabled if not framed — demand the full list. Proof: confront its list with today's keyboard audit.

Recap (10 min)

Three lines: a button's states, why focus is vital, the three finishes and their dosages. Then recite the state sheet without notes.

Day 14 — Module 1 review: the complete analysis

Goal: run the full visual audit of a real site on your own, with the six-criterion grid.

Theory 1/2: the analysis grid

Thirteen days of rules fit into six questions, asked in order — the most structural first:

1. Hierarchy: what do I see first, second? Does the squint test confirm it?
2. Typography: which families, which scale, which line length, which line height?
3. Color: is the 60-30-10 distribution respected? Does the accent signal action?
4. Contrast: does body text pass 4.5:1? Do interface elements pass 3:1?
5. Spacing: do the gaps fit a scale? Are groups legible without borders?
6. Grid and alignment: do edges share verticals?

Order matters: a hierarchy fault makes the other tunings pointless, and an alignment fault shows even when everything else is right.

Theory 2/2: writing a useful critique

A professional critique follows a strict shape: measured observation, then rule cited, then proposal. "It's ugly" says nothing; "the secondary text #9CA3AF on white is 2.8:1, under the AA threshold of 4.5:1 — move to #6B7280 (5.7:1)" is actionable. The critique also cites what works: an audit that finds only faults is a failed audit, because it does not say what to preserve. Aim for ten findings: five strengths, five problems, each with its measurement or its rule.

Practice (30 min)

1. Pick a site you have not analyzed yet (avoid the previous days' ones).
2. Run the full audit with the six-criterion grid, in order. Measure everything measurable: text sizes, contrast ratios in the WebAIM checker, spacings, gutters.
3. Write ten findings: five strengths, five problems, each in observation + rule + proposal format.
4. Close the site and summarize the audit in five lines from memory.

Success criterion: a written audit, six criteria covered, ten findings in the right format, at least three with a measured number.

Agent tip: hand your ten findings over for review: "For each finding, say whether it contains a measurement, the rule cited and a proposal; flag those that are only opinions." Trap: it will tend to be kind. Demand severity: "If a finding has no measurement, say so plainly." Proof: every rejected finding names the missing part.

Recap (10 min)

Three lines: the six criteria in order, the shape of a useful critique, your main discovery of this module. Then recite the grid without notes — it will serve every audit of the path.