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

# QHR design system

qhr.com

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

Corrections or removal: <agent@clinicalterminal.com>

![QHR logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F101143908.svg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--ep-white

- Ink

  \#012C7D

- Accent on the ground

  \#064AD9

- Primary

  \#064AD9

- On primary

  \#FFFFFF

  \--ep-white

- Secondary accent

  \#FCC335

- Highlight

  \#1987F1

- Dark

  \#012C7D

- Site background

  \#FFFFFF

  \--ep-white

## Color ramps

Ep Gray

50

\#F9FAFB

100

\#F3F4F6

200

\#E5E7EB

300

\#D1D5DB

400

\#9CA3AF

500

\#6B7280

600

\#4B5563

700

\#374151

800

\#1F2937

900

\#111827

## Other named colors

- \--viewer-primary-color #343434
- \--viewer-icons-hover-bgcolor #453838
- \--viewer-icons-color #343434
- \--epyp-bg #0F0F0F
- \--epyp-surface #181818
- \--epyp-border #2A2A2A
- \--epyp-text #F1F1F1
- \--epyp-text-dim #AAAAAA
- \--epyp-accent #FF0000
- \--epyp-focus #3EA6FF
- \--ep-primary #007CBA
- \--ep-primary-hover #005A87
- \--ep-primary-light #E6F3FF
- \--ep-secondary #50575E
- \--ep-secondary-hover #3C434A
- \--ep-secondary-light #F6F7F7
- \--ep-success #00A32A
- \--ep-success-light #E6F7E6
- \--ep-warning #DBA617
- \--ep-warning-light #FFF8E5
- \--ep-error #D63638
- \--ep-error-light #FFEAEA
- \--ep-info #72AEE6
- \--ep-info-light #E5F5FF
- \--ep-white #FFFFFF
- \--ep-black #000000
- \--ha-tooltip-arrow-color #000000
- \--epyp-surface-2 #212121

## Type

Headings

Poppins

QHR at a glance

Body

Poppins

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

- 32pxQHR
- 24pxQHR
- 22pxQHR
- 20pxQHR
- 16pxQHR
- 1rem · 16pxQHR
- 15pxQHR
- 14pxQHR

## Shape & depth

Cards and panels: 8px corners · buttons and chips: 30px.

### Corner radii

- 50%

  used in 31 rules

- 4px

  used in 25 rules

- 10px

  used in 23 rules

- 5px

  used in 12 rules

- 8px

  used in 10 rules

- 6px

  used in 10 rules

- 15px

  used in 6 rules

- 50px

  used in 6 rules

- 999px

  used in 4 rules

- 20px

  used in 4 rules

### Shadows

- none!important

  used in 6 rules

- 0 0 -10px rgba(232,189,109,.88)

  used in 3 rules

- 0 0 0 10px rgba(204,169,44,0)

  used in 2 rules

- 0 0 50px rgba(232,189,109,.88)

  used in 1 rule

- 0 0 100px rgba(232,189,109,0)

  used in 1 rule

- 0 0 200px rgba(232,189,109,.88)

  used in 1 rule

### Gradients

- linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4)

  used in 1 rule

- linear-gradient(to top,rgba(15,15,15,.95) 55%,rgba(15,15,15,0))

  used in 1 rule

- linear-gradient(181.32deg,#fffbf8 1.12%,#fff 98.95%)

  used in 1 rule

- linear-gradient(135deg,#f8f7fc,#fff)

  used in 1 rule

- linear-gradient(90deg,#eef0f600 0,#ffffffd9,#eef0f600)

  used in 1 rule

- linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))

  used in 1 rule

Breakpoints: 420px · 480px · 482px · 500px · 520px · 530px · 537px · 576px · 580px · 600px · 640px · 767px

## Voice

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

## 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%2F101143908.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "QHR"
domain: "qhr.com"
colors:
  primary: "#064AD9"
  onPrimary: "#FFFFFF"
  dark: "#012C7D"
  accent: "#FCC335"
  highlight: "#1987F1"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#012C7D"
  accent: "#064AD9"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "8px"
  button: "30px"
---

# Design System — QHR

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

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

## Color
- **Accent on the ground: #064AD9** (7.03:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #064AD9** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.03:1).
- Secondary accent #FCC335: charts and a second data series only.
- Highlight #1987F1 (from QHR's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

## Type
- Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Ep Gray** (`--ep-gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 200 `#E5E7EB` · 300 `#D1D5DB` · 400 `#9CA3AF` · 500 `#6B7280` · 600 `#4B5563` · 700 `#374151` · 800 `#1F2937` · 900 `#111827`

### Other named colors

- `--viewer-primary-color`: `#343434`
- `--viewer-icons-hover-bgcolor`: `#453838`
- `--viewer-icons-color`: `#343434`
- `--epyp-bg`: `#0F0F0F`
- `--epyp-surface`: `#181818`
- `--epyp-border`: `#2A2A2A`
- `--epyp-text`: `#F1F1F1`
- `--epyp-text-dim`: `#AAAAAA`
- `--epyp-accent`: `#FF0000`
- `--epyp-focus`: `#3EA6FF`
- `--ep-primary`: `#007CBA`
- `--ep-primary-hover`: `#005A87`
- `--ep-primary-light`: `#E6F3FF`
- `--ep-secondary`: `#50575E`
- `--ep-secondary-hover`: `#3C434A`
- `--ep-secondary-light`: `#F6F7F7`
- `--ep-success`: `#00A32A`
- `--ep-success-light`: `#E6F7E6`
- `--ep-warning`: `#DBA617`
- `--ep-warning-light`: `#FFF8E5`
- `--ep-error`: `#D63638`
- `--ep-error-light`: `#FFEAEA`
- `--ep-info`: `#72AEE6`
- `--ep-info-light`: `#E5F5FF`
- `--ep-white`: `#FFFFFF`
- `--ep-black`: `#000000`
- `--ha-tooltip-arrow-color`: `#000000`
- `--epyp-surface-2`: `#212121`

### Typefaces

- Poppins — on Google Fonts

### Type scale (most-used sizes)

`32px` · `24px` · `22px` · `20px` · `16px` · `1rem` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`.04em` (1) · `.01em` (1) · `.3px` (1) · `.06em` (1)

### Corner radii (most-used)

`50%` · `4px` · `10px` · `5px` · `8px` · `6px` · `15px` · `50px` · `999px` · `20px`

### Shadows

- `none!important`
- `0 0 -10px rgba(232,189,109,.88)`
- `0 0 0 10px rgba(204,169,44,0)`
- `0 0 50px rgba(232,189,109,.88)`
- `0 0 100px rgba(232,189,109,0)`
- `0 0 200px rgba(232,189,109,.88)`

### Gradients

- `linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4)`
- `linear-gradient(to top,rgba(15,15,15,.95) 55%,rgba(15,15,15,0))`
- `linear-gradient(181.32deg,#fffbf8 1.12%,#fff 98.95%)`
- `linear-gradient(135deg,#f8f7fc,#fff)`
- `linear-gradient(90deg,#eef0f600 0,#ffffffd9,#eef0f600)`
- `linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))`

### Breakpoints

420px · 480px · 482px · 500px · 520px · 530px · 537px · 576px · 580px · 600px · 640px · 767px · 768px · 782px · 800px · 850px · 991px · 992px · 1024px · 1200px · 1230px · 1231px · 1366px · 1400px
```