Resources
Our working digest of the 144-page book by the uxpeak team — the chapter map, the rules we adopted with page references, and the claims we fact-checked before letting them anywhere near a script.
These are working notes on The UI/UX Playbook (uxpeak.com) — a 144-page pattern book where almost every tip is a wrong-vs-right visual pair. We keep it open while building topic demos: the chapter map tells you where to look, the rules below are the ones we've adopted as house style, and the catalogue at the bottom is our seed list for interactive before/after rebuilds.
The chapter map
Eighteen chapters, front to back. Typography is the longest by far; Bonus tips is the grab-bag where half the best form and mobile advice hides.
Stunning UI can't save broken flows, and great research loses to prettier rivals.
Rank every element by user importance before designing, then encode the ranking.
Near means related — labels sit closer to their own field than to the one above.
Three killers: oversimplification, overwhelming complexity, and inverted logic.
Reading edges, grid systems, and one alignment strategy per element type.
Readability, guidance, accessibility — via color, weight, size, borders, shadows.
Cut everything the current task doesn't need; each extra item is cognitive load.
Start roomier than feels right, then tighten; build a 4px-base spacing system.
Image-first cards, element order, plan cards, and forms that mirror their output.
No element overpowers the rest; distribute color instead of flooding one hue.
One radius, one button scheme, one icon style — everywhere. Not in the TOC, but a real chapter.
Illustrated how-it-works steps and recognizable senders beat plain text.
Soft tinted shadows in a three-tier system; glassmorphism has hard limits.
Reserve the brand color for actions; keep status colors conventional.
The longest chapter: fonts, sizes, weights, line height, contrast, alignment.
Seven strategies to shrink cognitive, physical, and time effort toward zero.
Forms, destructive dialogs, empty states, thumb zones, and nav dropdowns.
Testimonials and the course upsell that closes the book.
House rules
The book's advice, regrouped around the surfaces we build. Every card keeps its page reference so you can go see the wrong-vs-right pair yourself.
Don't make all buttons the same size, color, and style. Rank one vibrant filled primary, a grey secondary at the same size, and a text-link tertiary — destructive actions as red underlined text.
Playbook p.6–7List everything on the screen by user importance first, then use color, size, position, and contrast to encode that ranking. On metric tiles: value big, label small — never the reverse.
Playbook p.9Dark heading plus grey body. A grey heading over black body inverts the hierarchy readers expect.
Playbook p.10Oversimplification that strips context until users can't tell what things do; overwhelming complexity that crams every option in; and logically inverted patterns like "Unselect items you want to remove."
Playbook p.13–15Gestalt Law of Proximity: near = related. The book's numbers — 12px from a label to its own field, 32px from the previous field. Equal 28/28 spacing is the "before" mistake.
Playbook p.12Starting cramped hides the clutter from you. Then define a spacing system on a base unit — multiples of 4 (4/8/16/24/32px). Random 19px or 31px gaps break rhythm and are unmemorable.
Playbook p.25–28Left-align long text, right-align numbers in tables, center only titles, CTAs, and short standouts. One alignment strategy per element type, consistent across screens, on a real grid.
Playbook p.17–19Element order matters even with identical styling: image, name, description, price, CTA — price-first reads as confusion. And lay out a creation form to mirror the listing it produces.
Playbook p.31, 33–34"When everything is highlighted, nothing stands out." Primary color goes on interactive elements; backgrounds default to neutrals — greys, beige, soft whites. Colored backgrounds are for splash screens and special sections.
Playbook p.65–68Pair red with an icon and an explicit message ("Enter amount bigger than $1") for color-blind users. Keep conventions — red = error, green = success — and adjust the tone to the brand, not the meaning.
Playbook p.69–70Soft spec X:0 Y:12 Blur:48, tinted to the background hue (on light purple use #CFC9DD, not grey). Three tiers: soft for buttons and cards, medium for modals, strong for dropdowns and alerts.
Playbook p.51–55Pure white cards on a pure white page look flat. Use a light-grey background with white cards, or thin light outlines to segment — both beat borderless white. Don't stack heavy borders and multi-colored section backgrounds.
Playbook p.55–60One corner radius across images, cards, and buttons; one button color scheme (never per-card "to match the image"); one icon style, filled-vs-outlined only as a state signal; uniform image shapes and equal card heights with bottom-aligned CTAs.
Playbook p.38–45It adds depth and modernity on the right surface, but fails hard on light backgrounds where it kills readability. Never trade accessibility for a trend.
Playbook p.62–64Best practice is a single font with varied weights and sizes. The book's safe workhorses: Inter, Gotham, Lato, Open Sans, San Francisco, Helvetica, Manrope, Roboto — always check the license.
Playbook p.74–75The signature rule: off-black #1A1A1A headings with #4E4E4E grey body on light; #F2F2F2 headings with #CACACA body on dark. And don't go too light — #A9A9A9 body text is too faint, #626262 is right.
Playbook p.82, 85Body copy gold standard is 16px, never below 12px for main text. Line height around 150–160% for body, tighter (~130%) for big headings: bigger text, smaller line-height. (Convention, not cited research — see the fact-check.)
Playbook p.89–91The one number in the book that maps straight onto a checkable standard — WCAG AA for normal text. Tools it names: WebAIM, Coolors.co, and the Figma "Contrast" plugin.
Playbook p.92It adds interaction cost, is error-prone, and gives false security — users can mistype twice. Use a single field with a show/hide toggle plus inline real-time strength validation while typing.
Playbook p.116–118Verification codes get 4 separate large-digit boxes, not one long field. CVC, expiry, and ZIP are sized to their content, not full-width. And never stretch a signup form across a 1440px screen — contain it in a defined box.
Playbook p.113–115, 129–130Delete is red, never green. Always provide Cancel. Cancel sits on the left, Delete on the right — the left-to-right scan means retreat left, proceed right.
Playbook p.119–121"You have no projects!" is a dead end. The good version: illustration, benefit copy, two actionable tips, and a "Create new project" CTA. Same energy for errors and 404s — say what went wrong, give a way out, keep the brand personality.
Playbook p.135–139Cognitive + physical + time effort. Seven strategies: big close targets, fewer choices, chunked information, fewer distractions, recognition over recall, streamlined steps, automated repetition.
Playbook p.97–105Color dropdown becomes visible swatches, quantity dropdown becomes a +/- stepper, Add-to-cart moves next to the stepper, and one-click "Buy now" uses stored data. From 5 clicks plus scrolls down to ~2 clicks.
Playbook p.106–108Key CTAs bottom-center where the thumb rests; top corners are "hard" reach. Task screens get no ads or promos beside the form — decorative brand graphics only if action-free.
Playbook p.127–128, 133–135Don't hide content behind "Discover 100+ recipes" cards you must tap. Expose the actual items on the first screen — immediate value, less friction, higher retention.
Playbook p.109–112The differentiator
The Playbook is a great pattern book and a terrible bibliography — it cites almost nothing formally. So before any of its research-sounding claims reach a script, an article, or a demo, they pass through this list. Green is safe to cite, amber needs care, red stays out of our mouths.
Famous but widely misapplied. Miller 1956 was partly rhetorical, and later research (Cowan 2001) puts working memory nearer ~4 chunks. Chunking is still good advice — the number is a pop-psych myth.
Playbook p.100"Reduce glare and minimize flickering, lessening eye strain" is contested empirically — the research is mixed, and some studies favor light mode for legibility in normal lighting. Dark mode as a must-have option: fine. The health claim: no.
Playbook p.68Marketing framing. The product examples in the book — Spotify, Airbnb, Medium, Disney+, Uber Eats, Pleo, Linear — are observational, not endorsements.
Playbook p.142The one claim that checks out cleanly: WCAG 2.x SC 1.4.3, Level AA for normal text. Cite the standard, not the book.
Playbook p.92Closer, larger targets are faster to hit — a real, citable law (Fitts 1954). We verify the book's exact phrasing and application before quoting it.
Playbook p.99A real Gestalt principle, fine to cite generically. But the 12px/32px label-spacing numbers are the author's, not from research — present them as house convention.
Playbook p.12The law is real (Hick 1952, Hyman 1953), but its application to menu and UI design is contested. "Fewer choices decide faster" needs a narrower claim than the book makes.
Playbook p.100Presented as "research-backed" with no citation. It traces to typographic tradition (Ruder, Bringhurst); empirical support is mixed. Same for the 30–40 characters mobile rule — a rule of thumb, no source given.
Playbook p.75–76Convention, not cited research — likewise the line-height heuristics (150–160% body, ~130% headings, below 12px harms comprehension). We follow them as craft defaults, not findings.
Playbook p.89–91The underlying NN/g eyetracking work ("How Users Read on the Web," 1997; F-pattern, 2006) is real — but the book hand-waves at it. Find and cite the actual study, not "studies confirm."
Playbook p.122No study is named. Red = error and green = success is a strong convention worth following — but it's a convention claim, not evidence.
Playbook p.70Plausible UX-community wisdom — Nielsen and Baymard have relevant material — but it's unsourced in the book. We agree with the practice; we just don't call it proven.
Playbook p.117Demo seeds
Almost every tip in the book is a wrong-vs-right visual pair, which makes it a seed list for interactive demos. Each line: the "before" mistake, the fix, and where to see it.
The UI/UX Playbook is a paid product by the uxpeak team, and it earns its keep: every rule above comes with full-bleed before/after renders across 144 pages that we can't and won't reproduce here. What we publish is our working digest — the structure, the rules we adopted, and our verdicts on its claims — not the book itself. If this page is useful, the source is more so.