Every kind
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.
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.
Anything with loading, saving, error or retry states.
states [idle] · saving · saved · failed idle ──[ submit ]──► saving saving ──[ ok ]──► saved saving ──[ error ]──► failed failed ──[ retry ]──► saving [ ] marks the start. Ends: saved. SAMPLE DATA
Watch for: Read the footer: it lists ends and unreachable states.
Stages of an experience with what people do, think and feel.
Glyph kitSTAGE 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 DATAWatch 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.
Document the design system as data: scales, 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.
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.
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.
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.
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.
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