Clinical Terminal
AboutSign in

Datavant design system

datavant.com

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

Corrections or removal: agent@clinicalterminal.com

Datavant homepage

Palette

Other named colors

Type

Headings
Archivo · closest free match for PP Mori

Datavant at a glance

Body
Archivo · closest free match for PP Mori

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 420px · 479px · 480px · 560px · 570px · 576px · 600px · 640px · 680px · 700px · 720px · 756px

Voice

Tone: professional. Energy: low. Written for enterprises.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Datavant"
domain: "datavant.com"
colors:
  primary: "#14E7E8"
  onPrimary: "#000000"
  dark: "#020202"
  accent: "#475FF2"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#020202"
  accent: "#008386"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "8px"
  button: "8px"
---

# Design System — Datavant

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

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

## Color
- **Accent on the ground: #008386** (4.57:1), adjusted from Datavant's primary #14E7E8 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #14E7E8** for filled shapes (buttons, chips, bars), with #000000 text on it (13.63:1).
- Secondary accent #475FF2: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Datavant's site uses PP Mori / PP Mori; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--txt`: `#000000`
- `--boxed-bg`: `#ECEAE4`
- `--cju-bg`: `#000000`
- `--tile-bg`: `#D6FFFF`
- `--tile-bg-hover`: `#000000`
- `--tile-fg`: `#0B0B0B`
- `--tile-fg-hover`: `#FFFFFF`
- `--muted`: `#B6C5BD`
- `--accent`: `#14E7E8`
- `--cfw-accent`: `#14E7E8`
- `--cfw-violet`: `#475FF2`
- `--hc-text`: `#FFFFFF`
- `--hc-bg`: `#020202`
- `--blue-links`: `#009AE5`
- `--black`: `#000000`
- `--cyan`: `#14E7E8`
- `--white`: `#FFFFFF`
- `--gray`: `#333333`
- `--grey-background`: `#F9F9F9`
- `--text-grey`: `#595959`
- `--dark-gray`: `#202020`
- `--off-white`: `#ECEAE4`
- `--medium-cyan`: `#D6FFFF`
- `--industry-solutions-light-bg`: `#FFFFFF`
- `--industry-solutions-dark-bg`: `#020202`
- `--grad-top`: `#B8FFF5`
- `--grad-bottom`: `#FFFFFF`
- `--ms-accent`: `#21DFDF`
- `--ms-dot`: `#000000`
- `--ms-text-color`: `#FFFFFF`
- `--pl3d-violet`: `#475FF2`
- `--pl3d-ink`: `#020202`
- `--pex-accent`: `#14E7E8`
- `--pex-purple`: `#8B9BFD`
- `--pex-tag`: `#475FF2`
- `--pex-panel`: `#000000`
- `--pex-card`: `#161616`
- `--pex-control`: `#2C2C2C`
- `--pex-field-dark`: `#333333`
- `--pex-hairline`: `#FFFFFF`
- `--pex-ink`: `#101828`
- `--pex-muted`: `#475467`
- `--pex-field`: `#F2F4F7`
- `--pex-on-dark`: `#FFFFFF`
- `--pex-on-dark-soft`: `#FFFFFF`
- `--cta`: `#ECEAE4`
- `--cta-txt`: `#000000`
- `--stats-divider-color`: `#E5E5E5`
- `--tc-dark-card-border`: `#020202`
- `--dv-nav-ink`: `#202020`
- `--dv-nav-black`: `#020202`
- `--dv-nav-muted`: `#000000`
- `--dv-nav-muted-text`: `#475467`
- `--dv-nav-border`: `#E5E5E5`
- `--dv-nav-rule`: `#000000`
- `--dv-nav-brand`: `#475FF2`
- `--dv-nav-navy`: `#1D2939`
- `--dv-nav-cyan`: `#14E7E8`
- `--dv-nav-cyan-border`: `#2DE2ED`
- `--dv-nav-teal`: `#091F1F`
- `--dv-nav-divider`: `#F0EEE9`
- `--white-2`: `#FFFFFF`
- `--black-2`: `#000000`

### Typefaces

- PP Mori (`--hc-font`)
- DM Sans — on Google Fonts
- tcx
- Open Sans — on Google Fonts

### Type scale (most-used sizes)

`48px` · `42px` · `40px` · `32px` · `28px` · `24px` · `20px` · `18px` · `16px` · `1rem` · `14px` · `12px`

### Letter-spacing

`-.48px` (30) · `-.4px` (28) · `-.64px` (17) · `-.8px` (14) · `-1.08px` (10) · `-.96px` (10)

### Corner radii (most-used)

`4px` · `50px` · `50%` · `8px` · `6px` · `999px` · `10px` · `2px` · `9999px` · `3px`

### Shadows

- `inset 0 4px 4px rgba(231,231,231,.15),inset 0 -3px 8px rgba(231,231,231,.25)`
- `0 12px 60px #614f4f1a`
- `inset 2px 2px 2px #e9e9e9`
- `none !important`
- `0px 12px 60px 0px rgba(0,18,38,0.1)`
- `0 12px 60px #0012261a`

### Gradients

- `linear-gradient(122.41deg,#020202 6.72%,#232323 50.16%,#020202 104.9%)`
- `linear-gradient(122deg,#14e7e8 6.7%,#6dfbfc 50.2%,#14e7e8 104.9%)`
- `linear-gradient(90deg,#14e7e8 0%,#f341f0 100%)`
- `linear-gradient(180deg,rgba(27,27,27,0) 0%,#1b1b1b 100%)`
- `linear-gradient(#000c,#fff0)`
- `linear-gradient(#0003,#0003)`

### Breakpoints

420px · 479px · 480px · 560px · 570px · 576px · 600px · 640px · 680px · 700px · 720px · 756px · 760px · 767px · 768px · 800px · 900px · 960px · 980px · 981px · 990px · 991px · 992px · 993px · 1024px · 1025px · 1069px · 1080px · 1120px · 1180px · 1200px · 1260px · 1279px · 1280px · 1339px · 1340px · 1366px · 1400px · 1440px · 1490px · 1640px · 1920px