Skip to content
Shortcut

Menu

Show guidance for
esc

Show guidance for

Design Checks

Questions to ask of your own screen, one area at a time. Use them when something feels off and you cannot say why.

Before you send itAI-look signals

Spacing

Is every gap a value from your scale?

Why it matters
Off-scale gaps are the most common source of a screen feeling slightly off.
Common failure
Card padding of 14 px on one card and 25 px on the next.
Quick fix
List every distinct gap on the screen, then snap each to the nearest step.
Deeper explanation

The exact scale matters less than staying on it. Consistency usually matters more than picking the theoretically perfect number.

Craft guidanceSpacing cheat sheet

Are related things closer than unrelated things?

Why it matters
Proximity is read as grouping before any label is.
Common failure
A heading sits the same distance from the block above as the block it introduces.
Quick fix
Halve the gap inside groups, or double the gap between them.

Pattern

One direction

Left, everything is the same distance apart. Right, a small gap inside each group and a larger one between them.
Deeper explanation

If two gaps differ by less than one step on your scale, people will not read them as different.

Craft guidanceSpacing cheat sheet

Alignment

Do the main elements share the same edges?

Why it matters
Shared edges are what make a layout look deliberate.
Common failure
The header logo, page title and first card start at three different x positions.
Quick fix
Draw one vertical guide at the content's left edge and move everything onto it.
Deeper explanation

Small offsets usually come from mixing padding systems: a card's inner padding versus the page's. Decide which edge is the line.

Craft guidanceLayout cheat sheet

Are icons aligned by eye, not by bounding box?

Why it matters
Icons carry uneven empty space, so mathematically centred often looks wrong.
Common failure
A play triangle that looks pushed left inside its circle.
Quick fix
Nudge by eye, then apply the same nudge everywhere that icon appears.
Deeper explanation

Check icon and label pairs too: the icon should sit on the text's visual centre, not its line box.

Craft guidanceLayout cheat sheet

Typography

How many sizes, weights and text colours are on this screen?

Why it matters
Each extra style is another level for the reader to decode.
Common failure
Seven font sizes, three of them within 2 px of each other.
Quick fix
Merge near-duplicates. Aim for four to six sizes and two or three weights.
Deeper explanation

Try solving hierarchy with weight, spacing and colour before introducing another size.

Craft guidanceTypography cheat sheet

Is body text a readable size and line length?

Why it matters
People came to read the content, not the layout.
Common failure
12 px body text running the full width of a 1400 px container.
Quick fix
Set body at 14 to 16 px and cap reading columns at about 75 characters.
Deeper explanation

Check it at 200 percent zoom as well; WCAG requires text to survive that.

Official source

Craft guidanceTypography cheat sheet

Colour

Can you say what each colour is for?

Why it matters
Colour used for decoration is no longer available to carry meaning.
Common failure
The accent colour appears on headings, icons, borders and one button.
Quick fix
Reserve the accent for interactive elements, and status colours for status.
Deeper explanation

Acceptable jobs: hierarchy, status, action, branding, grouping, feedback.

Official source

Craft guidanceColour cheat sheet

Contrast

Does all text meet contrast, including the quiet text?

Why it matters
Secondary text, placeholders and disabled-looking labels are where contrast usually fails.
Common failure
Light grey helper text at 2.8:1 on white.
Quick fix
Measure every text colour against its actual background. Darken until it passes.
Deeper explanation

The requirement is 4.5:1 for normal text and 3:1 for large text. Icons and control boundaries need 3:1.

Official sources

Craft guidanceAccessibility cheat sheet

Radius

Do cards, buttons and fields share a radius system?

Why it matters
Mixed radii are easy to see and hard to name, so the screen just feels inconsistent.
Common failure
4 px buttons, 12 px inputs, 20 px cards and a 16 px modal.
Quick fix
Choose two or three values tied to component size and apply them everywhere.
Deeper explanation

When rounded shapes nest, the inner radius should be smaller than the outer one, or the gap between them looks uneven.

Craft guidanceBorder Radius cheat sheet

Shadows

Does every shadow mark something that is actually above something else?

Why it matters
Shadow means height. Without height it is just a smudge.
Common failure
Every card on a flat page has the same soft shadow.
Quick fix
Remove shadows from anything that does not overlap other content. Keep them for menus, popovers and modals.
Deeper explanation

If a card needs separating from its background, try a border or a background change first.

Official source

Craft guidanceShadows and Borders cheat sheet

Cards

Would this still be clear without the container?

Why it matters
Each container adds a border, background, padding and radius for the eye to process.
Common failure
A settings page where every row of options is its own rounded card.
Quick fix
Replace containers with a heading and spacing. Keep a card only for a self-contained object.

Pattern

One direction

One container, with a divider inside it, in place of three nested ones.
Deeper explanation

Count nesting depth. More than one container deep is almost always removable.

Craft guidanceCards cheat sheet

Buttons

Is there exactly one obvious primary action?

Why it matters
The primary button tells people what to do next.
Common failure
Save, Export and Share are all filled buttons of equal weight.
Quick fix
Keep one filled button. Make the rest outlined, text or part of a menu.

Pattern

One direction

One action carries the weight. The others step down so the next step is obvious.
Deeper explanation

