The pill you press. One primary per view carries the orange; everything else steps down to outline, secondary or ghost.

Joins related actions into one pill so they read as a set. Each button keeps its own focus stop and its own label.

A single on or off button that stays pressed. Use it for a view option that applies at once, such as pinning or muting.

A quiet segmented control for choosing one option, or several, from a short set. Arrow keys move between the options.

Copies one exact value in one press, then confirms with a tick and a polite announcement. Use it beside tokens, IDs and commands.

A menu of actions behind one trigger. Arrow keys move through the items, Escape closes it and returns focus to the trigger.

Label, control, hint and error in one wrapper. Field wires the ids for you, so screen readers hear the label, the description and the error with the control.

A 44px single-line text field with a 3:1 control border. Pair it with Field or Label so it always has a name.

Multi-line text with the same border, focus and invalid recipe as Input. It grows with its content, so short notes stay short.

A plain styled label for when you are not using Field. Point it at the control with htmlFor, or wrap the control.

An input or textarea with icons, fixed text and small actions inside the same border. Clicking an addon focuses the field.

An independent yes or no that applies when the form is submitted. The ticked box is the accent with an ink mark; use Switch for settings that apply at once.

One choice from a short, visible list. Arrow keys move and select, Tab leaves the group, and disabled options are skipped.

An on or off setting that takes effect the moment it flips. If the change waits for a Save button, use Checkbox instead.

Pick one value from a fixed list that is too long for radios. The trigger matches Input; the highlighted option wears the accent wash.

A searchable picker for long lists where the value must be one of the options. Type to filter, arrow to highlight, Enter to choose.

A text field with suggestions. What people type is the value, so new entries are fine; reach for Combobox when the value must come from the list.

A 44px trigger that opens the kit Calendar in a Popover. Choosing a day closes it and returns focus to the trigger.

A month grid for choosing days in place. The selected day is the accent as a fill; use DatePicker when the calendar should sit behind a field.

A modal for a short, focused task that needs the reader's full attention, such as editing one record. It traps focus, closes on Escape and returns focus to the trigger.

A confirmation that interrupts on purpose. Use it before something that is hard to undo; focus starts on Cancel so a stray Enter does no harm.

A panel that slides over the page for detail or a quick edit without losing the list behind it. It behaves like a dialog: focus stays inside and Escape closes it.

A small raised panel anchored to its trigger, for a quick setting or a bit of extra context. It is not modal, so the page stays usable around it.

A preview that opens when the pointer rests on a link or keyboard focus reaches it. Keep anything essential on the page too, because touch screens never hover.

A short label in the ink and paper inversion, for icon buttons and shortcuts. It opens on hover and on keyboard focus, so it must never hold the only copy of something important.

A searchable list of things to go to or do, filtered as you type and driven by the arrow keys. Place it inline in a picker, or open it as a palette from anywhere.

A brief message about something that just happened, raised from anywhere with toast.add. Mount one Toaster beside the app's content; this site already has one.

A labelled status with a leading dot. The label always carries the meaning, so colour is never the only signal.

A small pill for counts, tags and categories. For a status, reach for Status badge so the meaning has a dot and a tone.

A flat notice inside the page about something the reader should know now. Use a toast for something that just happened.

A turning ring that says work is happening. It is a status named Loading, so screen readers hear it without extra markup.

A placeholder on the sunken surface that holds the shape of content while it loads. It pulses, and holds still under reduced motion.

Ready-made loading layouts for a table, a card and a description list, built from the same parts as the real thing so the swap does not shift the page.

Tells the reader why a place is empty and what to do next. Neutral uses a dashed border; the tones turn it into a notice.

Says what failed and offers Try again in place of the content that could not load. It is an alert, so screen readers hear it when it appears.

Shown when the reader lacks a grant. It names the grant and the person who can give it, so the next step is obvious.

A bordered surface that groups one record or one task. Reach for it when a block of content needs its own edge; flat by default, no shadow.

The plain table parts for rows of facts. Use it for short, static lists; reach for the data table block when you need sorting, selection or paging.

Labelled facts about one record, as a real dl. Use it on detail pages and sheets wherever you would otherwise write label: value by hand.

An identifier you can read at a glance and copy whole. Use it for agent ids, request references and commits instead of printing the raw string.

A machine-readable time in the format the reader needs. Hover or focus shows local time and UTC, so a relative time never hides the exact one.

A named, scrollable block of code or output with an exact-value copy button. Use the command variant for one line a colleague should paste into a terminal.

Secondary facts tucked behind one disclosure, closed by default. It remembers whether the reader opened it, per page, for the rest of the session.

A flat row with media, a title, a description and actions. Use it for short lists of agents, skills or people; render it as a link or a button when the whole row acts.

A round picture of a colleague or an agent. With no photo it shows one of six Waimakers characters or a two-letter monogram, and it always has a name for screen readers.

Native kbd elements for keys and shortcuts. Use it wherever you tell someone what to press: help text, menus, tooltips.

Recharts inside a themed container. The config names each series and points it at a brand chart role, so the colours follow light and dark without a single hex value.

Markdown rendered in the brand: headings, lists, links, code and tables. Use it for text a colleague or an agent wrote; raw HTML is always dropped.

The top of every page: one h1, with an optional breadcrumb, a meta line, a lede and the page's actions. Reach for it once per page.

A named region inside a page. The h2 labels the region for screen readers, so every section is a landmark you can jump to.

Where this page sits and how to get back up. Use it on pages two or more levels deep; the last crumb is the current page and is not a link.

Switch between views of the same thing without leaving the page. Arrow keys move between tabs; Tab moves into the panel.

Stacked sections that open in place. Use it for answers and secondary detail people scan for; keep what everyone needs outside it.

One disclosure: a trigger that shows or hides a single panel. Reach for Accordion when there are several, and Technical details for secondary facts.

A one-pixel rule on the border role, horizontal or vertical. Use it to split groups that sit on the same surface.

The app's navigation rail: a fixed column on desktop and a sheet on a phone. The full Sidebar needs the whole viewport, so see it live in the App shell block; the menu parts below render anywhere.

The WAIMAKERS wordmark with the product name in Caveat. It switches to the white wordmark in dark mode on its own. Never typeset the wordmark yourself.

The bar above a list: search, filters, column visibility and the active filters as removable chips. It holds no state of its own, so the list stays the source of truth.

Cursor pagination at the foot of a list: one button that loads the next page, shows it is working, and offers a retry when the page fails. It renders nothing once there is no more.