Healthcare IT Leaders design system

healthcareit.com

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

Corrections or removal: agent@clinicalterminal.com

Palette

Ground
#FFFFFF
--white
Ink
#475A70
Accent on the ground
#1E6FCB
Primary
#1E6FCB
--blue-600
On primary
#FFFFFF
--white
Secondary accent
#F2A24B
--accent-500
Dark
#475A70
--slate-600
Site background
#FFFFFF
--white

Color ramps

Navy

600

#1A4A78

700

#123A60

800

#0C2B4A

900

#07203A

Blue

#F1F7FE

100

#E3EEFB

500

#2E86E0

600

#1E6FCB

700

#155BB0

Teal

#E7F6F4

300

#6FD0C5

500

#14A697

600

#0F8F84

Accent

100

#FCECD8

500

#F2A24B

600

#D97F2A

Slate

#F6F8FB

100

#EEF2F7

200

#DFE6EE

300

#C6D0DB

400

#94A3B3

500

#64748B

600

#475A70

700

#314256

Other named colors

--ink #0F1F30
--white #FFFFFF

Type

Headings

Archivo · closest free match for Schibsted Grotesk

Healthcare IT Leaders at a glance

Body

Public Sans

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

15.5pxHealthcare IT Leaders
15pxHealthcare IT Leaders
14pxHealthcare IT Leaders
13.5pxHealthcare IT Leaders
13pxHealthcare IT Leaders
12.5pxHealthcare IT Leaders
12pxHealthcare IT Leaders
11.5pxHealthcare IT Leaders

Shape & depth

Cards and panels: 8px corners · buttons and chips: 11px.

Corner radii

50%
used in 14 rules
8px
used in 10 rules
999px
used in 8 rules
10px
used in 5 rules
2px
used in 4 rules
5px
used in 4 rules
12px
used in 3 rules
7px
used in 3 rules
3px
used in 2 rules
9px
used in 2 rules

Shadows

0 0 12px #2e86e08c
used in 1 rule
0 0 0 6px #2e86e029,0 12px 26px -8px #2e86e0d9
used in 1 rule
0 0 0 6px #f2a24b2e,0 12px 26px -8px #f2a24be6
used in 1 rule

Gradients

radial-gradient(70% 70% at 70% 30%,#000,transparent 75%)
used in 2 rules
radial-gradient(1100px 600px at 88% -10%,rgba(20,166,151,.16),transparent 60%)
used in 1 rule
radial-gradient(900px 560px at 8% 8%,rgba(46,134,224,.18),transparent 55%)
used in 1 rule
radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px)
used in 1 rule

Breakpoints: 480px · 520px · 560px · 620px · 640px · 720px · 740px · 760px · 860px · 900px · 920px · 980px

Voice

Tone: professional. Energy: high. Written for businesses.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Healthcare IT Leaders"
domain: "healthcareit.com"
colors:
  primary: "#1E6FCB"
  onPrimary: "#FFFFFF"
  dark: "#475A70"
  accent: "#F2A24B"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#475A70"
  accent: "#1E6FCB"
fonts:
  heading: "Archivo"
  body: "Public Sans"
radius:
  card: "8px"
  button: "11px"
---

# Design System — Healthcare IT Leaders

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

## Ground
- **Light ground** (#FFFFFF), from Healthcare IT Leaders's site background #FFFFFF. Pages and panels sit on it.
- Main text: #475A70 (7.08:1 on the ground).
- Secondary text is #475A70 at 88% / 76% / 60%; hairlines and plate borders #475A70 at 16%.

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

## Type
- Headlines: **Archivo**. Body: **Public Sans**. Both on Google Fonts.
- Healthcare IT Leaders's site uses Schibsted Grotesk / Public Sans; these are the closest free look-alikes.

## Shape
- Cards and panels: 8px corners. Buttons and chips: 11px.

## Voice
- Tone: professional. Energy: high. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Navy** (`--navy-N`): 600 `#1A4A78` · 700 `#123A60` · 800 `#0C2B4A` · 900 `#07203A`
- **Blue** (`--blue-N`): 50 `#F1F7FE` · 100 `#E3EEFB` · 500 `#2E86E0` · 600 `#1E6FCB` · 700 `#155BB0`
- **Teal** (`--teal-N`): 50 `#E7F6F4` · 300 `#6FD0C5` · 500 `#14A697` · 600 `#0F8F84`
- **Accent** (`--accent-N`): 100 `#FCECD8` · 500 `#F2A24B` · 600 `#D97F2A`
- **Slate** (`--slate-N`): 50 `#F6F8FB` · 100 `#EEF2F7` · 200 `#DFE6EE` · 300 `#C6D0DB` · 400 `#94A3B3` · 500 `#64748B` · 600 `#475A70` · 700 `#314256`

### Other named colors

- `--ink`: `#0F1F30`
- `--white`: `#FFFFFF`

### Typefaces

- Schibsted Grotesk (`--font-display`)
- Public Sans (`--font-body`) — on Google Fonts
- IBM Plex Mono (`--font-mono`)

### Type scale (most-used sizes)

`15.5px` · `15px` · `14px` · `13.5px` · `13px` · `12.5px` · `12px` · `11.5px` · `11px` · `10.5px` · `10px` · `9.5px`

### Letter-spacing

`.1em` (5) · `-.01em` (4) · `-.02em` (3) · `.08em` (3) · `.06em` (3) · `.12em` (2)

### Corner radii (most-used)

`50%` · `8px` · `999px` · `10px` · `2px` · `5px` · `12px` · `7px` · `3px` · `9px`

### Shadows

- `0 0 12px #2e86e08c`
- `0 0 0 6px #2e86e029,0 12px 26px -8px #2e86e0d9`
- `0 0 0 6px #f2a24b2e,0 12px 26px -8px #f2a24be6`

### Gradients

- `radial-gradient(70% 70% at 70% 30%,#000,transparent 75%)`
- `radial-gradient(1100px 600px at 88% -10%,rgba(20,166,151,.16),transparent 60%)`
- `radial-gradient(900px 560px at 8% 8%,rgba(46,134,224,.18),transparent 55%)`
- `radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px)`

### Breakpoints

480px · 520px · 560px · 620px · 640px · 720px · 740px · 760px · 860px · 900px · 920px · 980px · 1000px