---
generator: clinical-terminal-brand-kit
company: "Definitive Healthcare"
domain: "definitivehc.com"
colors:
  primary: "#41187D"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#6735FF"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#41187D"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "10px"
  button: "100px"
---

# Design System — Definitive Healthcare

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

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

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

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.
- Definitive Healthcare's site uses Suisse Intl / Suisse Intl; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Ssa Color Palette Gray** (`--ssa-color-palette-gray-N`): 10 `#F2F2F2` · 20 `#DBDBDC` · 30 `#BFBFBF` · 70 `#484848` · 80 `#333333` · 90 `#222222`
- **Gray** (`--gray-N`): 10 `#F2F2F2` · 20 `#DBDBDC` · 30 `#BFBFBF` · 70 `#484848` · 80 `#323232` · 90 `#222222`

### Other named colors

- `--ssa-color-palette-black`: `#000000`
- `--ssa-color-palette-blue`: `#00C1F3`
- `--ssa-color-palette-brand-color`: `#41197D`
- `--ssa-color-palette-brand-color-dark`: `#1A89C9`
- `--ssa-color-palette-brand-color-light`: `#6735FF`
- `--ssa-color-palette-brighter-purple`: `#6735FF`
- `--ssa-color-palette-burnt-orange`: `#D15A20`
- `--ssa-color-palette-dark-purple`: `#41197D`
- `--ssa-color-palette-darker-gray`: `#454545`
- `--ssa-color-palette-gray`: `#838383`
- `--ssa-color-palette-green`: `#2A834E`
- `--ssa-color-palette-light-purple`: `#6735FF`
- `--ssa-color-palette-light-tan`: `#F7EFE9`
- `--ssa-color-palette-lighter-tan`: `#F9F6F4`
- `--ssa-color-palette-maroon`: `#BA5120`
- `--ssa-color-palette-medium-black`: `#1E083B`
- `--ssa-color-palette-navy`: `#2B0F4F`
- `--ssa-color-palette-orange`: `#D68712`
- `--ssa-color-palette-pink`: `#EA8B7B`
- `--ssa-color-palette-real-gray`: `#DDDDDD`
- `--ssa-color-palette-real-light-blue`: `#DDECFF`
- `--ssa-color-palette-real-light-purple`: `#E6E6F4`
- `--ssa-color-palette-real-mid-gray`: `#AFAFAF`
- `--ssa-color-palette-real-mid-purple`: `#CDCBFF`
- `--ssa-color-palette-soft-black`: `#201F1E`
- `--ssa-color-palette-tan`: `#E9DED4`
- `--ssa-color-palette-white`: `#FFFFFF`
- `--brighter-purple`: `#6735FF`
- `--light-purple`: `#6735FF`
- `--dark-purple`: `#41197D`
- `--green`: `#2A834E`
- `--brand-color`: `#41197D`
- `--brand-color-light`: `#6735FF`
- `--brand-color-dark`: `#1A89C9`
- `--blue`: `#00C1F3`
- `--maroon`: `#BA5120`
- `--pink`: `#EA8B7B`
- `--navy`: `#2B0F4F`
- `--orange`: `#D68712`
- `--burnt-orange`: `#D15A20`
- `--tan`: `#E9DED4`
- `--light-tan`: `#F7EFE9`
- `--lighter-tan`: `#F9F6F4`
- `--medium-black`: `#1E083B`
- `--darker-gray`: `#454545`
- `--gray`: `#838383`
- `--black`: `#000000`
- `--white`: `#FFFFFF`

### Typefaces

- Roboto (`--ssa-font-stacks-roboto`) — on Google Fonts
- Suisse Int'l (`--ssa-font-stacks-suisse-intl`)
- icomoon
- $coh-font-arial
- Warnock Pro

### Type scale (most-used sizes)

`3rem` · `2.5rem` · `2.25rem` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `0.9375rem` · `0.875rem` · `0.75rem`

### Letter-spacing

`-0.02em` (51) · `-0.0625rem` (2) · `-0.02rem` (2) · `0.08em` (1) · `-0.045rem` (1) · `.08rem` (1)

### Corner radii (most-used)

`0.25rem` · `100%` · `6.25rem` · `50%` · `0.625rem` · `0.5rem` · `1.875rem` · `1rem` · `6px` · `100px`

### Shadows

- `0rem 0.25rem 1rem rgba(0,0,0,0.08)`
- `inset 0rem 0rem 0rem 0rem rgba(0,0,0,0)`
- `inset 0rem -0.125rem 0rem 0rem rgba(0,0,0,0)`
- `1px 3px 2px 2px rgba(0,0,0,0.25)`
- `0rem 0.3125rem 1rem rgba(0,0,0,0.08)`
- `0 1px 2px rgba(23,26,28,0.25)`

### Gradients

- `linear-gradient(white,white)`
- `linear-gradient(0deg,rgba(0,0,0,0.1),rgba(0,0,0,0.1))`
- `linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0))`
- `linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.1))`
- `linear-gradient(90deg,rgba(0,0,0,0.1),rgba(0,0,0,0))`
- `linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0.1))`

### Breakpoints

564px · 767px · 768px · 1110px · 1111px · 1399px · 1599px