Chapter 4: The Craft — Color, Type, Spacing, and the Tricks You Earn Afterward

The system: 3 dark tints (text hierarchy on light), 3 light tints (surfaces, text on dark), 2 brand colors (one main, one darker hover shade that doubles for links and menu items) — '6 is the absolute minimum,' his own working count 8. The contrast rule that runs the tints: headings DARKER than body on light backgrounds, LIGHTER than body on dark. Palette generators found by Googling are built for graphic design and routinely fail web contrast — the distinction between web designers and brand designers is load-bearing.

Two calibrations keep it honest: color psychology (green/nature, purple/luxury, blue/banks) 'should guide you, not limit you'; and the 60-30-10 rule is an interior-design import — 'sounds too simple,' ignored by plenty of gorgeous sites. The cautionary tale is Udemy's serial rebrand (green → red → purple while scaling to ~800k students as-heard): churn costs 'long-term brand rememberability.' Creation steps: start from the client's brand color, brighten/saturate for buttons if needed, derive the tints, add a second brand color only if needed.

VOCABULARY first: '9 out of 10 times people mean typeface when they say font' — a font is one weight; the typeface is the folder. CATEGORIES with payloads: serif (luxury, official, authority — the foot guides the eye through long text), sans serif (modern, neutral, friendly — 'if you don't know what to do, just pick a sans serif and you will be good'), display (expressive, impractical, thematic), monospace ('we will not use monospace fonts for the web'). The mistake catalog from one gloriously wrong example: bold body text ('please don't'), all-caps headings, no title/subtitle hierarchy, too-thin fonts (Booking.com's footer named as a real offender). Links: distinct from body, bumped regular→medium, never full bold.

THE SIZE SYSTEM: body base 16px ('the default for the whole web,' 18px rising); six heading sizes + three body sizes + one utility size minimum; H1 64px desktop; scales are exponential — typescale.com's default minor third is too timid, MAJOR THIRD is his recommendation, perfect fourth for bolder modern work, nothing beyond. His own 'Responsive Font Sizes' resource adds what typescale omits: matching mobile values (H1 ~36 down to 20; body stays 16 on both). LINE-HEIGHT in percentages (survives the trip to dev tools): the bigger the title, the less line-height, stepping down ~5-10% per size — and set it even when the heading doesn't wrap in Figma, because it WILL wrap on mobile. Pairing: minimum one typeface, two weights; his current tastes run Inter, Ubuntu, DM Sans — 'a little bit done with' Lato/Montserrat/Open Sans.

Two principles carry the lesson. WHITE SPACE — all empty space, 'even if it's black' — signals importance, elegance, luxury (Apple pages; the handbag-store analogy: the same bags crammed together look 'kinda crappy'). PROXIMITY — 'what belongs together should stick together': a card heading sits closer to its body than to the card edge; a title 48px from BOTH the text above and below belongs to neither. Demonstrated as live surgery on three real designs, including a musical venue's site whose owners later redesigned it — the critique validated by reality.

Then the MATH. The 12-column grid (divides by 2, 3, 4); the classic 1140 container (12×75px + 11×20px gaps — the number he decoded in a viral video); his current preference 1248 (80px columns, 24px gaps, both divisible by 16 — the rem base); keep containers under ~1300px so 1366px laptops keep margins. Spacing tokens on the 16/4 system: 8 (icon-to-text), 16 (heading-to-body), 24/32 (button-to-block), 64 (mid-section), 128 (section top/bottom) — saved as Figma VARIABLES (S/M/L) so the numbers are typed once. Fluid percentage containers: photography sites only; text lines must not stretch.

Seven short lessons, one shelf. LAYOUT BREAKS: overlap elements, drag images and background colors across section boundaries, vary content width within a page, let items exceed the grid, split heading from body horizontally. SUBTRACTION: transparent menus over heroes (logo flips to light; contrast or overlay required), remove container backgrounds so sections flow, mask images into circles and eggs, round ENTIRE sections into floating cards ('I haven't seen this in like 20 years of web design'), custom dividers up to torn sand-texture edges. RANDOMNESS: pastel bases with white as the accent ('why not use a pastel color as a background and then add white on top?'), colored heroes, justified textures only, ~5%-opacity background graphics, one card pre-highlighted by default, scattered image groups, slight rotation. OFF-CANVAS: logo and testimonial sliders bleeding past the container — for LOW-priority content only; tabs and accordions to stop information stampedes (his own accordion-gated contact page flagged as deliberately hostile filtering, 'not great' for most businesses). TEXT EFFECTS: oversized headings for creative brands, outline text ('neon' — techy brands), Apple-style colored words, marker highlights, images-in-text. TRENDY: rotating sticker badges, marquee tickers (motion demands meaningful copy), tape effects he half-disowns, vertical sidebars critiqued as neck-turning UX. The closing calibration: 'all great designs just apply a FEW tricks to an otherwise boring looking design' — and 3D/heavy animation is out of scope: 'Figma is a 2D tool,' viral animation sites have 'whole animation teams' and load-time bills.

The BALANCE lesson trains what can't be formularized: too safe and 'your designs become boring and predictable' (the CleanShot example — technically correct, 'visitors will absolutely not remember this brand'); too loose and 'people will feel lost' (the five-button-styles agency, the wedding photographer with talent but no fundamentals, the office-space site whose copy fights its imagery). Nine paired examples, differences deliberately subtle — 'design is partly science, it's partly arts. There is no perfect answer here.' His ambivalent verdicts ('beautiful... but a little bit too much') are preserved as ambivalent: expert judgment includes unresolved cases.

The STYLES lesson closes the chapter with a lookup table: corporate (safe on purpose — B2B audiences 'want to get to the point fast'), elegant (his favorite; luxury, 'the opposite of cheap'), artistic (museums; clients often hate it), minimalistic (the starter style for the unconfident), Apple-space (few well-marketed products only — never high-SKU commerce), raw ('in your face,' progressive), playful (young, 'gamish'), futuristic (light beams, glass blurs, clean 3D), trendy (futuristic+corporate, 'most popular right now'), vintage (rare, hard, heritage brands), and OUTDATED as the cautionary style (thin type, heavy gradients, ten years ago). Brutalist is deliberately skipped — 'ignores a lot of design rules.' Style selection routes back to the discovery questionnaire's brand-self-perception answers; most real sites blend. The chapter's last move defers WordPress specifics forward: 'development comes after design always.'