Components

A button starts an action: create, save, move a Site on, remove. The rule that matters: one primary button to a view, and everything else is secondary or ghost; an action that removes something is red and says what it removes.

A text field takes one line of free text, or several in the text area. The rule that matters: the label is visible text above the field, never only a placeholder, and the hint and the error sit under the field and are tied to it, so a screen reader reads them with it.

A select chooses one value from a list. The product draws it itself (ADR-0040): a field-looking button and a panel on the tokens, never the browser’s or the system’s list, which ignores the theme. The rule that matters: it works from the keyboard as a native select does, and the list opens above the field when there is no room below.

Checkboxes choose any of a list, radios choose one of a few, a switch turns one thing on or off. The rule that matters: the whole label is the target, the group has a legend, and a switch always carries the word for its state, so it never depends on colour or position alone.

A date picker takes a day, or a start and an end. Dates are UK ones: dd/mm/yyyy, weeks from Monday. The rule that matters: the field can always be typed in, the calendar is only the other way in, and the month and year are lists drawn by the product, with the keyboard of a Select.

A locked field shows a value that another function owns. The rule that matters: the field stays on the screen and says who owns it and who may not change it, in the same words everywhere (FR-25); it is never hidden, because a missing field only raises the question where it went.

A badge is a small pill that names a state or a category. A status badge pairs its tone with an icon and a word, so a status is never read from colour alone: an icon and a label always stand beside the colour.

An avatar is a person’s initials in a circle, in the tint of the function they work in, so one function has one colour everywhere. The rule: initials and function colour only, and the name sits beside it or in a tooltip, because the colour alone does not say who.

A card is a white panel with a hairline border, a 12 px radius and a shadow that holds one subject. The rule: a title bar of 56 px with the title at the left and the actions at the right, a body of 20 px padding, and a table runs edge to edge with no padding of its own.

A stat tile gives one figure its name, its movement and its comparison. The rule: the arrow shows the direction and the colour shows whether that is good, so a fall in days to exchange is green and a fall in Deal Health is red; the figure and the pill always carry their numbers.

The list table is how the product shows many records of one kind: the Sites, the Leads, the Accounts. The rule: it always says which of its four states it is in (loading, error, empty or filled), the record’s name is the link, and every status in a row is a chip with its icon or word.

Pagination sits at the foot of a paged table and says where the user is in it. The rule: it always shows the range and the total in words, past page 1 the buttons stay so a page number that went stale can still be left, and when everything fits on one page there are no buttons at all.

A progress bar shows how far a task has got and only grows; a meter shows a level against a range and may change band. The rule: both say their number in words beside the bar, and a band or a failure is named with an icon or a word, never left to the colour.

A tooltip is a hint that appears on hover and on keyboard focus; a popover is a small panel the user opens with a click to read more. The rule: a tooltip never holds the only way to learn something or anything to click, and a popover keeps focus, closes on Escape, hands focus back to its trigger and may hold more than a line.

Tabs switch between the views of one record or one list. They sit on a grey bar, the open one raised as a white pill, and every tab keeps the same medium weight, so choosing one never moves the others.

Breadcrumbs say where the user is and the way back up. The last crumb is the page itself: plain text, not a link, marked aria-current="page"; every crumb before it is a link one level higher.

A dropdown menu lists the actions on one thing; to choose a value for a field use a Select. The destructive action comes last, set apart by a divider and written in the danger tone with its own icon, so it is never told by colour alone, and it asks for confirmation before it acts.

A stepper shows where the user is in a sequence that has a fixed order: what is done, the step in hand and what is still to come. Each step says so in words and in its marker, a tick, a number in a ring or a plain number, so the state is never told by colour alone.

The shell is what every signed-in screen sits in: the sidebar that groups the product’s pages, the top bar that says where you are and what you can do about it, and the page. The page on show is the one item in the grey --color-nav-active; the sidebar folds to a rail of icons and remembers the choice.

An alert is a message that stays on the page, in one of four tones, beside the thing it speaks about. A toast is the same message after an action: it confirms or reports and then leaves by itself. The one rule: a tone is never colour alone, the icon and the words carry it too, and an error that needs a decision is an alert, never only a toast.

A modal stops the page to ask one thing or to say one thing. It has a title, a sentence, an optional grey box and two buttons, the safe one first. The one rule: the page behind it is untouched until the user chooses; nothing is written before the confirm button.