FM

ClinicSim UI/UX Audit Showcase

CFPC 2027 Calm Clinical

Automated parsing endpoint designed for comprehensive inspection of component states, color accessibility, typography, responsive layouts, and exam runners.

Open Live App

1. Design System Tokens & Semantic Color Palette

tokens.css

Color hierarchy is strictly purposeful: Brand is Petrol Blue, meaning colors are reserved strictly for clinical statuses (Correct, Warning, Alert), and background surfaces adapt seamlessly from Cool Paper to Midnight Slate.

#0A5C7A

Brand Primary

--ds-brand

#1E7F55

Success / Mastered

--ds-ok

#B8323A

Alert / Abnormal

--ds-bad

#8F5A00

Warning / Flagged

--ds-warn

Mastery Ramp

< 40% Needs Study
40 - 59% Emerging
60 - 79% Competent
≥ 80% Exam Ready

2. Typography & Vignette Legibility

Dual-Type System

Interface Typeface (Figtree)

Modern, clean geometric sans-serif

Used throughout the navigation, control buttons, statistics cards, and timer readouts for instant cognitive parsing.

Clinical Vignette Typeface (Source Serif 4)

"A 54-year-old female presents to your clinic..."

High-readability optical serif rendering patient scenarios with a strict 64-character optimal reading measure (`--ds-measure: 64ch`).

3. Authentic CFPC SAMP Question Runner

Official CFPC Style Guide Conforming
Case Vignette #102 • Type 2 Diabetes & Chronic Kidney Disease Part 1 of 3

A 62-year-old male with a 10-year history of type 2 diabetes presents for routine follow-up. Current medications include Metformin 1000 mg BID. Blood pressure is 134/82 mmHg. Recent lab results demonstrate eGFR 48 mL/min/1.73m² and urine albumin-to-creatinine ratio (ACR) of 22 mg/mmol (confirmed on 2 separate morning specimens).

Which of the following pharmacotherapeutic agents should be initiated to reduce renal disease progression and cardiovascular events in this patient?

Instruction: Select up to TWO (2) options. Selecting more than 2 options invalidates the question.
1 Empagliflozin (SGLT2 inhibitor)
Selected (1/2)
2 Ramipril (ACE inhibitor)
Selected (2/2)
3 Gliclazide MR (Sulfonylurea)
Click to swap
4 Atenolol (Beta-blocker)
Click to swap
✓

Full Marks Earned: 2 / 2 Points

Diabetes Canada & KDIGO 2024 Guidelines: First-line organ-protective therapy for individuals with T2D and CKD with micro/macroalbuminuria includes an ACE inhibitor or ARB titrated to maximum tolerated dose, alongside an SGLT2 inhibitor demonstrated to attenuate renal progression regardless of glycemic control.

Peer cohort accuracy: 78.4% • Canadian Guideline: Diabetes Canada 2024 Chapter 29

4. Simulated Office Oral (SOO) Voice Studio & Disclosure Ladder

Real-Time Gemini Live WebSocket
Simulated Patient: Brenda Kelly (Age 54)

12:44 Remaining

5-Tier Anti-Leaking Disclosure Architecture

Tier Stage Candidate Elicitation Trigger Patient Behavior & Response
Tier 1 Chief Complaint Opening "Hello Mrs. Kelly, how can I help you today?" States strictly 1-2 sentence wrist fracture follow-up. Never leaks anxiety or Issue #2.
Tier 2 Closed Biomedical "Did you have any pain before the fall?" Direct 1-sentence answer ("No, just slipped on the wet porch."). Zero unprompted tangents.
Tier 3 Subtle Cue "How are you managing with the cast?" Hesitation and subtle cue ("Work has just been... a lot to juggle.") without emotional dumping.
Tier 4 Illness Experience (FIFE) "You hesitated there. What's been the hardest part?" Discloses fear of losing independence like her mother did with severe osteoporosis.
Tier 5 Gated Issue #2 & Secrets "Is there anything else on your mind today?" Elicits secondary issue (severe panic attacks / workplace review meeting next Tuesday).

5. Accessibility & Keyboard HUD Controls

WCAG 2.1 AA Compliant
⌘K / Ctrl+K

Global Command Palette

Instant jump to any topic

?

Shortcuts Cheat Sheet

Reveals HUD modal

1 - 9

Select Option Card

Fast zero-mouse answering

Enter

Submit & Advance

Immediate score feedback