---
generator: clinical-terminal-brand-kit
company: "Clinical Terminal"
domain: "clinicalterminal.com"
colors:
  primary: "#F8362A"
  onPrimary: "#000000"
  dark: "#F3F4F6"
  accent: "#EF4444"
  background: "#101114"
ground:
  mode: dark
  hex: "#101114"
  ink: "#FFFFFF"
  accent: "#F8362A"
fonts:
  heading: "Outfit"
  body: "Outfit"
radius:
  card: "0px"
  button: "10px"
---

# Design System — Clinical Terminal

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

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

## Color
- **Accent on the ground: #F8362A** (4.99:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #F8362A** for filled shapes (buttons, chips, bars), with #000000 text on it (5.55:1).
- Secondary accent #EF4444: 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: 0px corners. Buttons and chips: 10px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Viz L Series** (`--viz-l-series-N`): 1 `#0A0A0A` · 2 `#0369A1` · 3 `#C2410C` · 4 `#7C3AED`
- **Viz D Series** (`--viz-d-series-N`): 1 `#F3F4F6` · 2 `#0284C7` · 3 `#EA580C` · 4 `#7C3AED`
- **Viz L Seq** (`--viz-l-seq-N`): 1 `#A3A3A3` · 3 `#5C5C5C` · 4 `#3A3A3A` · 5 `#0A0A0A`
- **Viz D Seq** (`--viz-d-seq-N`): 1 `#5C5C5C` · 3 `#A3A3A3` · 4 `#C8C8C8` · 5 `#F3F4F6`

### Other named colors

- `--viz-l-better`: `#15803D`
- `--viz-d-better`: `#22C55E`
- `--viz-l-worse`: `#C2410C`
- `--viz-d-worse`: `#EA580C`
- `--viz-l-neutral`: `#A3A3A3`
- `--viz-d-neutral`: `#5C5C5C`
- `--mkt-paper`: `#FFFFFF`
- `--mkt-card`: `#FFFFFF`
- `--mkt-ink`: `#0A0A0A`
- `--mkt-body`: `#1A1A1A`
- `--mkt-soft`: `#333333`
- `--mkt-rule`: `#E2E2E2`
- `--mkt-rule-strong`: `#CDCDCD`
- `--mkt-ash`: `#6B6B6B`
- `--mkt-ash2`: `#9A9A9A`
- `--mkt-chrome`: `#DADADA`
- `--mkt-brand`: `#D21A1A`
- `--mkt-live`: `#E8362A`
- `--mkt-amber`: `#FA9E0D`
- `--mkt-warn`: `#B45309`
- `--mkt-good`: `#16A34A`

### Typefaces

- Outfit (`--font-display`) — on Google Fonts
- Newsreader (`--font-heading`) — on Google Fonts
- JetBrains Mono (`--font-mono`) — on Google Fonts

### Type scale (most-used sizes)

`2.25rem` · `30px` · `1.5rem` · `24px` · `21px` · `18px` · `15px` · `12.5px` · `12px` · `11.5px` · `11px` · `10px`

### Letter-spacing

`.06em` (2) · `-.01em` (1) · `-.015em` (1) · `-.02em` (1) · `.04em` (1) · `.08em` (1)

### Corner radii (most-used)

`9999px` · `.25rem` · `1.7rem` · `2.4rem` · `9px`

### Gradients

- `linear-gradient(90deg,#000 calc(100% - 28px),transparent)`

### Breakpoints

640px · 768px · 1024px · 1280px · 1400px · 1536px