Color palette

The palette is fixed. Never introduce raw Tailwind color utilities outside this page — use the semantic classes (pills, alerts, status dots, text hierarchy) instead. Every token is a light-dark() pair (hexes below are light / dark); the swatches render the live tokens, so use the theme switcher above to preview both sides. Never use dark: variants in views — darkness flows entirely through the tokens. Dark neutrals are warm (a trace of the brand orange) — pure gray reads cold next to orange-main.

Typography

Headings are styled globally (base layer) — a bare <h2> already gets its scale. Don't restate the size/weight utilities on headings unless you are intentionally deviating (e.g. the page-header h1).

Text hierarchy

Prefer these helpers over raw text-gray-* utilities so a future contrast pass is a one-line change.

Sizes

Three geometries, one tone system. Never write the geometry utilities by hand.

Tones

Status dots

Lightweight active/inactive signal for record headers and inside pills. .status-dot + .status-dot-active / .status-dot-inactive.

Core controls

• • Labels: .label. Required marker: .required-indicator.
• • f.select takes class: "select" — not "input".
• • Field errors: render("field_errors", form_object: f.object, key: :name).
• • Form-level errors: render("form_errors", form_object: f.object) at the top of the form.

Checkboxes & radios

Checkboxes always get class: "checkbox". Boolean settings use the inline pattern (checkbox leading, label following). Groups use .checkbox-group / .radio-group.

.panel

.panel-attention

A work panel demanding a decision — e.g. a typed task's inline action (approve/reject an eligibility verification). Same shape as .panel, framed in the brand orange with .panel-attention-header and .panel-attention-footer. One per page, at the top of the main column; its confirm button is the page's primary action.

.card (legacy surface)

.table-list — the staff-console data table

Wrap in panel overflow-hidden. When rows link to a detail page add .row-hover to each row and a trailing .row-chevron cell. Numeric cells add text-right tabular-nums. Cell padding overrides (e.g. px-2 on the chevron cell) still work.

<div class="panel overflow-hidden">
  <table class="table-list">
    <thead><tr><th>Name</th><th class="w-8"></th></tr></thead>
    <tbody>
      <tr class="row-hover">
        <td>…</td>
        <td class="px-2"><span class="row-chevron block" aria-hidden="true"><%%== Icon.render("solid/chevron-right", "w-3.5 h-3.5") %></span></td>
      </tr>
    </tbody>
  </table>
</div>

.meter-track / .meter-fill

A horizontal ratio bar: one value against a known limit. .meter-track is the rounded gray groove; .meter-fill is the brand-orange bar inside it, sized by a .meter-fill-{step} width class. The fill has one color — there are no tone variants today, so a meter never signals success/warning/error by itself; pair it with a .pill-sm when the status matters.

Steps: 0 2 5 10 20 30 40 50 60 70 80 90 100. Snap a real percentage to the nearest one rather than adding a step.

Meter with a threshold

There is no tick-mark class. A limit is expressed as a caption row under the track — floor on the left, the named limit on the right — and the limit label turns .text-critical once the value crosses it. The number is what communicates the breach; the meter just shows how close it is.

Staff nav header

Implemented once in layouts/_staffs_header with .nav-link / .nav-link-active / .nav-link-danger (log out). Static example:

Breadcrumbs

One implementation: the application/_breadcrumb partial (renders into the layout's :subnav slot). A crumb with path: is a link; without one it's plain text. Never hand-roll breadcrumb markup.

<%%= render("application/breadcrumb", crumbs: [
  { name: t("staffs.navigation.clients"), path: [:staffs, :clients] },
  { name: client.name, path: [:staffs, client] },
  { name: cohort.name },
]) %>

.page-header — titled pages (forms, titled indexes)

The h1 here intentionally overrides the base h1 scale: text-2xl font-semibold tracking-tight text-black leading-none mb-0.

Index page anatomy (staff console)

1. content_for(:query_actions) — a form with a .quiet-search input and/or primary action
2. Optional application/_filter_form — collapsible multi-field filters
3. application/_query_summary — record counts + the :query_actions slot
4. panel overflow-hidden + .table-list (see Tables)
5. Kaminari pagination

Record header (show pages)

Show pages use a richer header: avatar/logo slot, title, a metadata line with · separators (text-muted), a status dot, and an action cluster on the right.

.stat-strip

Horizontal row of stat cells on show pages. Compose cells with the application/_stat partial (label:, value:, optional sub:) or inline with the same typography.

Sidebar section header

Split-view queue (tasks)

A viewport-locked list + detail split for working a queue without page scroll. The page sets content_for(:viewport_locked); the staff layout turns that into an lg:h-dvh lg:overflow-hidden flex column (small screens keep page scroll). Every wrapper between the layout and the scrolling panes carries min-h-0, and each pane scrolls itself with overflow-y-auto. Selection is bg-orange-lightest plus aria-current="true" on the active row — JavaScript must keep both in sync, and keeps the row in view by setting the list's scrollTop, never scrollIntoView (which would scroll the locked page). Group headers are sticky top-0. Runs of ≥5 identical rows collapse to a summary row. Live implementation: staffs/tasks/_queue.html.erb + task_queue_controller.js.