88 lines
5.6 KiB
Markdown
88 lines
5.6 KiB
Markdown
# Reference: Visual Design System
|
|
|
|
> Extracted from goal.md — Visual System section. This is the SINGLE SOURCE OF TRUTH for colors, typography, spacing, borders, and motion throughout the Clinical Record PMR.
|
|
|
|
---
|
|
|
|
## Color Palette
|
|
|
|
This design is **light-mode only**. Clinical record systems operate in light mode — high ambient lighting in consulting rooms demands white backgrounds and dark text. A dark mode would break the metaphor.
|
|
|
|
**Backgrounds:**
|
|
- Main content area: `#F5F7FA` (cool light gray — the content background of EMIS/SystmOne)
|
|
- Card/panel surfaces: `#FFFFFF` (white)
|
|
- Sidebar: `#1E293B` (dark blue-gray — EMIS-style dark navigation panel)
|
|
- Patient banner: `#334155` (lighter blue-gray with white text)
|
|
- Login screen background: `#1E293B` (same as sidebar — institutional dark blue-gray)
|
|
|
|
**Text:**
|
|
- Primary text: `#111827` (gray-900 — near-black for maximum readability)
|
|
- Secondary text: `#6B7280` (gray-500)
|
|
- On dark surfaces: `#FFFFFF` (white) and `#94A3B8` (slate-400 for secondary)
|
|
|
|
**Accent and status colors:**
|
|
- NHS blue: `#005EB8` — primary interactive color. Used for buttons, active nav states, links, column headers. This is the actual NHS brand blue and will be instantly recognized.
|
|
- Green: `#22C55E` — active/resolved/current states. "Active" status dots, resolved problems, current role indicators.
|
|
- Amber: `#F59E0B` — alerts, in-progress items, notable achievements. The clinical alert banner uses this as its background.
|
|
- Red: `#EF4444` — urgent/critical markers. Used sparingly — only for genuinely important items (e.g., a "priority" flag on the referral form).
|
|
- Gray: `#6B7280` — inactive/historical items. Past roles that are no longer current, historical "medications."
|
|
|
|
**Traffic light system (used throughout):**
|
|
- Green circle: Active / Resolved / Current
|
|
- Amber circle: In progress / Alert / Notable
|
|
- Red circle: Urgent / Critical (rare)
|
|
- Gray circle: Inactive / Historical
|
|
|
|
## Typography
|
|
|
|
Clinical systems use system fonts — Inter or Segoe UI for general text, monospace for coded entries and data values. No decorative fonts, no variable tracking. Functional typography optimized for scanning dense tables.
|
|
|
|
- **Patient banner name:** Inter 600, 20px (not huge — clinical systems don't emphasize the patient name with large type)
|
|
- **Patient banner details:** Inter 400, 14px
|
|
- **Sidebar navigation labels:** Inter 500, 14px, white
|
|
- **Section headings (within main area):** Inter 600, 18px
|
|
- **Consultation entry titles:** Inter 600, 16px
|
|
- **Body text / descriptions:** Inter 400, 14px, line-height 1.6
|
|
- **Table headers:** Inter 600, 13px, uppercase, letter-spacing 0.03em, gray-500
|
|
- **Table data cells:** Inter 400, 14px
|
|
- **Coded entries / data values:** Geist Mono 400, 13px
|
|
- **Clinical codes (SNOMED-style):** Geist Mono 400, 12px, gray-400
|
|
- **Timestamps:** Geist Mono 400, 12px
|
|
- **Alert banner text:** Inter 500, 14px
|
|
|
|
## Spacing and Layout
|
|
|
|
- **Sidebar width:** 220px (fixed, desktop). Collapses to 56px (icon-only) on tablet.
|
|
- **Patient banner height:** 80px (full), 48px (condensed/sticky)
|
|
- **Main content max-width:** No max-width — clinical systems fill available space. Content flows within the area between sidebar and viewport edge.
|
|
- **Main content padding:** 24px
|
|
- **Card padding:** 16px (clinical systems are more compact than marketing sites)
|
|
- **Border radius:** 4px for cards and inputs (clinical systems use minimal rounding — 4px, not 12px or 16px)
|
|
- **Table row height:** 40px
|
|
- **Section spacing:** 24px between content blocks
|
|
- **Base unit:** 4px — tighter spacing than typical, reflecting clinical system density
|
|
|
|
## Borders and Surfaces
|
|
|
|
Borders are the dominant visual structuring element. Clinical systems do not rely on shadows or negative space — they use explicit borders to delineate every element.
|
|
|
|
- **All cards:** `1px solid #E5E7EB` (gray-200) border, `4px` border-radius, no shadow (or at most `0 1px 2px rgba(0,0,0,0.03)`)
|
|
- **Table cells:** `1px solid #E5E7EB` borders (all sides)
|
|
- **Sidebar border:** `1px solid #334155` (subtle right border in a slightly lighter shade)
|
|
- **Patient banner border:** `1px solid #475569` bottom border
|
|
- **Input fields:** `1px solid #D1D5DB` border, `4px` radius, `#FFFFFF` background, `8px 12px` padding
|
|
- **Active/selected rows:** `#EFF6FF` background (very subtle blue tint) — this is how EMIS highlights the selected row
|
|
|
|
## Motion
|
|
|
|
Clinical systems are fast and functional. Animations are minimal and purposeful — no spring physics, no bouncy transitions. Everything is immediate or uses simple ease-out.
|
|
|
|
- **Navigation switches:** Instant content swap. No crossfade, no slide. When you click a sidebar item, the main content area replaces immediately — just like clicking a tab in EMIS.
|
|
- **Consultation expand/collapse:** Height animation, 200ms, `ease-out`. No opacity fade — the content simply grows/shrinks.
|
|
- **Alert banner entrance:** Slide down from top, 250ms, with a subtle spring overshoot (this is the one exception — alerts are meant to demand attention).
|
|
- **Alert acknowledge:** The alert shrinks in height to zero (200ms) with a small green checkmark that flashes briefly.
|
|
- **Hover states:** Background-color transitions, 100ms. No transforms, no lifts. Just color.
|
|
- **Login typing:** Character-by-character reveal using `setInterval` (30ms per character for username, 20ms per dot for password).
|
|
- **Patient banner scroll condensation:** Smooth height transition (200ms) from full (80px) to condensed (48px) as user scrolls past the first 100px of content.
|
|
- **`prefers-reduced-motion`:** Typing animation completes instantly (full text appears), alert slides are replaced with fade-in, expand/collapse is instant.
|