UX System

Input

• Company: Meridian Health — a mid-size telehealth platform serving 400K+ patients
• Context: Redesigning the patient-facing web app and clinician dashboard; two separate teams using inconsistent Figma libraries and no shared token system
• Brand inputs: Primary brand color #1A6FBF (Meridian Blue), secondary #27AE72 (Vitality Green), neutral grays; Inter typeface; "trustworthy, calm, clinical but approachable"
• Existing system state: ~60 components in Figma with no documented specs, no accessibility audit ever performed, and three conflicting button styles across products
• Compliance requirement: WCAG 2.2 AA minimum; HIPAA-adjacent UX considerations (clear session states, data sensitivity indicators)

---

Output (abbreviated)

Meridian Health — UX System Report

Scope: Patient Web App + Clinician Dashboard Chain: /style-guide → /component-spec → /interaction-pattern-library → /accessibility-audit

---

Step 1 — /style-guide

Color Tokens

Token	Value	Usage	AA on White
color.primary.500	#1A6FBF	CTAs, links, focus rings	✅ 5.2:1
color.primary.700	#0F4A82	Hover states, headings	✅ 9.1:1
color.secondary.500	#27AE72	Success states, vitals normal	✅ 4.6:1
color.secondary.700	#1A7A50	Secondary hover	✅ 7.8:1
color.alert.danger	#C0392B	Critical alerts, errors	✅ 5.9:1
color.alert.warning	#E67E22	Caution states	⚠️ 3.1:1 (text use restricted)
color.neutral.100	#F5F7FA	Page backgrounds	—
color.neutral.800	#2C3E50	Body text	✅ 11.4:1

⚠️ Designer decision required: color.alert.warning fails AA for small text. Recommend pairing with iconography and restricting to 18px+ or bold weight only. Stakeholder approval needed before finalizing alert palette.

---

Typography Scale

Token	Size / Weight	Line Height	Usage
type.heading.xl	32px / 700	1.25	Page titles
type.heading.lg	24px / 600	1.3	Section headers
type.heading.md	20px / 600	1.35	Card titles, modal headers
type.body.md	16px / 400	1.6	Primary body copy
type.body.sm	14px / 400	1.5	Secondary labels, metadata
type.label.caps	11px / 600 / uppercase	1.4	Form labels, data table headers
type.clinical.mono	14px / 400 / monospace	1.5	Dosage values, IDs, timestamps

Clinical mono token addresses HIPAA-adjacent readability for sensitive numeric data (MRNs, dosages, lab values).

---

Spacing System

Base unit: 4px

space.1 = 4px · space.2 = 8px · space.3 = 12px · space.4 = 16px · space.6 = 24px · space.8 = 32px · space.12 = 48px · space.16 = 64px

---

Step 2 — /component-spec

Component: Button

Variants: Primary · Secondary · Ghost · Danger · Link Sizes: Large (48px height) · Default (40px) · Small (32px)

State	Primary	Danger
Default	primary.500 bg / white text	alert.danger bg / white text
Hover	primary.700 bg	darken 10%
Focus	3px ring primary.300 / 2px offset	3px ring alert.danger / 2px offset
Disabled	neutral.300 bg / neutral.500 text / cursor: not-allowed	same
Loading	Spinner replaces label + aria-busy="true"	same

Accessibility rules:

• Minimum touch target 44×44px (applies to all sizes via padding compensation)
• aria-label required when button contains icon only
• Danger buttons require confirmation pattern before destructive action (see Interaction Pattern Library)
• Never disable submit buttons — use inline validation instead (prevents confusion for screen reader users)

---

Component: Alert / Notification Banner

Variants: Info · Success · Warning · Critical Behavior: Inline (persists) · Toast (auto-dismiss at 5s, pausable on hover) · Session (full-width, dismissible)

Variant	Icon	Border-left	Role	Live Region
Info	info-circle	primary.500	note	aria-live="polite"
Success	check-circle	secondary.500	—	aria-live="polite"
Warning	triangle-exclamation	alert.warning	—	aria-live="polite"
Critical	x-circle	alert.danger	alert	aria-live="assertive"

Critical alerts use role="alert" + aria-live="assertive". Clinician dashboard critical lab value alerts must never auto-dismiss.

---

Component: Data Table (Clinician Dashboard)

Variants: Standard · Sortable · Expandable row · Selectable States: Loading skeleton · Empty · Error · Paginated

Key specs:

• Row height: 48px minimum (touch/click target compliance)
• Sticky header on scroll exceeding 400px table height
• Sort indicators: up/down chevron + aria-sort="ascending|descending|none"
• Sensitive data cells (labs, medications) use type.clinical.mono token
• Row selection uses role="checkbox" + visible focus ring

---

Step 3 — /interaction-pattern-library

Pattern: Loading States

Context	Pattern	Duration trigger	Implementation
Page navigation	Full-page skeleton	Immediate	Skeleton screens matching content layout
Data table refresh	Inline skeleton rows	Immediate	Preserve column structure
Button action	Spinner-in-button	>300ms	aria-busy, label changes to "Saving…"
Background sync	Subtle progress bar (top of viewport)	Immediate	2px, primary.300, non-blocking

Rule: Never use full-page spinners for partial updates. Patients and clinicians must retain context during data loads.

---

Pattern: Form Validation

• Inline validation: Trigger on blur (not on keystroke) for standard fields
• Clinical fields (dosage, DOB, MRN): Validate on blur AND on submit; display both inline + summary
• Error messages: placed below field, role="alert", linked via aria-describedby
• Success confirmation: only show for high-stakes completions (appointment booking, prescription submission)

---

Pattern: Session Timeout (HIPAA-adjacent)

1. At 13 minutes of inactivity → modal warning: "Your session will expire in 2 minutes"
2. Modal traps focus, primary CTA "Stay Logged In," secondary "Log Out Now"
3. At 15 minutes → auto-logout, redirect to login with toast: "Session expired for your security"
4. All unsaved form data → warn via beforeunload prompt before timeout clears state

---

Pattern: Destructive Action Confirmation

Applies to: appointment cancellation, record deletion, removing a care team member

1. Trigger button (Danger variant) → opens confirmation modal