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