Cedar contrast pass — before / after

The screen at a glance

At full size the change is quiet, which is the point: the dashboard keeps its calm. The differences live in the details below.

Dashboard before the contrast pass — Before

Dashboard after the contrast pass — After

The details

Each ratio is measured against the surface the element actually sits on. Small text needs 4.5:1; focus rings, selection rings, and informational icons need 3:1.

Meeting URL input, focused

minimum 3:1

Meeting URL input, focused, after — After solid brand ring — 6.74:1

Primary button, keyboard focus

minimum 3:1

Primary button, keyboard focus, after — After two-layer ring: white gap + brand, holds on light and dark

Timeline “Now” label, 11px

minimum 4.5:1

Timeline “Now” label, 11px, after — After success-strong — 5.48:1

Selected “Get started” card ring

minimum 3:1

Selected “Get started” card ring, after — After solid brand — 6.74:1

Setup progress percentage

minimum 4.5:1

Setup progress percentage, after — After success-strong — 5.48:1

Next-step arrow

minimum 3:1

Next-step arrow, after — After success-strong — 5.48:1

Token changes

Two new tokens, one value nudge. The pass/fail colors on this page are the new tokens themselves. Base success and destructive are unchanged and still own fills, tints, and large shapes.

Token	Value	Used for	Worst-case contrast
--color-success-strong (new)	#047857	Small success text and icons on light surfaces	2.31:1→4.99:1
--color-destructive-strong (new)	#b91c1c	Small error text on light surfaces	3.76:1→5.97:1
--color-muted-foreground-light	#6b7280→#646c7a	Muted text on canvas and gray badges	4.39:1→4.81:1
inactive icons	border-light→muted-foreground-light	“Cedar won’t join” sprout, no-notes icon	1.47:1→5.54:1
focus rings (13 components)	7 alpha recipes→brand-primary	Inputs, rows, toggles, icon buttons	1.13–1.94:1→6.74:1

The focus standard, in one place

/* Light surfaces: inputs use focus:, buttons and rows use focus-visible: */
ring-2 ring-brand-primary

/* Filled buttons (.btn-primary / .btn-secondary), which sit on light AND dark pages */
box-shadow: 0 0 0 2px var(--color-surface-light),  /* white gap carries dark pages */
            0 0 0 4px var(--color-brand-primary);  /* brand ring carries light pages */

/* Dark surfaces (Modal, Select) */
ring-2 ring-foreground/70

Left as is, on purpose

Hero sprout circle keeps the soft success tint: it is decorative and aria-hidden, so contrast rules don’t apply.
Live meeting row ring keeps its light success glow: the row’s “Now” text (now 4.99:1) is the accessible signal, the ring is reinforcement.
Progress bar fill stays emerald: the percentage label next to it is its text alternative.