PT

Pay Theory UI

Design system

Design system

Static Pay Theory design tokens, statuses, type, and component samples.

Static foundation

Pay Theory design system

Tokens, statuses, type, and SSR component samples for the PCI Data Collection app shell.

Token swatches

--brand#6c4cf0Primary action
--brand-accent#8a6bffFocus and highlight
--brand-ink#4a32c4Active text
--brand-soft#6c4cf014Selected surface

Neutral scale

--ink-900#1c1c24Neutral scale
--ink-700#3f3f49Neutral scale
--ink-500#7a7a88Neutral scale
--ink-300#aeaeb8Neutral scale
--ink-100#ececf1Neutral scale

Surface tokens

--surface#fbfbfcApp surface
--app-bg#faf9f5App surface
--sidebar-bg#fbfbfaApp surface
--card-bg#ffffffApp surface
--card-border#e7e7ecApp surface

Semantic status colors

--tone-gray#8a8a99Waiting
--tone-blue#2563ebIn progress
--tone-amber#d68a0cNeeds review
--tone-green#1f9d57Accepted
--tone-red#dc3535Blocked

STATUS taxonomy gallery

Every status uses color, icon, and text together.

  • Not startednot_started
  • In progressin_progress
  • Ready for reviewready_for_review
  • Acceptedaccepted
  • Scan in progressscan_running
  • Blocked — action neededblocked
  • Missingmissing
  • Needs attentiondegraded
  • Rejected — sensitive data detectedrejected
  • Correction requiredcorrection_required
  • Fail-closed — lockedlocked

Type scale

Section label

Compliance workspace heading

Readable body copy explains the current screen state and next safe action.

Small supporting copy stays legible for captions and helper text.

Component samples

ButtonsFive kinds
Card
Card sample with static design content.
Progress
64%
Avatar
PT
Reason message
Technical details
Technical details
component
tech details
visibility
closed by default

Static-only page

This page contains reusable visual examples only. It does not load live data or run browser persistence.