---
generator: clinical-terminal-brand-kit
company: "Winspire RCM"
domain: "winspirercm.com"
colors:
  primary: "#CBD5E1"
  onPrimary: "#1A1A1A"
  dark: "#090E19"
  accent: "#083151"
  background: "#000000"
ground:
  mode: dark
  hex: "#000000"
  ink: "#FFFFFF"
  accent: "#CBD5E1"
fonts:
  heading: "Outfit"
  body: "Outfit"
radius:
  card: "20px"
  button: "100px"
---

# Design System — Winspire RCM

> Read from Winspire RCM's public website (winspirercm.com) by Clinical Terminal. Not reviewed by Winspire RCM.
> Use it as inspiration: borrow the ideas, not Winspire RCM's name, logo or identity.

## Ground
- **Dark ground** (#000000), from Winspire RCM's site background #000000. Pages and panels sit on it.
- Main text: #FFFFFF (21:1 on the ground).
- Secondary text is white at 88% / 76% / 60%; hairlines and plate borders white at 16%.

## Color
- **Accent on the ground: #CBD5E1** (14.14:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #CBD5E1** for filled shapes (buttons, chips, bars), with #1A1A1A text on it (11.72:1).
- Secondary accent #083151: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Outfit**. Body: **Outfit**. Both on Google Fonts.

## Shape
- Cards and panels: 20px corners. Buttons and chips: 100px.

## Voice
- Tone: professional. Energy: low. Written for patients and healthcare professionals.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Color Sky** (`--color-sky-N`): 400 `#00BCFE` · 500 `#00A5EF` · 600 `#0084CC`
- **Color Blue** (`--color-blue-N`): 200 `#BEDBFF` · 300 `#90C5FF` · 400 `#54A2FF` · 500 `#3080FF` · 600 `#155DFC`
- **Color Indigo** (`--color-indigo-N`): 300 `#A4B3FF` · 400 `#7D87FF` · 500 `#625FFF` · 950 `#1E1A4D`
- **Color Slate** (`--color-slate-N`): 50 `#F8FAFC` · 100 `#F1F5F9` · 200 `#E2E8F0` · 300 `#CAD5E2` · 400 `#90A1B9` · 500 `#62748E` · 600 `#45556C` · 700 `#314158` · 800 `#1D293D` · 900 `#0F172B` · 950 `#020618`
- **Color Gray** (`--color-gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 200 `#E5E7EB` · 300 `#D1D5DC` · 400 `#99A1AF` · 500 `#6A7282` · 600 `#4A5565` · 800 `#1E2939` · 900 `#101828`
- **Color Neutral** (`--color-neutral-N`): 100 `#F5F5F5` · 200 `#E5E5E5` · 300 `#D4D4D4` · 700 `#404040` · 900 `#171717`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--sb-track-color`: `#232E33`
- `--sb-thumb-color`: `#FFFFFF`
- `--color-background`: `#FFFFFF`
- `--color-text`: `#1A1A1A`
- `--color-yellow-500`: `#EDB200`
- `--color-emerald-500`: `#00BB7F`
- `--color-cyan-400`: `#00D2EF`
- `--color-purple-500`: `#AC4BFF`
- `--color-rose-500`: `#FF2357`
- `--color-zinc-900`: `#18181B`
- `--color-zinc-950`: `#09090B`

### Typefaces

- Outfit — on Google Fonts
- Inter — on Google Fonts
- Poppins — on Google Fonts

### Type scale (most-used sizes)

`3rem` · `2.5rem` · `2rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1.1rem` · `1rem` · `.95rem` · `.9rem` · `.85rem` · `.75rem`

### Letter-spacing

`.1em` (21) · `.05em` (16) · `.02em` (13) · `-.02em` (13) · `.15em` (10) · `-.03em` (8)

### Corner radii (most-used)

`50%` · `24px` · `16px` · `12px` · `20px` · `999px` · `100px` · `8px` · `1.5rem` · `2rem`

### Shadows

- `0 1px 2px #0000000d`
- `0 20px 40px #0003`
- `0 10px 30px #0000001a`
- `0 10px 30px #0000000d`
- `0 20px 40px #0000004d`
- `0 4px 30px #0000001a`

### Gradients

- `linear-gradient(#fff 0 0)`
- `linear-gradient(135deg,#4f9cf9,#8b5cf6)`
- `linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)`
- `linear-gradient(135deg,#0d1f47 0%,#264792 50%,#4073bf 100%)`
- `linear-gradient(90deg,#264792,#4073bf)`
- `linear-gradient(90deg,#4073bf,#264792)`

### Breakpoints

480px · 640px · 700px · 768px · 769px · 860px · 900px · 992px · 1024px · 1025px · 1100px · 1200px · 1280px · 1400px · 1440px