Clinical Terminal
AboutSign in

BD design system

bd.com

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

Corrections or removal: agent@clinicalterminal.com

BD logo

Palette

Color ramps

Light Black
1
#000000
19
#000000
24
#000000
25
#000000
40
#000000
75
#000000
90
#000000

Other named colors

Type

Headings
Archivo · closest free match for Primary-Body

BD at a glance

Body
Archivo · closest free match for Primary-Body

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 321px · 350px · 360px · 370px · 374px · 375px · 376px · 400px · 405px · 411px · 414px · 425px

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "BD"
domain: "bd.com"
colors:
  primary: "#044ED7"
  onPrimary: "#FFFFFF"
  dark: "#060A3D"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#060A3D"
  accent: "#044ED7"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "4px"
---

# Design System — BD

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Light Black** (`--light-black-N`): 1 `#000000` · 19 `#000000` · 24 `#000000` · 25 `#000000` · 40 `#000000` · 75 `#000000` · 90 `#000000`

### Other named colors

- `--primary-orange`: `#F27707`
- `--primary-boosted-bd-orange`: `#FF6E00`
- `--primary-blue`: `#004593`
- `--primary-grey`: `#E2E0ED`
- `--primary-dark-blue`: `#021423`
- `--primary-navy`: `#060A3D`
- `--secondary-light-blue`: `#1D74FF`
- `--secondary-teal`: `#60C9DA`
- `--secondary-purple`: `#9199D8`
- `--secondary-grey`: `#E6E6E8`
- `--neutral-dark-grey`: `#657278`
- `--neutral-light-grey`: `#EFEFEF`
- `--neutral-extra-light-grey`: `#F8F7F7`
- `--neutral-extra-dark-grey`: `#F4F5F5`
- `--primary-warm-grey`: `#D8D8D7`
- `--secondary-warm-white`: `#F8F5F2`
- `--neutral-white`: `#FFFFFF`
- `--neutral-black`: `#000000`
- `--neutral-semi-black`: `#000000`
- `--neutral-pure-black`: `#02052B`
- `--primary-boosted-bd-blue`: `#044ED7`
- `--secondary-neutral-light-grey`: `#D9D5D4`
- `--extra-light-grey`: `#F8F7F7`
- `--aurora-light`: `#F69D82`
- `--infrared-light`: `#EA786C`
- `--eclipse-light`: `#FFC764`
- `--comet-light`: `#45C5E9`
- `--nebula-light`: `#44BDAA`
- `--hernia-green`: `#39BEAB`
- `--purple`: `#9199D8`
- `--color-surface-interactive-primary-pressed`: `#05207A`
- `--secondary-dark-blue`: `#021423`
- `--primary-grey-lighter`: `#E2E0ED`
- `--extra-light-grey-alpha`: `#F8F7F7`
- `--primary-warm-grey-lighter`: `#D8D8D7`
- `--primary-warm-grey-medium`: `#D8D8D7`
- `--primary-dark-blue-medium`: `#021423`
- `--primary-dark-blue-faded`: `#021423`
- `--primary-dark-blue-alpha`: `#021423`
- `--primary-navy-light`: `#060A3D`
- `--dove-gray`: `#6F6C6C`
- `--tundora`: `#444444`
- `--gray`: `#8B8B8B`
- `--mercury`: `#E5E5E5`
- `--caribbean-green`: `#00B8B0`
- `--vivid-violet`: `#8D2A90`
- `--alabaster`: `#F7F7F7`
- `--azure-radiance`: `#008CFF`
- `--ghost`: `#C8CBD0`
- `--athens-gray`: `#F4F4F8`
- `--chetwode-blue`: `#9199D8`
- `--chetwode-blue-light`: `#9199D8`
- `--silver-chalice`: `#A0A0A0`
- `--dark-grey`: `#AAAAAA`
- `--aqua-haze`: `#F2F5F8`
- `--rolling-stone`: `#808285`
- `--bright-gray`: `#E6E9EC`
- `--silver`: `#CCCCCC`
- `--dark-silver`: `#BBBBBB`
- `--raven`: `#70798B`
- `--transparent-black`: `#000000`
- `--pistachio`: `#A0D468`
- `--lotion`: `#FBFCFD`
- `--light-lotion`: `#FDFDFD`
- `--dark-green`: `#05222A`
- `--seashell`: `#F1F1F1`
- `--dusty-gray`: `#999999`
- `--onyx`: `#33383D`
- `--celtic-blue`: `#3168D2`
- `--bd-primary-bd-purple`: `#5A398D`
- `--bd-primary-bd-teal`: `#39BEAB`
- `--bd-primary-bd-boosted-orange`: `#FF6E00`
- `--bd-primary-bd-boosted-blue`: `#044ED7`
- `--light-black-alpha`: `#000000`
- `--light-black`: `#000000`
- `--faded-black`: `#000000`
- `--faded-black-darker`: `#000000`
- `--faded-white`: `#FFFFFF`
- `--faded-white-alpha`: `#FFFFFF`
- `--adp-background-color`: `#FFFFFF`
- `--adp-background-color-hover`: `#F0F0F0`
- `--adp-background-color-active`: `#EAEAEA`
- `--adp-background-color-in-range`: `#5CC4EF`
- `--adp-background-color-in-range-focused`: `#5CC4EF`
- `--adp-background-color-selected-other-month-focused`: `#8AD5F4`
- `--adp-background-color-selected-other-month`: `#A2DDF6`
- `--adp-color`: `#4A4A4A`
- `--adp-color-secondary`: `#9C9C9C`
- `--adp-accent-color`: `#4EB5E6`
- `--adp-color-other-month`: `#DEDEDE`
- `--adp-color-disabled`: `#AEAEAE`
- `--adp-color-disabled-in-range`: `#939393`
- `--adp-color-other-month-hover`: `#C5C5C5`
- `--adp-border-color`: `#DBDBDB`
- `--adp-border-color-inner`: `#EFEFEF`
- `--adp-border-color-inline`: `#D7D7D7`
- `--adp-day-name-color`: `#FF9A19`
- `--adp-day-name-color-hover`: `#8AD5F4`
- `--adp-cell-background-color-selected`: `#5CC4EF`
- `--adp-cell-background-color-selected-hover`: `#45BCED`
- `--adp-cell-background-color-in-range`: `#5CC4EF`
- `--adp-cell-background-color-in-range-hover`: `#5CC4EF`
- `--adp-time-track-color`: `#DEDEDE`
- `--adp-time-track-color-hover`: `#B1B1B1`
- `--adp-overlay-background-color`: `#000000`
- `--bdf-surface-regular`: `#FFFFFF`
- `--bdf-surface-input`: `#FFFFFF`
- `--bdf-surface-primary`: `#044ED7`
- `--bdf-surface-primary-hover`: `#043BAB`
- `--bdf-surface-callout`: `#044ED7`
- `--bdf-surface-subtle`: `#F8F7F7`
- `--bdf-stroke-default`: `#657278`
- `--bdf-stroke-subdued`: `#D8D8D7`
- `--bdf-stroke-strong`: `#060A3D`
- `--bdf-stroke-positive`: `#00AF95`
- `--bdf-stroke-critical`: `#E43B46`
- `--bdf-stroke-callout`: `#044ED7`
- `--bdf-text-body`: `#060A3D`
- `--bdf-text-functional`: `#060A3D`
- `--bdf-text-functional-subtle`: `#324656`
- `--bdf-text-placeholder`: `#495B67`
- `--bdf-text-critical`: `#A41D3E`
- `--bdf-text-positive`: `#00797D`
- `--bdf-text-on-primary`: `#FFFFFF`
- `--bdf-text-link`: `#044ED7`
- `--bdf-text-emphasis`: `#03052B`
- `--bdf-icon-subdued`: `#324656`

