---
generator: clinical-terminal-brand-kit
company: "Henry Schein One"
domain: "henryscheinone.com"
colors:
  primary: "#0071E3"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#0071E3"
fonts:
  heading: "Red Hat Text"
  body: "Red Hat Text"
radius:
  card: "6px"
  button: "4px"
---

# Design System — Henry Schein One

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

## Ground
- **Light ground** (#FFFFFF), from Henry Schein One'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: #0071E3** (4.7:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0071E3** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.7:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Red Hat Text**. Body: **Red Hat Text**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Blue** (`--blue-N`): 0 `#ECF5FF` · 10 `#A6CAFF` · 20 `#6096FF` · 30 `#0071E3` · 40 `#004FA2` · 50 `#002F66` · 60 `#00122F`
- **Purple** (`--purple-N`): 0 `#EEE9FF` · 10 `#CCBAFF` · 20 `#AC89FF` · 30 `#904FFF` · 40 `#7200E3` · 50 `#480094` · 60 `#22004B`
- **Teal** (`--teal-N`): 0 `#DEFDFF` · 10 `#C4FCFE` · 20 `#A3F7FA` · 30 `#31BABF` · 40 `#249195` · 50 `#186A6D` · 60 `#0C4648`
- **Ascend Blue** (`--ascend-blue-N`): 0 `#ECF7FF` · 10 `#CEEBFF` · 20 `#A0D9FF` · 30 `#66C5FF` · 40 `#359BF4` · 50 `#0E64F9` · 60 `#0C3FB2`
- **Ascend Green** (`--ascend-green-N`): 0 `#F4FCDA` · 10 `#D3F6A6` · 20 `#88E97E` · 30 `#00C763` · 40 `#139948` · 50 `#0B7036` · 60 `#074A24`
- **Ascend Purple** (`--ascend-purple-N`): 0 `#EFF3FF` · 10 `#D8E3FF` · 20 `#BACDFF` · 30 `#93AEFF` · 40 `#6178E8` · 50 `#4641C7` · 60 `#352392`
- **Amalgam** (`--amalgam-N`): 0 `#FCFCFC` · 10 `#F5F5F5` · 20 `#E3E3E3` · 30 `#CCCCCD` · 40 `#B6B6B7` · 50 `#9FA0A1` · 60 `#898A8B` · 70 `#5B5D5F` · 80 `#454749` · 90 `#2F3033` · 100 `#181A1D`
- **Enamel** (`--enamel-N`): 0 `#FFFBF7` · 10 `#F9F2EA` · 20 `#F3EBE4` · 30 `#ECE5DD` · 40 `#E6DED7` · 50 `#DFD8D0` · 60 `#D9D1CA` · 70 `#D2CBC3` · 80 `#CCC4BD` · 90 `#C5BEB6` · 100 `#BFB7B0`

### Other named colors

- `--atomic-primary`: `#1372EC`
- `--atomic-primary-light`: `#399FFE`
- `--atomic-primary-dark`: `#1A50AD`
- `--atomic-on-primary`: `#FFFFFF`
- `--atomic-ring-primary`: `#1372EC`
- `--atomic-neutral-dark`: `#626971`
- `--atomic-neutral-dim`: `#BFC4C8`
- `--atomic-neutral`: `#E5E8E8`
- `--atomic-neutral-light`: `#F6F7F9`
- `--atomic-neutral-lighter`: `#F2F2F2`
- `--atomic-background`: `#FFFFFF`
- `--atomic-on-background`: `#282829`
- `--atomic-success`: `#12A244`
- `--atomic-error`: `#CE3F00`
- `--atomic-visited`: `#752E9C`
- `--atomic-disabled`: `#C5CACF`
- `--atomic-success-background`: `#D4FCF0`
- `--atomic-error-background`: `#FCBDC0`
- `--atomic-primary-background`: `#EDF6FF`
- `--atomic-inline-code`: `#CD2113`
- `--color-neutral-white`: `#FFFFFF`
- `--black-0`: `#000000`
- `--color-ui-alert-10`: `#FFC5D0`
- `--color-ui-alert-100`: `#E4002B`
- `--color-ui-success-10`: `#DFFAE5`
- `--color-ui-success-100`: `#00801C`

### Typefaces

- Red Hat Text (`--font-primary`) — on Google Fonts
- Red Hat Display (`--font-secondary`) — on Google Fonts
- Geist

### Type scale (most-used sizes)

`3rem` · `2.5rem` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `18px` · `1rem` · `.875rem` · `14px` · `.75rem`

### Letter-spacing

`.0938rem` (3) · `-.2px` (1)

### Corner radii (most-used)

`4px` · `8px` · `12px` · `50%` · `24px` · `2px` · `100%` · `6px` · `10px` · `99px`

### Shadows

- `0 4px 4px #0000000d`
- `0 4px 8px -2px #0000001a`
- `inset 0 0 0 1px #cccccd`
- `none!important`
- `0 2px 10px -1px #0000001a`
- `0 4px 5px 1px #0000000d`

### Gradients

- `linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(0deg,#000,#000)`

### Breakpoints

480px · 615px · 767px · 768px · 900px · 909px · 910px · 1340px