[Design systems](/design-systems/) / Datavant

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100036.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--tile-fg-hover

- Ink

  \#020202

- Accent on the ground

  \#008386

- Primary

  \#14E7E8

  \--accent

- On primary

  \#000000

  \--txt

- Secondary accent

  \#475FF2

  \--cfw-violet

- Dark

  \#020202

  \--hc-bg

- Site background

  \#FFFFFF

  \--tile-fg-hover

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

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

- 48pxDatavant
- 42pxDatavant
- 40pxDatavant
- 32pxDatavant
- 28pxDatavant
- 24pxDatavant
- 20pxDatavant
- 18pxDatavant

## Shape & depth

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

### Corner radii

- 4px

  used in 47 rules

- 50px

  used in 35 rules

- 50%

  used in 34 rules

- 8px

  used in 23 rules

- 6px

  used in 16 rules

- 999px

  used in 16 rules

- 10px

  used in 15 rules

- 2px

  used in 12 rules

- 9999px

  used in 9 rules

- 3px

  used in 8 rules

### Shadows

- inset 0 4px 4px rgba(231,231,231,.15),inset 0 -3px 8px rgba(231,231,231,.25)

  used in 8 rules

- 0 12px 60px #614f4f1a

  used in 7 rules

- inset 2px 2px 2px #e9e9e9

  used in 4 rules

- none !important

  used in 3 rules

- 0px 12px 60px 0px rgba(0,18,38,0.1)

  used in 3 rules

- 0 12px 60px #0012261a

  used in 3 rules

### Gradients

- linear-gradient(122.41deg,#020202 6.72%,#232323 50.16%,#020202 104.9%)

  used in 5 rules

- linear-gradient(122deg,#14e7e8 6.7%,#6dfbfc 50.2%,#14e7e8 104.9%)

  used in 3 rules

- linear-gradient(90deg,#14e7e8 0%,#f341f0 100%)

  used in 2 rules

- linear-gradient(180deg,rgba(27,27,27,0) 0%,#1b1b1b 100%)

  used in 2 rules

- linear-gradient(#000c,#fff0)

  used in 2 rules

- linear-gradient(#0003,#0003)

  used in 2 rules

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100036.md?alt=media).

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