### Typefaces

- FS Albert Pro (`--primary-font-family`)
- Sofia Pro (`--secondary-font-family`)
- nav" "body" "timepicker" "buttons (`--adp-grid-areas`)
- primary-body
- heading-b
- primary-body!important
- small-copy
- label

### Type scale (most-used sizes)

`44px` · `24px` · `1.5rem` · `22px` · `20px` · `1.25rem` · `18px` · `1.125rem` · `1rem` · `14px` · `.875rem` · `.87rem`

### Letter-spacing

`.0216em` (242) · `.0168em` (200) · `.0192em` (158) · `.0288em` (139) · `.1rem` (119) · `.6px` (108)

### Corner radii (most-used)

`4px` · `.25rem` · `50%` · `5px` · `30px` · `3px` · `6px` · `100%` · `20px` · `2px`

### Shadows

- `0 4px 4px 0 rgba(0,0,0,.25)`
- `0 0 0 2px rgba(62,52,211,.2),inset 0 0 0 2px rgba(62,52,211,.2)`
- `0 0 0 1px rgba(35,38,59,.1),0 6px 16px -4px rgba(35,38,59,.15)`
- `inset 0 0 0 1px rgba(128,126,163,.3)`
- `none!important`
- `0 1px 1px rgba(0,0,0,.1)`

### Gradients

- `linear-gradient(#fff, hsla(0, 0%, 100%, 0))`
- `radial-gradient(circle at 25% 50%,#044ed7 20px,transparent 21px)`
- `radial-gradient(circle at 50% 50%,#ff6e00 20px,transparent 21px)`
- `radial-gradient(circle at 75% 50%,#060a3d 20px,transparent 21px)`
- `linear-gradient(180deg,rgba(0,0,0,0.05),rgba(255,255,255,0.05),rgba(0,0,0,0.05))`
- `linear-gradient(90deg,rgba(0,0,0,0.05),rgba(255,255,255,0.05),rgba(0,0,0,0.05))`

### Breakpoints

321px · 350px · 360px · 370px · 374px · 375px · 376px · 400px · 405px · 411px · 414px · 425px · 430px · 440px · 445px · 450px · 480px · 481px · 500px · 540px · 550px · 560px · 590px · 600px · 601px · 624px · 670px · 679px · 680px · 700px · 752px · 767px · 768px · 769px · 800px · 850px · 896px · 897px · 901px · 910px · 912px · 920px · 1023px · 1024px · 1025px · 1050px · 1080px · 1100px · 1101px · 1111px · 1120px · 1199px · 1200px · 1201px · 1231px · 1240px · 1249px · 1275px · 1280px · 1300px · 1301px · 1307px · 1313px · 1339px · 1350px · 1368px · 1373px · 1379px · 1380px · 1400px · 1439px · 1440px · 1441px · 1600px · 1700px · 1800px