Skip to main content

UI and design language

Ticks are recorded live

Work these steps on the in-app checklist — account menu → My testing checklist — where every Pass / Fail / Skip is recorded the moment you press it, and Fail files the report for you. This page (and its PDF) is the same list for reading, printing, or working offline; if you used paper, transfer your ticks into the app afterwards.

Check these on EVERY surface you touch. They encode the house rules.

Each step: Do this, then check You should see.

Layout rules​

  • UI-01 Look at any row of controls (buttons, selects, inputs side by side). You should see: they share ONE height; nothing is 2–4 px taller than its neighbour.

  • UI-02 Search the screen for the middle-dot character (·). You should see: none in labels, counts or tooltips — parentheses, pills or words are used instead.

  • UI-03 Look at page titles. You should see: actions and status chips sit in the title row, not in banners below it.

  • UI-04 Look for persistent coloured banners. You should see: none; status is a pill, information is a toast that goes away.

  • UI-05 On a list page with one list, look at how it is filtered. You should see: filter chips, not tabs; tabs only when content types differ.

  • UI-06 Look at row actions in lists. You should see: labelled outlined buttons (View, Archive…), not bare icons.

  • UI-07 Open a create flow (project, org, webhook). You should see: it is a modal; the list stays behind it.

States​

  • UI-08 Find an empty state (no projects, no notifications, no deliveries). You should see: a short sentence saying what will fill it and how — not a blank area.

  • UI-09 Trigger an error (e.g. a bad URL). You should see: a friendly message with a way out; no stack traces, no 'Gateway Time-out' modals for a single slow request.

  • UI-10 Trigger loading (slow network). You should see: skeletons or a spinner in place; no layout jump when content arrives.

Responsive​

  • UI-11 Resize to 390 px, 820 px, 1280 px on: Home, Projects, a dashboard, Data Manager, Export preview, Profile, Org settings. You should see: no horizontal scrolling of the page; tables scroll inside their card; tab strips scroll instead of breaking words.

  • UI-12 Dark mode on the same pages. You should see: readable contrast everywhere; pills and tags keep their meaning colours.

Consistency​

  • UI-13 Compare the same component across pages (cards, pills, tables, selects). You should see: same radius, padding, font sizes; numbers right-aligned with tabular digits.