The interface in detail

The product uses a small vocabulary of screen parts, deliberately: a card, a registry row, a status in plain text, one primary button per row. Learn these once and every screen you have not seen yet is already familiar.

The rail and the top bar

Two pieces of chrome on every page. The rail down the left holds the places you go; the slim bar across the top holds your state. On a phone the rail becomes a bar of tabs along the bottom, with the same items in the same order.

Page layout

Content sits in a centred column with a 16-pixel gutter. Most screens are one of three shapes:

• A registry. A full-width list of rows, one per campaign or item, each row a summary plus one action. Dashboards and campaign lists use this.
• A working screen. A wide main column with a narrower right-hand rail. The campaign overview is the clearest example: the item table on the left, Lifecycle and Announcements on the right.
• A form. A single narrow column, capped at roughly 42 characters' worth of controls so the eye does not have to travel. Every step of the campaign wizard is one.

Content is grouped into cards: a parchment panel with a soft border. A card is one subject. If two things are in different cards, they are different subjects and they save separately.

Status vocabulary

Statuses are plain coloured text, never pills or badges. Colour carries the tone and the word carries the meaning, so the screen stays readable in greyscale and to anyone who does not distinguish the hues.

Item statuses use sentence case and never a glyph. Campaign statuses, Draft, Open, In review, Complete, are small caps, which is how you tell at a glance whether a screen is talking about a campaign or a line.

A line's status is two parts. The outcome is one of five words and is the same word for everybody. Underneath it sits whose move it is, and whether a detail form is open against the line.

Row banding

Registry rows carry a 3-pixel left edge: green for open and healthy, orange for something needing you, grey for finished or dormant. It is a second channel for the same fact the status text already states, so scanning a long list is fast and nothing depends on the colour alone.

Registries and tables

Data screens (users, the supplier directory, the Received table) run on one shared table engine. Everything it does is in the URL or in your account, so a view survives a reload and travels in a link.

Two details are worth knowing. First, empty cells render a plain -, never blank, so you can tell "no value" from "column mis-aligned". Second, a label identical on every visible row is hoisted into the column header instead of repeating down the table; if you are looking for an annotation you saw on one row, check the header.

Controls

Buttons are terse verbs, and destructive ones say what they destroy. There is no icon-only control anywhere in the product: every button has a word.

Theme and time

Light mode is a warm putty page with parchment cards; dark mode is the same layout on the brand's slate. Both are complete: no screen is designed for one and tolerated in the other.

Every timestamp in the product, and in every email it sends, is rendered in the reading user's own timezone and date format, set in Your name›Settings. Times are stored in UTC and formatted per reader, so a deadline you set as "the 14th" reads as the 14th to a supplier three timezones away. The four date formats are MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD and MMM D, YYYY.

The unsaved-changes warning

If you have typed into a form and not saved it, leaving the page asks you to confirm first. That covers both ways out: a link inside the product, and closing or reloading the tab.

It deliberately stays quiet for things that change a view rather than a record, so the warning keeps meaning something: search boxes, filter bars, sorting, paging, the theme toggle and signing out. If you see the prompt, you have an edit that is not saved yet.