Do and don’t
Each pair uses real Marmot components. The full rules are in Principles, Easy to get wrong and Copy.
Sentence case
Put facts that appear nowhere else on the page in a quiet caption.
Uppercase strips are slow to read, and this one repeats the kind the breadcrumbs already give.
One primary action
Use one primary button and put it last. Other actions are secondary or go in a More menu.
With several primary buttons, people have to stop and work out which one matters.
Buttons say what they do
Name the action and the thing it acts on. Destructive buttons also get an icon.
A label like “OK” makes people reread the dialog to find out what will happen.
Status has an icon and a word
The word carries the meaning, and the colour backs it up.
A red dot on its own means nothing to people who can’t see red, or to a screen reader.
Lists, not walls of cards
Rows separated by thin rules are quick to scan and still work with hundreds of items.
A box around every item adds clutter and fits fewer items on screen.
Empty states say what to do next
Say what’s missing and offer the action that fixes it.
No data
This tells people something is missing but not what to do about it.
Times read like people talk
Use relative times in lists and rows, and save exact times for details.
People have to work out how long ago a machine timestamp was.
Plain words for any employee
Write so that anyone in the company understands it.
Internal terms make people learn how the system works before they can use it.