Catalyst

UX standards

How Catalyst behaves

The product should feel like a calm, competent colleague. These rules are binding for every screen.

Hover & focus

  • Cards lift 4px and warm their border to primary/40 over 300ms.
  • Buttons scale to 1.03 over 200ms; ghost buttons fill with surface-2.
  • Rows tint to surface-2/50; never change layout on hover.
  • Focus-visible always renders a 2px ring — hover styling is never a substitute.
  • Touch devices get the pressed state instead of hover (no sticky hover).

Loading

  • Under 300ms: show nothing. Instant beats a flash of spinner.
  • 300ms–2s: skeletons that match the final layout, never a centered spinner.
  • Over 2s: narrated progress — 'Reading 1,284 donor records…' with a live region.
  • AI work is always narrated; users should see the team thinking, not a void.
  • Optimistic UI for approvals and task completion, with rollback on failure.

Empty states

  • Every empty state has an icon, a plain-language title, one sentence of context, and one action.
  • Never blame the user. 'Nothing needs you right now' beats 'No results'.
  • First-run empty states offer to have the AI team populate the screen.

Errors

  • Inline field errors sit under the input in destructive tone with an icon and a fix.
  • Section failures degrade locally — one broken card never blanks the page.
  • Every error offers a retry; destructive actions always confirm first.
  • System language: what happened, what it means, what to do next. No stack traces.

Success & notifications

  • Confirmations are toasts, bottom-right, 4s, dismissible, with an undo where reversible.
  • Significant milestones (goal reached, gift received) use a spectrum accent and a single celebratory pulse.
  • The bell groups by section and shows an unread count; never more than one badge per surface.
  • Nothing that requires a decision lives only in a toast — it also enters the approvals queue.

Scrolling & transitions

  • Sticky header, independently scrolling rail; content is the only long scroll.
  • Scroll restoration on back-navigation; anchors scroll smoothly with a 32px offset.
  • Route changes cross-fade content in 200ms; the shell never re-renders.
  • Reveal animation: 28px rise + fade, once per element, staggered 100ms.
  • Modals scale in from 0.95; drawers slide with entrance easing over 300ms.

Micro-interactions

  • Checkbox and approval checks draw in over 150ms.
  • Counters animate to their value; currency always tabular-nums.
  • The Catalyst mark rotates slowly whenever the AI team is actively working.
  • Progress bars ease their width over 700ms so growth is felt, not jumped.
  • All of the above disable under prefers-reduced-motion.

State gallery

Reading 1,284 donor records…Reading 1,284 donor records
Saved

Success confirmation with a reversible action.

Nothing needs you right now

Your AI team has no drafts awaiting approval.

Sync failed

We couldn’t reach Raiser’s Edge. Your data is unchanged — we’ll keep trying every 10 minutes.

Gift received

$25,000 from the Reyes Family Fund.

1h