Components — Cadence Design

Buttons

Ink leads. Jade commits.

Primary actions are dark ink — calm and frequent. Jade fill is saved for the one committing action per surface. Hover deepens color; nothing moves or scales.

Variants

Primary · ink — the default action

Brand · jade — one per surface

Ghost — secondary

AI — always says what it does

Danger — “remove”, never “delete” for people

Disabled — no opacity tricks

Focus: 2px jade ring, 2px offset — never removed.

<button class="btn btn-brand">Confirm 23 assignments</button>
/* one per surface — commits, approves, goes live */
.btn-brand{ background:var(--brand); color:var(--on-brand); }
.btn-brand:hover{ background:var(--brand-hover); }  /* color deepens; nothing moves */

Forms & inputs

Everything answers on the first tap.

Shift form

Hourly wage

$ /hr

Matches market — fills 2.3× faster at this rate

Shift date

Shifts can't start in the past. Pick today or later.

Auto-approve matched pros

4.5★ and above skip your queue

View

Labels 12.5/500. Helper text answers before you ask; errors say what happened, then what to do. Optional fields say “· optional” — nothing is silently required.

<label>Hourly wage</label>
<div class="input-group"><span>$</span><input value="24.50"><span>/hr</span></div>
<p class="helper">Matches market — fills 2.3× faster at this rate</p>

/* error state: border + plain sentence — what happened, then what to do */
input[aria-invalid="true"]{ border-color:var(--danger); }
.error{ color:var(--danger); font-size:12px; }

Chips & status

Status is a chip, never a bare dot.

Tags · filters · counts

Mono tags

LIVE UNFILLED OPEN · FRI WORKING TIER 2 · EOR FULL-TIME

Filters

Internal staff Marketplace pros Open / gaps Portfolio · 4 locations

Counts · people

MTMaya T. ★ 4.9 19/19 · 100% 0/19 Fill me · 2

<span class="tag live"><span class="d"></span>LIVE</span>

.tag{ font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase;
      padding:3px 9px; border-radius:var(--r-pill); }
.tag.live{ background:var(--brand-soft); color:var(--brand-text); }
.tag.live .d{ animation:pulse 2s infinite; }  /* dot pulses only while live */

Cards

One chassis, three moments.

Standard · AI-marked · dark moment

Coverage5 of 5 today

4:00 PMBartender· Rooftop

5:00 PMDishwasherUNFILLED

Standard — white, line border, radius 14, shadow-1.

CADENCE · BRIEFING FOR ADAM · OWNER · GM

Auto-match handled 14 of 17 shifts overnight. Marcus R. wrapped his AI interview at 96%; draft offer is in your inbox.

AI-marked — same chassis, purple left rail. The agent wrote this.

THE PROMISE

We don't sell software. We sell the outcome.

Dark moment — one per page, for the claim that matters.

.card{ background:var(--bg-card); border:1px solid var(--line);
       border-radius:var(--r-card); box-shadow:var(--shadow-1); padding:20px; }

/* AI-marked: same chassis, purple left rail — the agent wrote this */
.card.ai-marked{ border-left:3px solid var(--ai); border-radius:0 var(--r-card) var(--r-card) 0; }

/* dark moment: one per page, for the claim that matters */
.card.dark-moment{ background:var(--ink-1); color:var(--on-ink); border:0; }

Progress & loading

Always say what's filling.

Bars are 6px, radius 999, tint track. Jade for coverage and health, purple only when the agent is doing the work. A number or label always rides along — never a naked bar.

Bars · spinners · working state

Coverage · this week39/42 · 93%

Friday · pressure point9/12 · 3 open

Auto-fill · running17/23

Syncing payrollindeterminate

Building your event…

333 workers queued. Creating sessions and staffing slots now.

Spinners — 28 page · 22 panel · 16 inline. Track is the soft tint of whoever's working. Full-surface working state: Fraunces title, one plain sentence, purple only because the agent is building.

<div class="bar-row">
  <span>Coverage · this week</span><span class="mono">39/42 · 93%</span>
</div>
<div class="bar"><div class="fill" style="width:93%"></div></div>

.bar{ height:6px; border-radius:999px; background:var(--bg-tint); }
.bar .fill{ height:100%; border-radius:999px; background:var(--brand); }
/* purple fill + --ai-soft track only when the agent is doing the work */

Data display

Dense, but never cramped.

Stat tiles · table

COVERAGE

97%

up 2 pts this week

OPEN GAPS

2

both Friday PM

LABOR COST · WK

$47.2k

3% under forecast

PAYROLL

On tempo

runs Friday 9:00 AM

Worker	Role	Time	Rate	Status
MTMaya Torres	Bartender	4:00–11:00	$24.50	CONFIRMED
JGJhoan Gelvez	PM Expo	3:30–11:00	$21.00	PENDING
?Unassigned	Dishwasher	5:00–11:30	$19.00	UNFILLED

