Quiet tables for busy operators.

Our users open the team page to do something — pay someone, hire someone, fix a permission. The page should disappear underneath the task.

Geist Sans for prose, labels, and identity. Geist Mono for currency, hours, tenure, IDs, and keyboard hints. Mono is also a visual cue — when you see it, you can compare it numerically with the cell above.

Rules

• Never truncate names. Names are identity. Columns must flex to fit them, or the layout is wrong.
• One unit per page, in the header. Currency suffix lives in the column header or a single light hint, not in every cell.
• Tabular numerals always for currency, hours, percentages, dates rendered as numbers, and counts in legends.
• No font weight below 400 at any size — operator-facing copy must remain legible on glare and in poor light.

Backgrounds and text are warm off-whites and near-blacks. Saturation is forbidden in chrome. Hue only appears where it is a key — a role dot, a status pill, an alert filter.

Surface & text

Roles — the only saturation we spend

Every role gets one quiet hue. The dot, the legend bar segment, and the role label all use the same token. New roles inherit --role-default until a hue is assigned.

Status

Three states only: ok, warn, crit. Each pairs a foreground hue with a soft tinted background for pills, never used on chrome.

Accent

One indigo, reserved for focus rings, the active sort arrow, and the selected-row tint. Not used on buttons or links — buttons use neutral surfaces.

Row padding is the only thing that changes. Hairlines, fonts, and column widths stay constant so muscle memory and column scanning don't break between modes.

Spacing scale

Radii

Sharp at small sizes, soft at large ones. Pills (999px) are reserved for chips, status badges, and the floating bulk-action bar.

Column policy

A column is a commitment. Before adding one, answer: is this populated for the majority of rows, and is it scannable in a single glance? If either answer is no, move it.

• Most rows populated → keep as a column.
• Fewer than ~30% populated → move to a row-expand or detail panel; surface only when populated as an inline glyph next to a related field.
• Determined entirely by current filter → hide. A Status column on the Active tab is noise.
• Photo is not a column header. The avatar sits in the identity cell with the name; the column has no label.

Cell formatting

Sorting

Multi-column sort is supported. The active sort priority appears as a small labelled ordinal next to the column name — not a bare number. On hover, the column reveals an arrow; on click, the column joins the sort stack at the next free priority.

Row interaction

• Hover tints the row with --surface-2 and reveals row-end actions.
• Select tints with --accent-soft and surfaces the floating bulk-action bar.
• Alert draws a 2px inset of --warn on the left edge of the row — never a full-row tint.
• Inactive rows demote text two tonal steps; the avatar status dot turns gray.

The avatar status dot (bottom-right of the photo) is the primary status indicator. The pill is the secondary signal, used only when status varies on the visible page. When the filter pins status to a single value, the pill column is removed.

Badge anatomy

• Height 20px, padding 0/8, radius 999px.
• 10px uppercase with 0.06em tracking — letterforms must remain readable.
• Soft tint background + saturated foreground, both from the same hue token (--ok + --ok-soft).
• Never bare color — every badge has a noun in it. A green dot alone is the dot pattern, not a badge.

A dash — means "no value yet". An en-dash is shown only when the field could be populated; otherwise the cell stays blank. A column of mostly dashes is always wrong.

Zero handling

Zero is a value, but not a loud one. In activity counters (Hires, Deactivations, Birthdays), zeros take --fg-4 and weight 500, while non-zero values take --fg at 600. A card with three zeros and a three should make the three read first.

A glyph in a cell must either be paired with a label, replace a word the user already knows from a legend, or be a status indicator (dot, dot-with-color). The Access column is the canonical bad case — a purple key and a blue hash with no anchor anywhere on the page.

Tag glyphs on identity

Inline glyphs next to a name — a small key for keyholders, a cake for a birthday this week — are allowed because they sit beside the name they describe, and they replace a longer "(keyholder)" suffix. Keep them tiny (12px), use --fg-4 tint, never more than two per name.

Each card has a label, a single dominant number, and at most one secondary element (a breakdown bar, a range, a sparkline). If a card carries four equal-weight numbers, it's not a card — it's a small table, and should be presented as one.

• One headline number per card. Anything competing for that role belongs below the fold.
• Ranges must explain themselves. A min–max bar needs a one-line caption stating what bounds the range and where the current value sits within it.
• Zero-heavy cards demote. See §07 — emphasize the value that did move.
• No card without a verb. If the user can't take an action from this number — even a mental one — it's vanity.

Operators say things like "shift lead", "hours requested", and "keyholder". We use their vocabulary, not HR's. Avoid product-speak nouns that exist only inside the app.

• Sentence case for everything except eyebrows. Eyebrows are 11px uppercase with 0.06em tracking.
• Numbers come first when the answer is a number. "18 members · 7 keyholders", not "Members: 18 (keyholders: 7)".
• Time uses long form in body copy ("4 years 11 months"), short form in table cells ("4y 11mo" — but only after the formatting rule in §05 is satisfied).
• Currency without trailing zeros in display ("$25"), with trailing zeros in tabular numerics ("25.00").
• No exclamation marks, ever. No celebratory copy on errors. No "Oops!" on failures.

1. Let the Name column flex; stop truncating identity.
2. Drop unit suffixes inside Pay Rate and Hrs Req cells.
3. Hide the Status column on the Active tab.
4. Move Positions and Daily Report into a row-expand panel.
5. Replace the bare sort-priority numerals with labeled ordinals.
6. Fix tenure formatting — twelve months should roll, zero months should disappear.
7. Replace Access glyphs with labeled chips, or expose a one-line legend above the table.
8. Caption the Projected Payroll range bar.
9. Demote zeros in the Last 30 Days card.
10. Remove the PHOTO column header.