Copy

Microcopy is interface. The label on a button decides whether people press it, and an error message decides whether they recover or leave. These conventions keep copy short, specific and consistent, so the words stop being the thing people notice.

Buttons and linksCopy Anchor Link

• MUST start every button label with a verb.
• MUST use the same verb on the trigger, the dialog title and the confirm button: "Delete project?" then "Delete project".
• MUST label the escape route "Cancel", and make it do nothing destructive.
• SHOULD keep button labels to 1 to 3 words.
• SHOULD use the single ellipsis character …, not three full stops.
• MUST NOT use "Yes" and "No" as dialog buttons. People skim the question.

Sentence caseCopy Anchor Link

Use sentence case everywhere: page titles, headings, buttons, menu items, tabs. Capitalise only the first word and proper nouns. Material and Apple's HIG both use sentence case for most UI text; pick it and apply it everywhere.

• MUST keep product names and brands in their own casing: GitHub, iPhone, Next.js.
• MUST NOT set whole labels in capitals in the source text. If a label should look uppercase, use text-transform: uppercase so screen readers do not spell it out.

Error messagesCopy Anchor Link

• MUST show the error next to the field that caused it, and repeat a summary at the top for long forms.
• MUST keep what the user typed. Never clear a form because one field failed.
• MUST NOT blame the user ("You entered an invalid…") or joke about failures.
• MUST NOT lead with a code. If support needs one, put it last: "…try again. (Ref: 8F2A)".
• SHOULD validate on blur or submit, not on every keystroke.

Empty statesCopy Anchor Link

An empty state is the first screen many people see. Treat it as onboarding, not as an absence.

• MUST give every list, table and search a designed empty state.
• MUST offer exactly one primary action. A second one can be a text link.
• SHOULD make "no results" different from "nothing yet": "No projects match 'riso'. Clear the filter."

Numbers, dates and unitsCopy Anchor Link

const gb = 'en-GB';

new Intl.NumberFormat(gb).format(12500);                // "12,500"
new Intl.NumberFormat(gb, { style: 'currency', currency: 'GBP' }).format(9.5); // "£9.50"
new Intl.NumberFormat(gb, { notation: 'compact' }).format(12500);              // "13K"
new Intl.DateTimeFormat(gb, { dateStyle: 'medium' }).format(date);             // "29 Sept 2026"
new Intl.RelativeTimeFormat(gb, { numeric: 'auto' }).format(-1, 'day');        // "yesterday"

• MUST NOT write all-number dates such as 09/10/2026. Half the world reads it as September, half as October.
• MUST format numbers and dates with Intl, not string concatenation, so the locale does the work.
• MUST handle plurals properly: "1 item", "2 items", "No items". Intl.PluralRules helps.
• SHOULD use font-variant-numeric: tabular-nums where numbers line up or change.

One spellingCopy Anchor Link

Choose British or US English once, write it in the README, and apply it everywhere users read. This guide uses British English.

• MUST set the matching lang on <html>: en-GB or en-US.
• MUST keep code in its own spelling. CSS says color and center; your prose says colour and centre. Do not "fix" either.
• SHOULD name tokens in the code's spelling (--color-accent) and describe them in the prose spelling.
• SHOULD add a spell-check dictionary set to the chosen variant in the editor and CI.

Voice rulesCopy Anchor Link

• MUST write short sentences. One idea each.
• MUST address people as "you", and the product as "we" only when it is a person acting (support, a team).
• MUST use one word per concept: pick "Sign in" or "Log in" and never mix them.
• SHOULD use curly quotes and apostrophes (’ “ ”) in rendered text.
• SHOULD NOT use exclamation marks outside genuine celebration, such as a first successful deploy.

Why it worksCopy Anchor Link

Specific copy removes guesswork. A button that says "Delete project" cannot be misread, an error that ends with a fix gets people moving again, and one date format means nobody has to wonder which month it is. Consistency does the rest: once every label follows the same pattern, people stop reading words and start recognising them.

SourcesCopy Anchor Link