Skip to content
Pathogen

Review Checklist

Use this pass for PRs that touch Pathogen UI, styles, previews, or these docs. The goal is not visual sameness. The goal is a product that feels quiet, precise, accessible, compact, and trustworthy from the smallest token to the full page.

Quiet

Section titled “Quiet”
  • Visual choices clarify workflow, state, hierarchy, or navigation?
  • Colour appears only when it carries meaning?
  • No marketing gradients, hero layouts, decorative poster shapes, or broad feature blocks?
  • Shadows reserved for overlays?
  • Status colour used only for status?

Precise

Section titled “Precise”
  • Uses --pvc-color-* where a semantic role exists?
  • No new slate-* when neutral-* works?
  • Host apps can still override --color-primary-*?
  • Radius matches role: 2px, 4px, 6px, or 8px?
  • No rounded-xl on everyday product UI?
  • Mostly 14px / 16px unless hierarchy needs more?
  • Labels are semibold at control scale?
  • Spacing follows the 4px rhythm?
  • Page titles use Heading?

Accessible

Section titled “Accessible”

Full requirements and references: Foundations → Accessibility.

  • Visible focus-visible in light and dark?
  • New or migrated code uses --pvc-color-focus?
  • Focus remains distinct from accent?
  • State has a visible cue beyond colour and a separate native/ARIA representation?
  • Icon buttons have screen-reader names?
  • Semantic HTML and WCAG 2.2 AA contrast?
  • Normal-sized status text uses success-strong / warning-strong, not base success / warning?
  • Custom widget follows the matching APG pattern?
  • Keyboard-only use still completes the task?
  • prefers-reduced-motion respected?
  • Forced-colours considered for custom controls?
  • Focus appearance measured on the actual adjacent surfaces and focused controls fully unobscured?
  • Default activation areas measure at least 44 × 44 CSS px, or a specific exception is recorded?
  • Tested at 320 CSS px, with text resizing, zoom, and text-spacing overrides?
  • Browser and screen-reader evidence recorded separately, with untested combinations left pending?

Compact

Section titled “Compact”
  • Dense UI still leaves room for focus rings and validation text?
  • Compact mode explicitly selected for a documented workflow, with 24 × 24 CSS px targets and 8px between neighbours?
  • Compact targets distinguished from the enhanced 44px requirement?
  • Aligned grids and real dividers support scanning?
  • Asymmetry reflects workflow priority, not layout fashion?
  • Data-heavy previews use realistic density?

Trustworthy

Section titled “Trustworthy”
  • Matches Foundations?
  • Any exception is named with a workflow reason?
  • Local pattern worth promoting to Pathogen?
  • No host coupling (Current, feature flags, host models/routes) in the gem?
  • No hard-coded host brand in shared components?
  • Prefer extending Pathogen over growing a host-local component fork?
  • Interaction states feel stable and honest?
  • Copy sounds like clinical, laboratory, or public-health work?

Buttons

Section titled “Buttons”
  • One primary + solid per action group?
  • Cancel and secondary actions use neutral outline or ghost?
  • danger + solid reserved for confirmed destructive steps?
  • Solid hover darkens, or the mismatch is already a known token gap?
  • Solid success/warning uses --pvc-color-success-solid / --pvc-color-warning-solid (and their hover steps), not raw emerald-* / amber-*?

Dark Mode

Section titled “Dark Mode”
  • No neutral-950 page shells?
  • Deeper black only inside framed dense regions?
  • Borders, muted text, hover, selected, disabled, and validation states remain clear?
  • Same radius, spacing, and grid logic as light mode?

Previews

Section titled “Previews”
  • Shows a realistic workflow context?
  • Uses the same tokens as shipped components?
  • Avoids a separate documentation aesthetic?
  • Checked in light and dark?

Commands

Section titled “Commands”
You changed Run
CSS / tokens pnpm run build:css:check
Ruby components bin/test
JavaScript pnpm test
Visible UI Lookbook, light + dark