Clinical Terminal
AboutSign in

ProPeer Resources design system

propeer.com

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

Corrections or removal: agent@clinicalterminal.com

ProPeer Resources homepage

Palette

Other named colors

Type

Headings
Montserrat · closest free match for Proxima Nova

ProPeer Resources at a glance

Body
Archivo · closest free match for Product Sans

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

Shape & depth

Cards and panels: 5px corners · buttons and chips: 0px.

Corner radii

Shadows

Gradients

Breakpoints: 350px · 400px · 410px · 480px · 568px · 575px · 767px · 768px · 991px · 992px · 1024px · 1090px

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: "ProPeer Resources"
domain: "propeer.com"
colors:
  primary: "#1DA590"
  onPrimary: "#000000"
  dark: "#313D3C"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#313D3C"
  accent: "#008672"
fonts:
  heading: "Montserrat"
  body: "Archivo"
radius:
  card: "5px"
  button: "0px"
---

# Design System — ProPeer Resources

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

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

## Color
- **Accent on the ground: #008672** (4.51:1), adjusted from ProPeer Resources's primary #1DA590 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #1DA590** for filled shapes (buttons, chips, bars), with #000000 text on it (6.84:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Montserrat**. Body: **Archivo**. Both on Google Fonts.
- ProPeer Resources's site uses Proxima Nova / Product Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--e-global-color-c877d2f`: `#FFFFFF`

### Typefaces

- Proxima Nova
- Product Sans
- Oswald — on Google Fonts
- Roboto — on Google Fonts
- Maven Pro
- ProximaNova

### Type scale (most-used sizes)

`40px` · `35px` · `33px` · `30px` · `24px` · `20.25px` · `20px` · `18px` · `16px` · `15.75px` · `0.875rem` · `13px`

### Letter-spacing

`1.34px` (4) · `.44px` (2) · `1.62px` (2) · `2.32px` (1)

### Corner radii (most-used)

`4px` · `5px` · `50px` · `16px` · `100%` · `1px` · `35px` · `25px` · `90px` · `6px`

### Shadows

- `0px 0px 30px 0px rgb(32 32 32 / 25%)`
- `0 5px 15px rgb(0 0 0 / 50%)`
- `0 26px 30px 0 rgb(32 32 32 / 25%)`
- `10px 6px 15px -4px rgba(0,0,0,.19)`
- `0px 1px 2px rgb(22 22 22 / 10%)`
- `0 0 65px 0 rgb(0 0 0 / 8%)`

### Gradients

- `linear-gradient(109deg,#155fa0 21%,#c6d0d0)`
- `linear-gradient(171deg,#1da590,#155fa0)`
- `linear-gradient(160deg,#1da590,#155fa0)`
- `linear-gradient(130deg,#155fa0,#c6d0d0)`
- `linear-gradient(158deg,#fff 38%,#d9efff)`
- `linear-gradient(109deg,#1da590 63%,#155fa0)`

### Breakpoints

350px · 400px · 410px · 480px · 568px · 575px · 767px · 768px · 991px · 992px · 1024px · 1090px · 1100px · 1160px · 1200px · 1280px · 1300px · 1366px · 1400px · 1500px · 1875px