Templates · Knowledge cards
Design Principles Cheat Sheet Template
This design principles cheat sheet arranges a long reference list as a wall of labelled tiles, grouped so you can find the one you half-remember — layout and space, type, colour, interaction, judgement — which is what a list of thirty bullet points can never do.
What this card carries
- Five groups, colour-coded, so the eye lands on the right region before reading anything
- One principle per tile, each with a short name and a single line of what it means
- Concrete thresholds kept where they exist — the contrast ratio, the line length — rather than softened into advice
- A closing judgement group for the rules that do not belong to any one discipline
The reference list this sheet was generated from
Design principles cheat sheet — grouped for quick reference
Layout and space. Proximity: things that belong together sit together, and grouping by distance is read before any border or colour. Alignment: every element lines up with something else on purpose. Whitespace: empty space is a structural element, not leftover room. Grid: a shared column structure is what makes a set of pages feel like one product. Visual hierarchy: size, weight and position decide reading order before content does.
Type. Scale: three or four sizes, used consistently, beat a size chosen per element. Measure: 45 to 75 characters a line keeps long text readable. Line height: looser for body, tighter for headings. Contrast: distinguish levels by weight and size rather than by colour alone. Restraint: two families are usually one more than needed.
Colour. Contrast ratio: body text needs at least 4.5 to 1 against its background. Meaning: colour may reinforce a state but must never be the only signal carrying it. Palette size: one accent, used sparingly, reads as intent — five accents read as decoration. Consistency: the same colour should mean the same thing everywhere it appears.
Interaction. Feedback: every action gets a visible response within a hundred milliseconds. Affordance: things that can be acted on should look different from things that cannot. Forgiveness: destructive actions need either confirmation or an undo, and undo is the better one. Progressive disclosure: show the common path, keep the rare options one step away. Consistency: an established pattern beats a better new pattern in the same product.
Judgement. Clarity beats cleverness. Reduce until removing anything else would break it. Test with real content, because the design that only works with sample text does not work.
Why a design principles cheat sheet wants tiles rather than a list
A cheat sheet is used differently from anything else you make. Nobody reads one start to finish; they scan it for the item they cannot quite recall, which means the format's job is retrieval, not explanation. A list of thirty bullets forces a linear scan every time and gets abandoned after the second use.
A grouped wall of tiles turns that into a two-step lookup: find the region, then find the tile. Position becomes memorable after a few uses — you start reaching for the top-left corner before you have read anything — and that is the property that makes a reference card stay on the wall.
Any grouped collection fits this recipe
The structure has nothing to do with design in particular. It suits any set of short, parallel items that fall into categories: a glossary of terms for a new team, the tools in a stack grouped by what they do, keyboard shortcuts by context, the questions a support agent should ask by ticket type.
The requirement is that your entries are short and genuinely parallel. If some items need a paragraph and others need three words, the tiles come out lopsided and the wall stops being scannable — trim to one line each before you generate rather than after.
Questions
Questions about this knowledge card template
Twenty to thirty entries across four or five groups sits comfortably at a readable size. Past forty the tiles shrink below the point where the labels can be scanned, which defeats the purpose of the format.
Yes, and that is where a generated one beats a downloaded PDF. The tiles come from your text, so an internal glossary or a team-specific convention set is as easy to produce as a generic one.
No. Uneven groups draw fine — a group of three next to a group of eight is normal. What breaks the layout is uneven entries, where some tiles carry a sentence and others carry two words.
No — this is not a blank template you fill in, and the result is not an editable canvas. You paste the text you have already written, and Flowgraph renders it as a finished PNG. If something is wrong, change the source text or switch the style and generate again; each generation costs one credit.
Use this template with your own text
Not a blank template to fill in: you bring the writing, and this template's structure, style, aspect and palette are applied to it. What comes back is a finished image, not an editable canvas. One credit per image, and the first is free.