Every type
Each is drawn here by the kit itself, from its example data. All of it is sample data, and it says so on the figure.
Turn interviews, surveys and usability tests into evidence a team can read in a PR or a ticket. Every figure keeps who said it and where it came from.
A survey question answered on a five-point scale, compared across questions.
disagree│agree Easy to find export ████▒▒▒▒▒▒░░│░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██ 65% agree Trust the numbers ██████▒▒▒▒▒▒▒▒▒▒░░░░│░░░░▒▒▒▒▒▒████ 25% agree Would use it weekly ██▒▒▒▒░░░░░│░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒█ 60% agree █ strongly ▒ somewhat ░ neutral SAMPLE DATA
Watch for: Show the counts or percentages; never hide neutral answers, they change the story.
Synthesis after interviews: which themes came from how many people.
P1 P2 P3 P4 P5 P6 n can't find export ■ ■ · ■ ■ ■ 5 distrusts totals ■ · ■ · ■ · 3 wants keyboard · ■ ■ · · · 2 SAMPLE DATA
Watch for: A theme from one loud participant looks small here, which is the point. Keep participant codes, never names.
Counting notes per cluster after an affinity session.
export ■■■■■· 5 of 6 permissions ■■■··· 3 of 6 search ■■···· 2 of 6 SAMPLE DATA
Watch for: State what was counted (notes, people, sessions) in the title.
Evidence for a finding, quoted exactly.
┌─ can't find export ──────────────────────┐ │ “I looked for export in settings, then │ │ gave up and screenshotted the table.” │ │ │ │ P4, operations lead · interview 3, 12:40 │ └──────────────────────────────────────────┘ SAMPLE DATA
Watch for: Quote verbatim, cite the session and time, and never attach a real name without consent.
Usability test timings and completion.
find export ├██│█████─────┤ median 52s · 5/8 done share a view ├─│███─┤ median 21s · 8/8 done 0s 60s 120s ├─ fastest █ middle half │ median ─┤ slowest SAMPLE DATA
Watch for: With fewer than about eight people, report the range and the completions, not a confident median.
How a journey felt, stage by stage.
+2 █ +1 █ █ 0 ··················█········································· -1 -2 █ discover sign up import first chart share SAMPLE DATA
Watch for: The score is a judgement from research, say whose and from what.
Funnels, cohorts, test results and the everyday charts. Numbers are always printed next to the bars, so a reader or a model reads them instead of estimating lengths.
Steps people drop out of.
visited ██████████████████████████████ 12,400 100% signed up ██████████████▊ 6,100 49% ▼ 49% kept activated █████▋ 2,300 19% ▼ 38% kept paid █▌ 610 5% ▼ 27% kept SAMPLE DATA
Watch for: Use the same time window for every step.
Retention by start month or week.
M0 M1 M2 M3 Jan 120 ██ ▓▓ ▒▒ ▒▒ Feb 140 ██ ▓▓ ▒▒ Mar 98 ██ ▒▒ █ 80%+ ▓ 60%+ ▒ 40%+ ░ under 40% SAMPLE DATA
Watch for: Newer cohorts have fewer periods; blank is not zero.
A test result with confidence intervals.
control ├────█───┤ 4.1% (3.6%–4.6%) new empty state ├────█────┤ 5.3% (4.8%–5.9%) 3.0% 5.0% 7.0% The intervals don't overlap. SAMPLE DATA
Watch for: Overlapping intervals mean no clear difference yet; don't round that into a win.
A few metrics at a glance with their trend and change.
metric trend now change weekly active ▁▂▄▃▅█ 1010 ▲ 23% time to first chart █▇▃▁ 6 min ▼ 30% support tickets ▃▁▄█ 45 ▲ 13% SAMPLE DATA
Watch for: Up isn't always good: time and tickets should go down. Say which way is better.
Ranked quantities.
Design QA ████████████████████████ 42 Handoff █████████▊ 17 Research █▊ 3 Copy ▎ <1 SAMPLE DATA
Watch for: Sort first; one scale per document; value as text on every row.
Measured values with a projection in the same bar.
Jul ███████ 1.0× Aug █████████████████ 2.3× Sep ██████████████████████████████ 4.1× Oct ██████████████████░░░░░░░░░░░░░░░░░░ on pace for ~5× ░ = projected at the current pace SAMPLE DATA
Watch for: Say how the projection was made in the legend line.
Usage against a cap or quota.
[ █████████████████████████░░░░░ ] 84% of the cap SAMPLE DATA
Watch for: Over 100%, the bar stays full and the word over says the rest.
A trend inside a sentence or a table cell.
requests ▁▁▁▂▃▃▃▅▆▅▇█ 3 → 21 SAMPLE DATA
Watch for: Print the first and last values; a sparkline has no axis.
Density over a grid, such as activity by weekday.
M T W T F S S wk 1 ░░▒▒████▓▓ wk 2 ░░▒▒▒▒████▒▒ wk 3 ░░▓▓▓▓▒▒░░ SAMPLE DATA
Watch for: Five levels is the limit people can tell apart.
Yes or no per day.
· · · · · ■ ■ ■ · · · · ■ ■ · SAMPLE DATA
Watch for: Put date labels over the exact columns they name.
Two versions of the same measures, side by side.
MEASURE BEFORE AFTER lines moving ██████████ 100% ██░░░░░░░░ 23% build time ███░░░░░░░ 2.7 s ████████░░ 7.7 s SAMPLE DATA
Watch for: Every row needs its own unit in the text; ten cells is enough.
Agree on paths, states and journeys before anyone designs a screen. Text flows are quick to change in review and easy for an agent to turn into routes and state.
A flow with decisions and failure paths.
┌─────────────────┐ │ open export │ └────────┬────────┘ │ ▼ ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐ ┌─────────────────┐ ┆ has data? ├─── no ───►│ empty state │ └┄┄┄┄┄┄┄┄┬┄┄┄┄┄┄┄┄┘ │ → import data │ │ yes └─────────────────┘ ▼ ┌─────────────────┐ │ choose format │ └────────┬────────┘ │ ▼ ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐ ┌───────────────────┐ ┆ file ready? ├─── no ───►│ show error │ └┄┄┄┄┄┄┄┄┬┄┄┄┄┄┄┄┄┘ │ → choose format │ │ yes └───────────────────┘ ▼ ╔═════════════════╗ ║ download ║ ╚═════════════════╝ SAMPLE DATA
Watch for: Every decision's no-branch needs a destination, or it's a dead end nobody designed: `"to": "Enter email"` loops back, `"to": "end"` ends the flow there. Labels longer than 24 cells wrap onto two lines; write them in full.
Anything with loading, saving, error or retry states.
┌─────────────── error ───────────────┐
│ ▼
┏━━━━━━━━━┓ submit ┌─────────┐ ok ╔═════════╗ ┌─────────┐
┃ idle ┃─────────►│ saving │─────────►║ saved ║ │ failed │
┗━━━━━━━━━┛ └─────────┘ ╚═════════╝ └─────────┘
▲ │
└─────────────── retry ───────────────┘
The heavy box is the start. Ends: saved.
SAMPLE DATAWatch for: Read the footer: it lists ends and unreachable states.
Stages of an experience with what people do, think and feel.
STAGE DISCOVER IMPORT FIRST CHART ──────────────── ──────────────── ──────────────── doing Finds the tool Uploads a CSV Picks a template through a with 4,000 rows and edits labels colleague thinking “Will this “Why did my “Oh, that was replace my dates break?” quick” sheet?” feeling ▲ good ▼▼ bad ▲▲ great SAMPLE DATA
Watch for: Thoughts are quotes or close paraphrases from research, not invented.
A short linear sequence.
┌─────────┐ ┌──────┐ ┌───────┐ ┌─────────┐ │ request │ ──► │ plan │ ──► │ build │ ──► │ preview │ └─────────┘ └──────┘ └───────┘ └─────────┘ SAMPLE DATA
Watch for: Four or five boxes per row at most.
Sitemaps, IA, file layouts, spec folders.
Settings ├── Profile ├── Notifications │ ├── Email │ └── Digest └── Billing ├── Plan └── Invoices SAMPLE DATA
Watch for: Past three levels deep it stops being readable; collapse the rest.
Roadmaps, priorities, ownership and decisions in a form that lives next to the work and diffs when plans change.
Now, next, later, or any set of columns.
┌─ NOW ──────────────┬─ NEXT ─────────────┬─ LATER ────────────┐ │ · Export to CSV │ · Saved views │ · Scheduled │ │ · Fix date parsing │ · Keyboard │ reports │ │ on import │ shortcuts for │ │ │ │ tables │ │ └────────────────────┴────────────────────┴────────────────────┘ SAMPLE DATA
Watch for: Keep items short enough to fit two lines.
Choosing what to do first.
impact high │ quick wins │ big bets │ [1] │ │ │ [3] │ │ [2] │ │ │ │ │────────────────────┼──────────────────── │ │ │ │[4] │ [5] │ │ │ low │ fill-ins │ money pits └───────────────────────────────────────── low high effort [1] Fix date parsing [2] Saved views [3] New onboarding [4] Dark mode [5] Rename tabs SAMPLE DATA
Watch for: Scores are estimates; write who scored them.
Who does what, in what order, across roles.
DESIGNER ENGINEER REVIEWER ──────── ──────── ──────── prototype ──────► read spec build ──────────► review x missing states revise ◄────────────────────────────┘ spec v2 ────────► build ──────────► ok, approve SAMPLE DATA
Watch for: One action per row; returns go left once.
Release plans, animation tracks, anything over time.
research ████████································ 0 wk–2 wk design ····████████████························ 1 wk–4 wk build ············████████████████████········ 3 wk–8 wk beta ····························████████···· 7 wk–9 wk 0 wk 5 wk 10 wk SAMPLE DATA
Watch for: One scale for all rows; print start and end as text.
A legend for status across documents.
████████████ shipped ▓▓▓▓▓▓▓▓▓▓▓▓ in review ▒▒▒▒▒▒▒▒▒▒▒▒ in progress ░░░░░░░░░░░░ supporting not yet SAMPLE DATA
Watch for: Keep the same mapping in every document of a project.
Recording what was decided and why.
┌───────┬────────────────────────────┬────────────────────────────┬────────┐ │ Date │ Decision │ Why │ Owner │ ├───────┼────────────────────────────┼────────────────────────────┼────────┤ │ Oct 2 │ CSV first, not PDF │ 8 of 10 asks were CSV │ Design │ │ Oct 9 │ Parse dates in the browser │ Server change is 3 sprints │ Eng │ └───────┴────────────────────────────┴────────────────────────────┴────────┘ SAMPLE DATA
Watch for: Write the why as evidence, not opinion.
Screens built from a small set of primitives. The same primitive names map to real components in the design-system map, which is what lets a text wireframe become a prototype and then production code without reinterpretation.
A layout proposal: content, order and controls before visuals.
╔═ Settings ═════════════════════════════════╗ ║ Profile │ Notifications │ Billing ║ ║ ━━━━━━━━━━━━━━━ ║ ║ ║ ║ Email me when a report is ready [ ■] on ║ [1] ║ Weekly summary [■ ] off ║ ║ Digest day [ Monday ▼] ║ ║ Send to [team@example.com_______________] ║ ╠════════════════════════════════════════════╣ ║ [ Cancel ] [[ Save ]] ║ [2] ╚════════════════════════════════════════════╝ [1] Off by default for new teams. [2] Save is disabled until something changes. SAMPLE DATA
Watch for: One screen per sketch; notes go outside the frame; use only the primitives so the map can translate them.
The same screen at two widths.
Desktop Mobile ╔═ Report ═════════════════════════════╗ ╔═ Report ═════════════╗ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░[ chart ]░░░░░░░░░░░░░░ ║ ║ ░░░░░[ chart ]░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ║ ║ ░░░░░░░░░░░░░░░░░░░░ ║ ║ Revenue by month, last 12 months. ║ ║ [[ Export ]] ║ ║ [[ Export ]] [ Share ] ║ ╚══════════════════════╝ ╚══════════════════════════════════════╝ SAMPLE DATA
Watch for: Show what moves or disappears, not just a narrower copy.
An app page with a header, a sidebar and content: admin pages, settings apps, anything with navigation. The default for a screen.
╔═ Acme ═══════════════════════════════════════╗ ║ > Search ║ ╠══════════════╦═══════════════════════════════╣ ║ █ Projects ║ PROJECTS ║ ║ Reports ║ name owner ║ ║ ║ ───────────────────────────── ║ ║ ║ Checkout Mia ║ ║ ║ Billing Ana ║ ╚══════════════╩═══════════════════════════════╝ SAMPLE DATA
Watch for: Sidebar 10 to width − 24 cells (18 by default); regions take the screen primitives.
Galleries, template pickers, grids of projects.
╔═ Templates ══════════════════════════════════╗ ║ ┌─ Readout ─────────┐ ┌─ Status ──────────┐ ║ ║ │ ░░░░[ image ]░░░░ │ │ ░░░░[ image ]░░░░ │ ║ ║ └───────────────────┘ └───────────────────┘ ║ ╚══════════════════════════════════════════════╝ SAMPLE DATA
Watch for: Up to 6 cards, 2 or 3 to a row by width; keep each card to a few rows.
Inboxes, master and detail, anything where picking an item shows it.
╔═ Inbox ════════╦═════════════════════════════╗ ║ █ Mia ║ Ship the new copy Monday? ║ ║ Sam ║ [[ Reply ]] ║ ║ Ana ║ ║ ╚════════════════╩═════════════════════════════╝ SAMPLE DATA
Watch for: Mark the picked item with selected (its index or text).
A dialog over a page: confirm, delete, a short form.
╔═ Projects ═══════════════════════════════╗ ║░░░░░░┌─ Delete project? ──────────┐░░░░░░║ ║░░░░░░│ [ Cancel ] [[ Delete ]] │░░░░░░║ ║░░░░░░└────────────────────────────┘░░░░░░║ ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║ ╚══════════════════════════════════════════╝ SAMPLE DATA
Watch for: The page shows dimmed behind it; make the page tall enough for the dialog.
Document the design system as data: scales, colour, contrast, component states, layers and tokens. Contrast is computed, not eyeballed.
Documenting spacing tokens.
space-1 █ 4px space-2 ██ 8px space-3 ████ 16px space-4 ██████ 24px space-5 ██████████ 40px One █ is 4px. SAMPLE DATA
Watch for: State the unit per cell under the chart.
Documenting type sizes and line heights.
display ████████████████████████████ 44/48 heading ██████████████ 22/28 body ██████████▏ 16/24 caption ███████ 11/16 SAMPLE DATA
Watch for: Sizes in one unit; bars compare size, not weight.
Checking colour pairs against WCAG 2 thresholds.
3 4.5 7 21:1 ink on paper ██████████████████████████████████████▋··· 19.3:1 AAA muted on paper █████▌┊··┊····┊··························· 2.7:1 fails link on panel ██████████····┊··························· 5.0:1 AA SAMPLE DATA
Watch for: AA needs 4.5:1 for body text and 3:1 for large text and UI parts.
Showing a tonal scale: every step of each hue, with its contrast on the page.
Blue Red Green Grey 50 ██ #eef3ff 1.1 ██ #fff1ee 1.1 ██ #ecf8f1 1.1 ██ #f7f6f1 1.1 100 ██ #dbe6ff 1.3 ██ #ffdfd8 1.3 ██ #d3f0df 1.2 ██ #efede6 1.2 200 ██ #b7ccfb 1.6 ██ #fbbcae 1.6 ██ #a6dfbf 1.5 ██ #dcdad2 1.4 300 ██ #8eaaf2 2.3 ██ #f2917c 2.3 ██ #6fc799 2.0 ██ #c2c0b7 1.8 400 ██ #6487e6 3.4 ██ #e2664c 3.4 ██ #3fa875 3.0 ██ #a3a199 2.6 500 ▲ ██ #4269d6 5.0 ▲ ██ #c94a30 4.7 ██ #24895b 4.4 ██ #85837b 3.8 600 ██ #3152b8 6.9 ██ #a83a24 6.4 ▲ ██ #1b6e49 6.2 ▲ ██ #6b6a64 5.4 700 ██ #263f8f 9.6 ██ #842d1c 8.8 ██ #155538 8.8 ██ #504f4a 8.2 800 ██ #1c2d66 13.0 ██ #5e2014 12.4 ██ #0f3c28 12.4 ██ #33332f 12.7 900 ██ #121c40 16.6 ██ #3b140c 16.3 ██ #092519 16.3 ██ #151513 18.3 Contrast on the page, #ffffff. ▲ first step that reads as words: 4.5 to 1. SAMPLE DATA
Watch for: Steps must get steadily lighter or darker. Four hues fit in 80 cells; split a bigger palette into figures by family.
Saying what each colour is for, with its light and dark values and a contrast verdict.
role token light #f7f6f1 dark #0d0d0c words --gk-ink ██ #151513 16.9 ██ #f2f0e8 17.0 AAA secondary --gk-muted ██ #6b6a64 5.0 ██ #9a988f 6.7 AA problems --gk-flag ██ #651b13 11.3 ██ #dc7351 6.1 AA passes --gk-ok ██ #2f743e 5.3 ██ #89f1b5 14.2 AA data --gk-data ██ #151513 16.9 ██ #f2f0e8 17.0 ok lines --gk-frame ██ #a3a199 2.4 ██ #5c5b56 2.9 ok Words need 4.5 to 1 (7 for AAA), marks 3, lines 1.5.
Watch for: Say the use: words need 4.5 to 1, marks 3, lines 1.5. A colour that passes on light can fail on dark.
Which component states exist, are in progress or missing.
rest hover focus pressed disabled loading primary ██ ██ ██ ██ ▒▒ ░░ secondary ██ ██ ▒▒ ░░ ░░ text ██ ██ ██ ██ █ done ▒ in progress ░ missing blank: doesn't apply SAMPLE DATA
Watch for: Blank means the state doesn't apply; missing is ░.
z-index and surface order.
dialog z 400 ████████████ dimmer z 300 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ card z 100 ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ page z 0 ──────────────────────── SAMPLE DATA
Watch for: Name what each layer is for, not just its number.
Listing tokens with their values and uses.
┌─────────────┬─────────┬────────────────────────────────┐ │ Token │ Value │ Use │ ├─────────────┼─────────┼────────────────────────────────┤ │ ink │ #080808 │ text, borders, primary buttons │ │ paper │ #fbfbf8 │ page background │ │ signal-fail │ #b8421f │ errors only │ └─────────────┴─────────┴────────────────────────────────┘ SAMPLE DATA
Watch for: Inside Markdown, a Markdown table is easier to edit.
Tables in places without Markdown: terminals, code comments.
┌─────────┬───────────┬─────────┐ │ Name │ Min width │ Columns │ ├─────────┼───────────┼─────────┤ │ phone │ 0 │ 4 │ │ tablet │ 700 │ 8 │ │ desktop │ 1180 │ 12 │ └─────────┴───────────┴─────────┘ SAMPLE DATA
Watch for: In Markdown, use a Markdown table.
Measurements and checklists for handing work to engineering and checking what came back.
Spacing and widths for handoff.
│◄ 16 ►│◄────────────── content 320 ───────────────►│◄ 16 ►│ SAMPLE DATA
Watch for: Widths are proportional but labels carry the real numbers.
Design QA before release.
2 of 5 done [ ██░░░ ] █ done Spacing matches the 8px scale ▒ in progress Focus states on every button to do Empty state copy x blocked Icon set (waiting on brand) █ done Dark theme contrast SAMPLE DATA
Watch for: Blocked items need a reason in words.
The parts of a component for a spec page or handoff: what each numbered part is, its token or rule, and which parts are optional.
┌ 1 ───────────────────────────────────────────────────────┐ │ ┌ 2 ┄┄┄┄┄┐ ┌ 3 ────────────────────────┐ ┌ 4 ┄┄┄┄┄┄┐ │ │ ┆ Icon ┆ │ Input text │ ┆ Clear ┆ │ │ └┄┄┄┄┄┄┄┄┘ └───────────────────────────┘ └┄┄┄┄┄┄┄┄┄┘ │ └──────────────────────────────────────────────────────────┘ 1 Container radius 8, border 1, padding 12 2 Icon icon 20 optional 3 Input text body 16, 1 line 4 Clear icon 20, when filled optional ┄ dashed edge: an optional part SAMPLE DATA
Watch for: Name parts as the design system does and put the rule in spec, not the look. Up to 8 parts; parts side by side take a row, stacked parts (a card) take direction column. Sizes are proportions, so real measurements belong in a redline.
Two versions of the same measures, side by side.
MEASURE BEFORE AFTER off-scale gaps ██████░░░░ 31 █░░░░░░░░░ 2 custom colours ████░░░░░░ 18 ░░░░░░░░░░ 0 SAMPLE DATA
Watch for: Every row needs its own unit in the text; ten cells is enough.
Write motion down as a decision before anyone animates it: why it moves, what starts it, how long, which curve, and what reduced motion shows instead. The HTML form plays it.
Deciding a single motion before building it.
┌─ Toast enters ───────────────────────────────────────┐ │ why Confirm the save without taking focus │ │ when Save succeeds │ │ change below the edge, transparent → in place, │ │ opaque │ │ timing ▕████████············▏ 200ms │ │ easing █▆▅▄▃▂▁▁ reveal │ │ reduced Appears in place, no movement; stays for │ │ the same time │ └──────────────────────────────────────────────────────┘ SAMPLE DATA
Watch for: No intent, no animation: if 'why' is empty, cut it. Reduced motion is designed, not 'none'.
One transition, property by property.
opacity ███████████████████████······· 0ms–150ms 0 → 1 transform ██████████████████████████████ 0ms–200ms y 8px → y 0 shadow ···············███████████████ 100ms–200ms none → md 0ms 100ms 200ms SAMPLE DATA
Watch for: Animate transform and opacity; anything else needs a measured reason.
Several elements entering in sequence.
card 1 ██████████████████······················ 0ms–200ms card 2 ········██████████████████·············· 91ms–291ms card 3 ···············██████████████████······· 164ms–364ms card 4 ····················██████████████████·· 218ms–418ms card 5 ······················██████████████████ 240ms–440ms 0ms 220ms 440ms 5 × 200ms, delays follow ease-out. Done at 440ms. SAMPLE DATA
Watch for: Cap the total: past about 400ms the last item feels late.
Seeing an easing curve frame by frame.
0ms █······························· 30ms ······█························· 60ms ············█··················· 90ms ·················█·············· 120ms ·····················█·········· 150ms ·························█······ 180ms ····························█··· 210ms ······························█· 240ms ·······························█ start end SAMPLE DATA
Watch for: Rows are equal slices of time, so bunched marks mean slow movement.
Comparing durations and easing, today against proposed.
duration easing speed today ▕████████············▏ 200ms ease ▅█▇▅▄▃▂▁ proposed ▕██████··············▏ 150ms reveal █▆▅▄▃▂▁▁ 0·········250········500ms SAMPLE DATA
Watch for: Keep the 500ms scale fixed across a report; a + is usually the finding.
Documenting easing tokens.
token speed curve use for ease-standard ▆█▄▃▂▂▁▁ cubic-bezier(0.2, 0, 0, 1) most UI ease-reveal █▆▅▄▃▂▁▁ cubic-bezier(0.33, 1, 0.68, 1) entrances ease-exit ▂▄▅▆▆▇▇█ cubic-bezier(0.4, 0, 1, 1) leaving the screen SAMPLE DATA
Watch for: Three or four curves cover most products.
Processes over time: work moving between stages, waiting, returning and finishing.
What appears while a request finishes.
┌────────────────────────────────┐ TIME │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ ╷ ╷ ╷ ╷ │ ░░▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░ │ ═════════════════════════════════▓ │ ▒▒▓▓▓▓▓▓▓▒▒▒▒░░░░░░░░░░░░░▒▒▒▒ │ 0 500 1000 1500 │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░░░░▒▒▒▓▓▓▓ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓ │ │ │ ▓ 0ms tap │ Weekly report │ │ │ ▓ 100ms skeleton │ Signups up 12% on last week, │ │ most of it from the new invite │ ▓ 700ms text │ flow. Activation is flat. │ │ │ ▓ 1100ms image └────────────────────────────────┘ showing: image SAMPLE DATA
Watch for: Keep phases in time order.
Work waiting between limited columns.
READY 7 DESIGN 4/4 REVIEW 2/2 BUILD 0/4 DONE 12 ──────────── ──────────── ──────────── ──────────── ──────────── ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▲ Review holds everything up SAMPLE DATA
Watch for: State each column's limit and time per card.
Work that returns to an earlier stage.
8 came back 29 shipped ▓────────┐ ┌─────·░▒▓ ┌────────┐ ░░░░░░░░░░ ▒ DESIGN │░▒▓─────►│ BUILD │░▒▓─░▒▓─►│ QA │░▒▓─────►░ SHIP ░ ░·───────┘ └────────┘ └─▓▒░·───┘ ░░░░░░░░░░ ▲ │ │ │ │ │ └─────▓▒░──────────┘ about 1 in 3 comes back from QA SAMPLE DATA
Watch for: Keep the return share grounded in a source.
A state machine with a path to play.
Editing
┌───────────── no network ────────────┐
│ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ EDITING │── save ─►│ SAVING │─── ok ──►│ SAVED │ │ FAILED │
└─·▓▒░·───┘ └─────────┘ └─────────┘ └─────────┘
▲ ▲ │ │
│ └─────────────── retry ───────────────┘
│ │
└──────────────── type ───────────────┘
SAMPLE DATAWatch for: Every step in the path needs a transition.
A staged release with a guard metric.
1% 5% 25% 50% 100% ROLLOUT ▓━━━━━━━━━━━▓────────────┼───────────┼───────────┼ PEOPLE ··············▓······················▓············ 5% on ·········▓··········▓····························· ·················································· ········▓·················▓···▓▓········▓·▓······· ERROR RATE limit 2% ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒▒▒▒▒▒ ▒▒ ▒▒▒▒▒ ▒▒▒▒▒▒▒ ▒▒▒▒▒▒ holding at 5%, watching SAMPLE DATA
Watch for: A breach must name one of the stages.
Whole deliverables on one page: a readout, a dashboard, a PR summary, a design review or a status update. Fill the slots with a sentence, short lists and ordinary specs; code places everything within 80 cells, putting narrow figures side by side and stacking the rest. Figures without their own source use the layout's. Export to HTML or PDF for a finished page in the kit's type; a file holding a list of layouts exports as one document, a layout to a page. Pick by the ask: a write-up or one-pager is a readout; weekly numbers a dashboard; what a PR changed a prSummary; choosing between options a designReview; where work stands a statusUpdate. When unsure, use a readout.
A one-pager on a test or a study: headline, up to 3 summary lines, up to 4 figures of evidence, next steps.
The new empty state lifts first-chart conversion from 4.1% to 5.3%. SUMMARY ──────────────────────────────────────────────────────────────────────── 1 The intervals no longer overlap. 2 Rollout is at 62% of accounts. EVIDENCE ─────────────────────────────────────────────────────────────────────── Conversion to first chart control ├────█───┤ 4.1% (3.6%–4.6%) new ├────█────┤ 5.3% (4.8%–5.9%) 3.0% 5.0% 7.0% The intervals don't overlap. Rollout [ ████████████░░░░░░░░ ] 62% of the cap NEXT ─────────────────────────────────────────────────────────────────────────── → Ship to all accounts on 28 Oct. SAMPLE DATA
Watch for: The headline is the finding in one sentence, not a topic.
Weekly numbers at a glance: 2 to 6 tiles and a note.
Weekly active Seats used active ▁▂▄▃▅█ 820 → 1010 [ █████████████░░░ ] 84% of the cap Open tickets tickets █▇█▄▃▁ 61 → 45 Tickets fell after the onboarding fix. SAMPLE DATA
Watch for: Tiles keep their natural width and share a row when they fit in 80 cells: narrow types (meter, sparkline) pack two or three to a row.
What a pull request changed: one line, before and after side by side, checks, risks.
Signup drops from five steps to three. BEFORE AND AFTER ─────────────────────────────────────────────────────────────── Before ┌───────┐ ┌──────────┐ ┌──────┐ ┌──────┐ │ Email │ ──► │ Password │ ──► │ Name │ ──► │ Team │ └───────┘ └──────────┘ └──────┘ └──────┘ │ ▼ ┌──────┐ │ Done │ └──────┘ After ┌───────┐ ┌──────┐ ┌──────┐ │ Email │ ──► │ Team │ ──► │ Done │ └───────┘ └──────┘ └──────┘ RISKS ────────────────────────────────────────────────────────────────────────── · Team invites now happen after signup. SAMPLE DATA
Watch for: Before and after use the same type and scale; each up to 38 cells wide sits side by side.
Choosing between 2 or 3 options: the question, the options, a recommendation, open questions.
Should filters sit in a sidebar or above the table? OPTIONS ──────────────────────────────────────────────────────────────────────── Sidebar: tasks done Above: tasks done [ ███████████░ ] 88% of tasks [ ████████░░░░ ] 63% of tasks RECOMMENDATION ───────────────────────────────────────────────────────────────── Use the sidebar: more people finished every task. OPEN QUESTIONS ───────────────────────────────────────────────────────────────── · Does the sidebar fit at tablet width? SAMPLE DATA
Watch for: Give each option a title; draw them with the same type. Options up to 38 cells wide sit side by side.
Where work stands: the period, progress figures, done, next and blocked lists.
13 to 24 October. PROGRESS ─────────────────────────────────────────────────────────────────────── Stories done [ ███████████████░░░░░ ] 75% of 12 DONE ─────────────────────────────────────────────────────────────────────────── · Empty state shipped to 62%. NEXT ─────────────────────────────────────────────────────────────────────────── → Full rollout on 28 Oct. BLOCKED ──────────────────────────────────────────────────────────────────────── x Dark mode contrast: waiting on new tokens. SAMPLE DATA
Watch for: Each blocked item says why in words.
A process over time. Each plays on screen and keeps a still that makes the same point, for reduced motion, print and docs.
┌────────────────────────────────┐ TIME │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ ╷ ╷ ╷ ╷ │ ░░▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░ │ ═════════════════════════════════▓ │ ▒▒▓▓▓▓▓▓▓▒▒▒▒░░░░░░░░░░░░░▒▒▒▒ │ 0 500 1000 1500 │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░░░░▒▒▒▓▓▓▓ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓ │ │ │ ▓ 0ms tap │ Weekly report │ │ │ ▓ 100ms skeleton │ Signups up 12% on last week, │ │ most of it from the new invite │ ▓ 700ms text │ flow. Activation is flat. │ │ │ ▓ 1100ms image └────────────────────────────────┘ showing: image
READY 7 DESIGN 4/4 REVIEW 2/2 BUILD 0/4 DONE 12 ──────────── ──────────── ──────────── ──────────── ──────────── ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▲ Review holds everything up
8 came back 29 shipped ▓────────┐ ┌─────·░▒▓ ┌────────┐ ░░░░░░░░░░ ▒ DESIGN │░▒▓─────►│ BUILD │░▒▓─░▒▓─►│ QA │░▒▓─────►░ SHIP ░ ░·───────┘ └────────┘ └─▓▒░·───┘ ░░░░░░░░░░ ▲ │ │ │ │ │ └─────▓▒░──────────┘ about 1 in 3 comes back from QA
Editing
┌───────────── no network ────────────┐
│ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ EDITING │── save ─►│ SAVING │─── ok ──►│ SAVED │ │ FAILED │
└─·▓▒░·───┘ └─────────┘ └─────────┘ └─────────┘
▲ ▲ │ │
│ └─────────────── retry ───────────────┘
│ │
└──────────────── type ───────────────┘
Visited ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒ 12,400 · ▒░ ▓ Signed up ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒ 6,100 49% ░ ▓ ▓ Activated ▒▒▒▒▒▒▒▒ 2,300 38% ▒ Paid ▒▒ 610 27%
1% 5% 25% 50% 100% ROLLOUT ▓━━━━━━━━━━━▓────────────┼───────────┼───────────┼ PEOPLE ··············▓······················▓············ 5% on ·········▓··········▓····························· ·················································· ········▓·················▓···▓▓········▓·▓······· ERROR RATE limit 2% ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒▒▒▒▒▒ ▒▒ ▒▒▒▒▒ ▒▒▒▒▒▒▒ ▒▒▒▒▒▒ holding at 5%, watching
day 14 of 14 · 5,900 people
control ├────█───┤ 4.1% (3.6%–4.6%)
new empty state ├────█────┤ 5.3% (4.8%–5.9%)
3.0% 5.0% 7.0%
The intervals don't overlap. They overlapped until day 10.