# Progress Log — Typography & Spacing Scale Rework # Branch: ralph/dashboard-restructure # Started: 2026-02-14 ## Codebase Patterns ### Project Structure - Components in `src/components/`, tiles in `src/components/tiles/` - Detail renderers in `src/components/detail/` - Data files in `src/data/` - Types in `src/types/pmr.ts` and `src/types/index.ts` - Hooks in `src/hooks/`, Contexts in `src/contexts/`, Lib in `src/lib/` - Path alias: `@/` maps to `./src/` ### Phase Management - App.tsx controls phase: 'boot' -> 'ecg' -> 'login' -> 'pmr' - BootSequence.tsx, ECGAnimation.tsx — LOCKED, do not modify - LoginScreen.tsx bridges to dashboard ### Typography - Elvaro Grotesque (`font-ui`) — primary UI font - Blumir (`font-ui-alt`) — alternative variable font - Geist Mono (`font-geist`) — timestamps, data values - Fira Code (`font-mono`) — boot/ECG terminal only - Do NOT use Inter, Roboto, DM Sans, or system defaults ### Design Tokens (index.css) - --sidebar-width: 272px (target: 304px) - --topbar-height: 48px (target: 56px) - --subnav-height: 36px (target: 42px) - Dashboard grid gap: 12/16px (target: 14/20px) - Card padding: 20px (target: 24px) ### Known Dependencies - React 18.3.1, TypeScript, Vite, Tailwind CSS - Framer Motion 11.15.0, Lucide React 0.468.0, fuse.js 7.0.0 ### Key Files for This Feature - src/index.css — CSS custom properties, grid gap - src/components/Card.tsx — Card padding, CardHeader sizing - src/components/TopBar.tsx — brand, search, session text - src/components/SubNav.tsx — tab text, height - src/components/Sidebar.tsx — all sidebar content sizing - src/components/tiles/PatientSummaryTile.tsx — profile text, KPI cards - src/components/DashboardLayout.tsx — LastConsultationSubsection, main content padding - src/components/tiles/ProjectsTile.tsx — project items, tech tags - src/components/EducationSubsection.tsx — education entries - src/components/WorkExperienceSubsection.tsx — role items, expanded content - src/components/RepeatMedicationsSubsection.tsx — skill rows, category sections - src/components/ParentSection.tsx — parent heading sizing ### Sizing Context - Target display: 2560x1440 (QHD) - Current body text: 13px → target: 15px - Current labels/metadata: 9-10px → target: 11-12px minimum - Current sidebar details: 11-11.5px → target: 13px - No text below 11px anywhere in dashboard --- ## 2026-02-14 — US-018 - Changed initial Phase state from 'boot' to 'pmr' in src/App.tsx (line 47) - Boot/ECG/login phases remain in code — only the default state changed - App now loads directly to DashboardLayout on refresh - Files changed: src/App.tsx - **Learnings for future iterations:** - Phase state is a simple string union on line 47 of App.tsx: `useState('boot'|'ecg'|'login'|'pmr')` - US-028 will revert this exact change back to 'boot' ---