Header row is mono caps 9.5px. Rows are 44–48px, hover tints, the whole row is the click target. Numbers right-ragged in mono; status is always a chip in the last column.

table th{ font:500 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase;
          color:var(--ink-3); text-align:left; }
table td{ height:44px; border-bottom:1px solid var(--line-2); }
tbody tr:hover{ background:var(--row-hover); cursor:pointer; }  /* whole row clicks */
td.num{ font-family:var(--mono); text-align:right; }            /* numbers right-ragged */
/* status is always a chip in the last column — never a bare dot */

Feedback

Say what happened, then get out of the way.

Toast · alerts · empty state

Shift posted. 12 pros notified. View

Payroll reconciled. $47,218 across 61 shifts, zero exceptions.

M. Torres is approaching 38 hrs — overtime starts after Saturday's close shift.Review

Cert expired — J. Okafor's food-handler card lapsed yesterday. Blocked from Friday until renewed.Fix now

No shifts this week yet.

Post one, or let Cadence draft the week from last Friday's pattern.

Toasts are dark ink, bottom-left, 4s, one action max. Alerts sit inline — soft fill, matching border, darker text. Empty states: Fraunces title, one plain sentence, two ways forward. Never apologetic. No exclamation points anywhere.

<div class="toast">Shift posted. 12 pros notified. <a href="…">View</a></div>

.toast{ background:var(--ink-1); color:var(--on-ink); border-radius:10px;
        padding:11px 16px; position:fixed; bottom:22px; left:22px; }
/* 4s, one action max, no exclamation points */

.alert-warn{ background:var(--warn-soft); border:1px solid var(--warn);
             color:var(--warn); border-radius:10px; padding:12px 15px; }

Overlay

Scrim, card, one commit.

Modal · popover · tooltip

Cancel Friday's shift?

Maya Torres is confirmed for this shift. She'll be notified immediately and paid the 2-hour cancellation guarantee.

Edit shift

Duplicate

Remove

Confirmed 18 of 18 · tap for detail

Popover — white, radius 10, shadow-2, 3 items max. · Tooltip — ink fill, 11.5px, facts only, never instructions. · Drawer — slides from right, 420px, full height, no scrim; the page stays live. Modal is reserved for destructive or blocking decisions only.

.popover{ background:var(--bg-card); border:1px solid var(--line);
          border-radius:10px; box-shadow:var(--shadow-2); }   /* 3 items max */
.tooltip{ background:var(--ink-1); color:var(--on-ink); font-size:11.5px; }
.drawer{ width:420px; height:100vh; position:fixed; right:0;
         box-shadow:var(--shadow-2); }  /* no scrim — the page stays live */
.modal{ box-shadow:var(--shadow-3); }   /* destructive or blocking decisions only */

Charts

Jade first, ink second, nothing 3-D.

Coverage bars · labor mix

Coverage by dayFilledNeeded

Labor mix

Internal 52% Marketplace 26% Agency 14% EOR 8%

Categorical sequence: jade → blue → amber → plum, in that order, max 4. Comparison color is --line, never a second saturated hue. Bars radius 4 top, grid lines --line-2, axis labels mono 10px caps. Purple never appears in charts — it would read as agent activity.

/* categorical sequence, in this order, max 4 — never purple */
--chart-1: var(--brand);   /* jade  */
--chart-2: var(--info);    /* blue  */
--chart-3: var(--warn);    /* amber */
--chart-4: var(--plum);    /* plum  */
/* comparison series: var(--line) — never a second saturated hue */
/* bars radius 4 top · grid var(--line-2) · axis labels mono 10px caps */

Media & avatars

People get faces, or warm initials.

Avatars · stacks · presence

Sizes

MT JG ZS KN

24 · 32 · 40 · 48. Fill rotates jade → blue → amber → plum by name hash.

Stack

MT JG ZS +15

Overlap 9px, 2px paper ring, overflow count last.

Presence

MT ZS

Dot bottom-right — jade on shift, stone off.

VENUE PHOTO · 16:9 · RADIUS 10

Imagery is real and warm — venues, plated food, people mid-shift. Never stock handshakes, never illustration, never AI-generated faces. Placeholders are dashed stone on tint.

<span class="avatar" data-name="Maya Torres">MT</span>

.avatar{ width:32px; height:32px; border-radius:50%; font:500 10px var(--mono);
         display:flex; align-items:center; justify-content:center; }
/* fill rotates by name hash: brand-soft → info-soft → warn-soft → plum-soft */
/* stacks: overlap 9px, 2px ring in var(--bg) · presence dot: jade on shift */

One chassis, every moment.