Medical / Clinical

---
name: medical-clinical
description: Apply the Medical / Clinical visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Medical / Clinical, mentions healthcare UI, clinical design, health app style, or describes white with clinical blue and teal, highly legible humanist sans, soft 8px-radius cards — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Medical / Clinical Design System

Sterile, trustworthy healthcare design: white grounds with clinical blue and teal, highly legible Inter/IBM Plex type, soft shadows, clear cards and forms, generous spacing, and an uncompromising accessibility bar. Calm competence in interface form.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Medical / Clinical.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (healthcare UI, clinical design, health app style, medical trust), or describes its traits: white with clinical blue and teal; highly legible humanist sans; soft 8px-radius cards; generous calm spacing; clear form-first layouts; WCAG-first color system.

## Design tokens

### Color palette

- Pure white page background: `#ffffff` (--color-bg)
- Soft blue-gray section and tint background: `#f2f6f9` (--color-surface)
- Deep slate-navy primary text: `#1a2b3c` (--color-text)
- Secondary text and helper copy: `#5a6b7c` (--color-text-muted)
- Clinical blue — links, buttons, focus states: `#0077c8` (--color-accent)
- Teal — secondary accent for charts and large accents only: `#00a3a1` (--color-teal)
- Green — confirmations and healthy-range indicators: `#1e7d43` (--color-success)
- Amber — cautions and out-of-range values: `#b45309` (--color-warning)
- Red — critical alerts and destructive actions: `#b91c1c` (--color-danger)
- Soft cool hairline borders: `#d7e0e8` (--color-border)

### Typography

- Display / headings: IBM Plex Sans (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Type scale: 1.2 ratio, base 16px — computed steps: 16px / 19px / 23px / 28px / 33px / 40px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.25, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96 — Airy 8px-grid calm: forms and cards get generous padding, dense data tables loosen their leading — nothing ever feels urgent unless it is.
- Border radius: sm 6px, md 8px, lg 12px, pill 999px — Consistent gentle rounding; 8px is the workhorse. Pills only for status chips.
- Border treatment: 1px solid #d7e0e8 — Soft cool hairlines define structure; focus and validation states carry the color, not decoration.

### Shadows

- soft: `0 2px 8px rgba(0, 0, 0, 0.06)` — Default card elevation
- soft-md: `0 4px 16px rgba(0, 0, 0, 0.08)` — Dropdowns, popovers, hovered cards
- soft-lg: `0 12px 32px rgba(0, 0, 0, 0.10)` — Modals and dialogs

### Layout

- Max content width: 1200px
- Single-purpose screens: one primary task per view, especially in flows
- Forms in a single column, labels above fields, generous vertical rhythm
- Cards group related clinical info with clear headed sections
- Status always shown as icon + color + text, never color alone

### Effects

- Soft blue-gray tint blocks (#f2f6f9) to group content without borders
- Tinted icon circles for wayfinding
- Subtle skeleton shimmer for loading states

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 120ms / 200ms / 320ms
- Quiet, functional transitions — fades and 4px slides only
- Validation feedback appears instantly, without bounce or celebration
- Nothing auto-animates in the periphery of a form; motion never competes with a task

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f2f6f9;
  --color-text: #1a2b3c;
  --color-text-muted: #5a6b7c;
  --color-accent: #0077c8;
  --color-teal: #00a3a1;
  --color-success: #1e7d43;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-border: #d7e0e8;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-soft-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-soft-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
  --border-default: 1px solid #d7e0e8;
  --font-display: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar, 64px, 1px bottom border; logo left, plain-language links, prominent 'Get care' or emergency action right in clinical blue
- **Hero:** Plain-language headline in IBM Plex Sans over white, supportive subline, blue primary CTA plus a low-commitment secondary, trust signals (certifications, privacy) immediately visible
- **Card:** White surface, 8px radius, soft shadow, tinted icon circle, clear heading, 24px padding; optional colored left border for status categories
- **Button (primary):** Clinical blue fill, white text, 8px radius, 44px minimum height; darkens on hover, 3px visible focus ring
- **Button (secondary):** White fill, 1px blue border, blue text; tints #f2f6f9 on hover
- **Form fields:** White fill, 1px border, 8px radius, label above, helper text below; focus shows a 2px blue border plus offset ring; errors pair red border with icon and message

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The calm clinical card: white surface, 8px radius, whisper shadow (0 2px 8px rgba(0,0,0,.06)), a clinical-blue icon in a soft gray-blue tint circle, and unambiguous labeling — every element looks triple-checked. Spend boldness here; keep everything else quiet.

## Do

- Write labels in plain language a worried patient understands at a glance
- Meet WCAG AA at minimum and aim for AAA on core reading paths
- Pair every status color with an icon and explicit text
- Keep one primary action per screen; reduce choices in stressful flows
- Make focus states obvious — many users navigate by keyboard or switch

## Don't

- No decorative motion, playful bounces, or attention-grabbing effects
- Never rely on color alone to convey clinical meaning
- Don't use fear-toned reds for anything but true criticality
- Avoid dense unbroken data walls — chunk with tint blocks and headings
- No dark patterns anywhere; consent flows must be genuinely neutral

## Accessibility notes

- This style's defining constraint is a high accessibility bar: treat WCAG 2.2 AA as the floor and AAA as the target for body text — #1a2b3c on white is ~13:1
- Clinical blue #0077c8 on white is ~4.7:1 — passes AA for normal text; do not lighten it for aesthetics
- Teal #00a3a1 on white is ~3.1:1 — large text, charts, and decorative use only, never body text or small icons without labels
- Support 200% text zoom without loss, 44px minimum touch targets, full keyboard operability, and visible focus everywhere; health information must also respect reduced-motion and screen-reader flows because the audience skews older and includes users in distress

## Reference sites

- NHS digital service manual: https://service-manual.nhs.uk
- Zocdoc: https://www.zocdoc.com
- Oscar Health: https://www.hioscar.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip medical-clinical.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/medical-clinical.json

Settings → Capabilities → Skills → Upload skill → medical-clinical.zip