Clinical Terminal
AboutSign in

Winspire RCM design system

winspirercm.com

Read from Winspire RCM's public website by Clinical Terminal. Not reviewed by Winspire RCM. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Winspire RCM homepage

Palette

Color ramps

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

Other named colors

Type

Headings
Outfit

Winspire RCM at a glance

Body
Outfit

Clear, readable paragraphs for clinicians, buyers and patients alike.

Shape & depth

Cards and panels: 20px corners · buttons and chips: 100px.

Corner radii

Shadows

Gradients

Breakpoints: 480px · 640px · 700px · 768px · 769px · 860px · 900px · 992px · 1024px · 1025px · 1100px · 1200px

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
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