If you cannot choose the primary, the screen may be doing two jobs.

Official sources

Craft guidanceButtons cheat sheet

Do button labels say what will happen?

Why it matters
People read the button, not the dialog text above it.
Common failure
A delete confirmation with OK and Cancel.
Quick fix
Use the verb and the object: Delete project, Keep project.
Deeper explanation

An action keeps the same name through the flow: the button that says Publish leads to a message that says Published.

Craft guidanceButtons cheat sheet

Forms

Does every field have a visible label and a clear required or optional status?

Why it matters
Placeholder-only fields lose their meaning the moment someone types.
Common failure
Fields labelled only by placeholder, with asterisks on nine of ten.
Quick fix
Put labels above fields. If most are required, mark the optional ones instead.
Deeper explanation

Singapore's BD-7 control requires the status to be indicated; GOV.UK rules out asterisks. See the comparison on the Forms sheet.

Official sources

Craft guidanceForms cheat sheet

Do errors appear at the field, in words, and say how to fix it?

Why it matters
An error people cannot find or understand ends the task.
Common failure
A red border and a banner that says Something went wrong.
Quick fix
Put a specific message beside the field, keep what was typed, and summarise at the top on long forms.
Deeper explanation

Decide when validation runs for each field: on leaving the field, or on submit.

Official sources

Craft guidanceError States cheat sheet

Icons

Are icons one family, one size system and one stroke weight?

Why it matters
Mixed icon styles read as assembled from different places.
Common failure
Outlined and filled icons mixed in one toolbar at 18, 20 and 24 px.
Quick fix
Pick one library and two sizes. Use filled versions only for a selected state, if at all.
Deeper explanation

Any icon without a text label needs an accessible name, and should be one people already recognise.

Craft guidance

Responsive

What happens between your breakpoints?

Why it matters
Most real windows are not exactly 375 or 1440 wide.
Common failure
Perfect at 1440 and 375; at 900 the sidebar crushes the table.
Quick fix
Drag the frame through every width. Note where things wrap, truncate or overflow, and decide each one.
Deeper explanation

WCAG requires content to work at 320 CSS pixels wide without scrolling in two directions.

Official source

Craft guidanceResponsive & Viewports cheat sheet

Accessibility

Can you complete the task with a keyboard, and see where focus is?

Why it matters
Keyboard access is the base that screen readers, switches and voice control build on.
Common failure
A custom dropdown that opens on click only, with the focus ring removed.
Quick fix
Specify focus order and a visible focus style for every interactive element.
Deeper explanation

Check that sticky headers and banners never cover the focused element.

Official sources

Craft guidanceAccessibility cheat sheet

Are touch targets large enough for the platform?

Why it matters
Small targets cause mis-taps, and are harder still for people with motor impairments.
Common failure
16 px icon buttons with 4 px between them.
Quick fix
Give each a hit area of at least 24 px on the web, 44 pt on iOS, 48 dp on Android.
Deeper explanation

The hit area can be larger than the visible icon.

Official sources

Craft guidanceMobile cheat sheet

States

Have you designed every state, not just the filled one?

Why it matters
Undesigned states get designed in code, in a hurry.
Common failure
A polished table with no empty, loading or error version.
Quick fix
For each component list: default, hover, focus, active, disabled, loading, empty, error, success, read-only.
Deeper explanation

Empty states have three jobs: say why it is empty, what belongs here, and how to fill it.

Official source

Craft guidanceEmpty States cheat sheet

Content

Have you tried it with real, awkward content?

Why it matters
Designs break on the content nobody put in the mockup.
Common failure
Every name in the mockup is 10 characters and every number has three digits.
Quick fix
Test long names, long translated strings, very large and very small numbers, missing values and zero items.
Deeper explanation

Decide for each text element: wrap, truncate with a way to see the rest, or scale.

Craft guidanceUX Writing cheat sheet

What happens when things go wrong or take a long time?

Why it matters
Slow networks, missing permissions and half-finished tasks are normal, not rare.
Common failure
No design for a slow API, a failed save or leaving with unsaved changes.
Quick fix
Add screens for: loading longer than a second, save failed, no permission, unsaved changes, partial completion.
Deeper explanation

Destructive and bulk actions need a confirmation that names what will be affected, or an undo.

Official source

Craft guidanceError States cheat sheet

Consistency

How many versions of each thing do you have?

Why it matters
Variation that does not carry meaning is noise.
Common failure
Four button heights, five radii, seven spacing values and eight text sizes.
Quick fix
Count button heights, input heights, radii, shadows, text sizes, text colours, gaps, card paddings and icon sizes. Ask of each: is this difference intentional?
Deeper explanation

Fewer is not automatically better. A dense table and a marketing hero can rightly differ. The test is whether you can explain each value.

Craft guidanceDesign Tokens cheat sheet

AI-Look Check

Does the screen lean on patterns that read as generated?

Why it matters
Reviewers recognise the template look quickly, and it makes them trust the thinking less.
Common failure
Rounded cards everywhere, a gradient hero, pill badges and three KPI tiles.
Quick fix
Go through the AI-look signals and, for each one present, ask whether it is doing a job.
Deeper explanation

None of these patterns is wrong on its own. The problem is using them by default.

Craft guidance