Clinical Terminal
AboutSign in

IQVIA design system

iqvia.com

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

Corrections or removal: agent@clinicalterminal.com

IQVIA logo

Palette

Other named colors

Type

Headings
Noto Sans

IQVIA at a glance

Body
Inter · closest free match for Helvetica

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

Shape & depth

Cards and panels: 2px corners · buttons and chips: 50px.

Corner radii

Shadows

Gradients

Breakpoints: 10px · 319px · 320px · 321px · 340px · 415px · 420px · 480px · 500px · 501px · 520px · 576px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "IQVIA"
domain: "iqvia.com"
colors:
  primary: "#0C7BC0"
  onPrimary: "#FFFFFF"
  dark: "#140B42"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#140B42"
  accent: "#0C7BC0"
fonts:
  heading: "Noto Sans"
  body: "Inter"
radius:
  card: "2px"
  button: "50px"
---

# Design System — IQVIA

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

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

## Color
- **Accent on the ground: #0C7BC0** (4.56:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0C7BC0** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.56:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Noto Sans**. Body: **Inter**. Both on Google Fonts.
- IQVIA's site uses Noto Sans / Helvetica; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--primary-color`: `#0C7BC0`
- `--primary-color-bg`: `#140B42`
- `--primary-color-font`: `#FFFFFF`

### Typefaces

- Noto Sans — on Google Fonts
- Lato — on Google Fonts
- 'Lato — on Google Fonts
- iqvia' !important
- Notosans
- iqvia
- iqvia'!important

### Type scale (most-used sizes)

`40px` · `34px` · `30px` · `24px` · `22px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`1.2px` (60) · `-0.01em` (55) · `-.01em` (47) · `0.5px` (27) · `-0.5px` (15) · `-0.53px` (12)

### Corner radii (most-used)

`2px` · `50%` · `12px` · `6px` · `20px` · `24px` · `4px` · `16px` · `1px` · `32px`

### Shadows

- `0 5px 8px rgba(0, 0, 0, 0.15)`
- `0px 0px 21px -8px rgba(0, 0, 0, 0.66)`
- `1px 2px 10px -3px rgba(0, 0, 0, 0.65)`
- `0px 0px 9px -4px rgba(0, 0, 0, 0.65)`
- `10px 8px 9px -8px rgba(0, 0, 0, 0.26)`
- `1px 1px 6px -1px #2b3a42`

### Gradients

- `linear-gradient(96.89deg, #140B42 0%, #005587 100%)`
- `linear-gradient(135deg, #140B42, #005587)`
- `linear-gradient(93.82deg, #005587 0%, #00a3e0 100%)`
- `linear-gradient(90deg, #005587 0, #00a3e0)`
- `linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%)`
- `linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%)`

### Breakpoints

10px · 319px · 320px · 321px · 340px · 415px · 420px · 480px · 500px · 501px · 520px · 576px · 577px · 599px · 600px · 640px · 649px · 650px · 750px · 760px · 767px · 768px · 769px · 800px · 811px · 812px · 823px · 899px · 900px · 965px · 968px · 969px · 970px · 992px · 1000px · 1020px · 1023px · 1024px · 1100px · 1128px · 1139px · 1178px · 1179px · 1180px · 1200px · 1210px · 1240px · 1280px · 1359px · 1440px · 1445px