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

# PRI design system

provider-resources.com

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

Corrections or removal: <agent@clinicalterminal.com>

![PRI homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100012.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

- Ink

  \#000000

- Accent on the ground

  \#293665

- Primary

  \#293665

- On primary

  \#FFFFFF

- Secondary accent

  \#116DFF

- Dark

  \#000000

  \--remainderBadgeColor

- Site background

  \#FFFFFF

## Color ramps

Wbu Color Blue

0

\#0F2CCF

100

\#2F5DFF

200

\#597DFF

300

\#ACBEFF

400

\#D5DFFF

500

\#EAEFFF

600

\#F5F7FF

Wbu Color Black

0

\#151414

100

\#383838

200

\#525150

300

\#767574

400

\#A8A6A5

500

\#E0DFDF

600

\#F1F0EF

Wbu Color Red

0

\#9C2426

100

\#DF3336

200

\#E55C5E

300

\#ED8F90

400

\#F4B8B9

500

\#F9D6D7

600

\#FCEBEB

Wbu Color Green

0

\#0D4F3D

100

\#4B916D

200

\#97C693

300

\#BDE2A7

400

\#DAF3C0

500

\#EFFAE5

600

\#F1F5ED

Wbu Color Yellow

0

\#D49341

100

\#F9AD4D

200

\#FABD71

300

\#FCD29D

400

\#FDEAD2

500

\#FEF3E5

600

\#FEF6ED

Wbu Color Orange

0

\#AE3E09

100

\#FF8044

200

\#FE9361

300

\#FDA77F

400

\#FBCFBB

500

\#FBE3D9

600

\#FDF1EC

Wbu Color Purple

0

\#5000AA

100

\#7200F3

200

\#8B2DF5

300

\#BE89F9

400

\#D7B7FB

500

\#F1E5FE

600

\#F8F2FF

Wbu Color Ai

0

\#4D3DD0

100

\#5A48F5

200

\#7B6DF7

300

\#A59BFA

400

\#D6D1FC

500

\#E7E4FE

600

\#EEECFE

## Other named colors

- \--remainderBadgeColor #000000

## Type

Headings

Arimo · closest free match for arial

PRI at a glance

Body

Arimo · closest free match for arial

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

- 32pxPRI
- 28pxPRI
- 24pxPRI
- 20pxPRI
- 16pxPRI
- 14pxPRI
- 12pxPRI
- 10pxPRI

## Shape & depth

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

### Corner radii

- 50%

  used in 8 rules

- 24px

  used in 1 rule

- 300px

  used in 1 rule

### Shadows

- 0 0 1px 2px #fff

  used in 3 rules

- 0 0 #000

  used in 1 rule

- 0 0 0 2px #ffffff, 0 0 0 4px #116dff

  used in 1 rule

- inset 0 0 0 2px #ffffff, inset 0 0 0 4px #116dff !important

  used in 1 rule

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

```
---
generator: clinical-terminal-brand-kit
company: "PRI"
domain: "provider-resources.com"
colors:
  primary: "#293665"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#116DFF"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#293665"
fonts:
  heading: "Arimo"
  body: "Arimo"
radius:
  card: "4px"
  button: "4px"
---

# Design System — PRI

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

## Ground
- **Light ground** (#FFFFFF), from PRI'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: #293665** (11.6:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #293665** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (11.6:1).
- Secondary accent #116DFF: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Arimo**. Body: **Arimo**. Both on Google Fonts.
- PRI's site uses arial / arial; 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

- **Wbu Color Blue** (`--wbu-color-blue-N`): 0 `#0F2CCF` · 100 `#2F5DFF` · 200 `#597DFF` · 300 `#ACBEFF` · 400 `#D5DFFF` · 500 `#EAEFFF` · 600 `#F5F7FF`
- **Wbu Color Black** (`--wbu-color-black-N`): 0 `#151414` · 100 `#383838` · 200 `#525150` · 300 `#767574` · 400 `#A8A6A5` · 500 `#E0DFDF` · 600 `#F1F0EF`
- **Wbu Color Red** (`--wbu-color-red-N`): 0 `#9C2426` · 100 `#DF3336` · 200 `#E55C5E` · 300 `#ED8F90` · 400 `#F4B8B9` · 500 `#F9D6D7` · 600 `#FCEBEB`
- **Wbu Color Green** (`--wbu-color-green-N`): 0 `#0D4F3D` · 100 `#4B916D` · 200 `#97C693` · 300 `#BDE2A7` · 400 `#DAF3C0` · 500 `#EFFAE5` · 600 `#F1F5ED`
- **Wbu Color Yellow** (`--wbu-color-yellow-N`): 0 `#D49341` · 100 `#F9AD4D` · 200 `#FABD71` · 300 `#FCD29D` · 400 `#FDEAD2` · 500 `#FEF3E5` · 600 `#FEF6ED`
- **Wbu Color Orange** (`--wbu-color-orange-N`): 0 `#AE3E09` · 100 `#FF8044` · 200 `#FE9361` · 300 `#FDA77F` · 400 `#FBCFBB` · 500 `#FBE3D9` · 600 `#FDF1EC`
- **Wbu Color Purple** (`--wbu-color-purple-N`): 0 `#5000AA` · 100 `#7200F3` · 200 `#8B2DF5` · 300 `#BE89F9` · 400 `#D7B7FB` · 500 `#F1E5FE` · 600 `#F8F2FF`
- **Wbu Color Ai** (`--wbu-color-ai-N`): 0 `#4D3DD0` · 100 `#5A48F5` · 200 `#7B6DF7` · 300 `#A59BFA` · 400 `#D6D1FC` · 500 `#E7E4FE` · 600 `#EEECFE`

### Other named colors

- `--remainderBadgeColor`: `#000000`

### Typefaces

- Madefor Display (`--wbu-heading-font-stack`)
- normal normal normal 50px/1.4em arial (`--font_0`)
- normal normal normal 16px/1.4em din-next-w01-light (`--font_1`)
- normal normal normal 18px/1.4em arial (`--font_3`)
- normal normal normal 60px/1.4em arial (`--font_4`)
- normal normal bold 16px/1.4em arial (`--font_5`)
- normal normal normal 20px/1.4em arial (`--font_6`)
- normal normal normal 16px/1.4em arial (`--font_7`)
- normal normal normal 12px/1.4em din-next-w01-light (`--font_10`)
- normal normal normal 14px/1.4em arial (`--text-secondary-font`)
- normal normal normal 28px/1.4em arial (`--pw-responsive-name-font`)
- normal normal normal 12px/1.4em arial (`--pw-ff-font-mobile`)
- normal normal normal 14px/17px arial (`--title-font`)
- normal normal normal 16px/20px arial (`--text-primary-font`)
- din-next-w01-light (`--wix-font-Menu-family`)
- normal normal normal 16px/1.4em helvetica-w01-roman (`--fntprefix`)

### Type scale (most-used sizes)

`32px` · `28px` · `24px` · `20px` · `16px` · `14px` · `12px` · `10px`

### Letter-spacing

`-0.5px` (3)

### Corner radii (most-used)

`50%` · `24px` · `300px`

### Shadows

- `0 0 1px 2px #fff`
- `0 0 #000`
- `0 0 0 2px #ffffff, 0 0 0 4px #116dff`
- `inset 0 0 0 2px #ffffff, inset 0 0 0 4px #116dff !important`
```