Inter + Noto Sans SC (sans), JetBrains Mono (mono)
Spacing Scale
Declared values (must be multiples of 4):
Token
Value
Usage
xs
4px
Icon gaps, inline padding, badge internal
sm
8px
Compact element spacing, chat bubble gaps, step indicator spacing
md
16px
Default element spacing, form field gaps, conversation message gaps
lg
24px
Section padding, card body padding, report section gaps
xl
32px
Layout gaps between major sections
2xl
48px
Page-level top/bottom spacing
3xl
64px
Full-page empty state centering
Exceptions: SOP step coverage indicator uses 28px row height (7 x 4px) for dense step list readability without wasting vertical space.
Typography
Role
Size
Weight
Line Height
Body
14px (text-sm)
400
1.5
Label
14px (text-sm)
600
1.5
Heading
20px (text-xl)
600
1.5
Display
24px (text-2xl)
600
1.5
Notes:
Inherits Phase 19 typography contract exactly
Two font weights only: 400 (regular) for body text, 600 (semibold) for labels, headings, display
Simulated conversation messages use Body (14px/400) inside ChatBubble
SOP step names in coverage report use Label (14px/600) for scanability
Score numbers in report summary use Display (24px/600) for visual hierarchy
Score card hero numbers use text-4xl (36px) mapped to Display role at semibold weight (this is a scaled instance of Display, not a separate size declaration)
Mono font (JetBrains Mono) at 14px for SOP step IDs (e.g., "Step 1.2") -- same size as body text; the mono typeface alone provides sufficient visual distinction from surrounding sans-serif content
Color
Role
Value
Usage
Dominant (60%)
var(--background) #FFFFFF
Page background, conversation area background
Secondary (30%)
var(--card) #FFFFFF + var(--muted) #F9FAFB
Report cards, conversation panel background, step list background
Accent (10%)
var(--primary) #1E40AF
"Start Dry Run" button, active history item, selected run tab
Destructive
var(--destructive) #EF4444
Uncovered SOP steps, critical issues, failed run status
Accent reserved for:
"Start Dry Run" primary CTA button
"Start New Run" button in report view
Active/selected Dry Run history item highlight (bg-primary/5 border-l-2 border-primary)
Coverage percentage ring fill (circular progress) when >= 70%
Chat bubble timestamp indicator for active message during playback
Additional semantic colors for this phase:
Color
Token
Usage
Success green
var(--strength) #22C55E
Covered SOP step indicator (check icon), high coverage (>= 80%), "completed" run status badge
Warning orange
var(--weakness) #F97316
Partial coverage (50-79%), SOP steps with weak coverage, "running" status animation
List of past Dry Runs with date, score, coverage — click to view
Scrollable list items
DryRunHistoryItem
Single history entry with timestamp, score badge, coverage bar
Card-like row
DryRunComparisonChart
Line chart comparing scores across multiple Dry Runs
recharts LineChart
DryRunReportHeader
Report page header with run metadata, back nav, re-run button
Page header pattern
DryRunIssueCard
Individual issue/problem identified during simulation
Card with severity badge
Reused Existing Components
Component
From
Usage in Phase 20
ChatBubble
shared/chat-bubble.tsx
Simulated MR and HCP messages in conversation transcript
ScrollArea
ui/scroll-area.tsx
Conversation scroll, SOP step list scroll, history scroll
Badge
ui/badge.tsx
Run status badges, coverage badges, step status pills
Dialog
ui/dialog.tsx
"Start Dry Run" confirmation dialog, run detail dialog
Progress
ui/progress.tsx
Linear progress during simulation
Button
ui/button.tsx
All CTAs (Start Dry Run, View Report, Re-run, Back)
Tabs
ui/tabs.tsx
Already used in Skill Editor — Quality tab hosts Dry Run results
Card
ui/card.tsx
Report summary cards, issue cards
Skeleton
ui/skeleton.tsx
Loading states for report, conversation, history
Separator
ui/separator.tsx
Section dividers in report
Tooltip
ui/tooltip.tsx
SOP step hover detail, score explanation
QualityRadarChart
shared/quality-radar-chart.tsx
Reused for L3 quality dimension radar in report
QualityScoreCard
shared/quality-score-card.tsx
Reused for dimension breakdown in report
Layout Specifications
Dry Run Entry Point (within Skill Editor)
The Dry Run button is integrated into the existing Skill Editor page header, next to "Save Draft" and "Publish Skill". It appears only when the Skill has content (not in new/empty state).
"Dry Run" button uses variant="outline" with a Play/FlaskConical icon to differentiate from save/publish
Disabled when: skill is new (no id), no content, or a dry run is currently in progress
Tooltip on disabled: "Save the skill first to run a simulation"
Start Dry Run Confirmation Dialog
+----------------------------------------------------+
| Start Dry Run Simulation |
|----------------------------------------------------|
| The system will simulate a complete MR-HCP |
| training conversation using AI agents to validate |
| this Skill's SOP. |
| |
| Estimated time: 1-3 minutes |
| |
| [Go Back] [Start Simulation] |
+----------------------------------------------------+
Dialog width: max-w-md (448px)
"Start Simulation" uses primary variant
"Go Back" uses outline variant
Dry Run In-Progress State (replaces Quality tab content)
Progress bar: w-full, striped animation while in progress
Live conversation: ScrollArea with auto-scroll to bottom, max-h-[400px]
Cancel button: variant="outline" with destructive text color
Dry Run Report Page (/admin/skills/:id/dry-run/:runId)
Focal point: The report header with the three key metrics (Executability Score, SOP Coverage %, Issues Found) should be the first thing the admin sees. The conversation transcript and SOP coverage map are secondary, detailed views.