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.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

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

Other named colors

• --remainderBadgeColor #000000

Type

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

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