Clinical Terminal
AboutSign in

Elevate Patient Financial Solutions® design system

elevatepfs.com

Read from Elevate Patient Financial Solutions®'s public website by Clinical Terminal. Not reviewed by Elevate Patient Financial Solutions®. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Elevate Patient Financial Solutions® homepage

Palette

Other named colors

Type

Headings
Nunito Sans · closest free match for Avenir

Elevate Patient Financial Solutions® at a glance

Body
Nunito Sans · closest free match for Avenir

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: 500px · 600px · 601px · 700px · 750px · 760px · 768px · 769px · 782px · 783px · 800px · 900px

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: "Elevate Patient Financial Solutions®"
domain: "elevatepfs.com"
colors:
  primary: "#0772B1"
  onPrimary: "#FFFFFF"
  dark: "#001D33"
  accent: "#0075FF"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#001D33"
  accent: "#0772B1"
fonts:
  heading: "Nunito Sans"
  body: "Nunito Sans"
radius:
  card: "5px"
  button: "0px"
---

# Design System — Elevate Patient Financial Solutions®

> Read from Elevate Patient Financial Solutions®'s public website (elevatepfs.com) by Clinical Terminal. Not reviewed by Elevate Patient Financial Solutions®.
> Use it as inspiration: borrow the ideas, not Elevate Patient Financial Solutions®'s name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from Elevate Patient Financial Solutions®'s site background #FFFFFF. Pages and panels sit on it.
- Main text: #001D33 (17.16:1 on the ground).
- Secondary text is #001D33 at 88% / 76% / 60%; hairlines and plate borders #001D33 at 16%.

## Color
- **Accent on the ground: #0772B1** (5.18:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0772B1** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.18:1).
- Secondary accent #0075FF: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Nunito Sans**. Body: **Nunito Sans**. Both on Google Fonts.
- Elevate Patient Financial Solutions®'s site uses Avenir / Avenir; 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

- `--fieldset-color`: `#000000`
- `--title-color`: `#002F52`
- `--form-desc-color`: `#002F52`
- `--label-color`: `#3F4B5B`
- `--required-color`: `#B94A48`
- `--description-color`: `#002F52`
- `--text-color`: `#002F52`
- `--border-color`: `#BFC3C8`
- `--bg-color`: `#FFFFFF`
- `--bg-color-active`: `#FFFFFF`
- `--border-color-active`: `#0070F0`
- `--text-color-error`: `#444444`
- `--bg-color-error`: `#FFFFFF`
- `--border-color-error`: `#B94A48`
- `--bg-color-disabled`: `#FFFFFF`
- `--border-color-disabled`: `#E5E5E5`
- `--text-color-disabled`: `#A1A1A1`
- `--check-label-color`: `#444444`
- `--section-color`: `#444444`
- `--section-border-color`: `#E8E8E8`
- `--repeat-icon-color`: `#FFFFFF`
- `--submit-bg-color`: `#0070F0`
- `--submit-border-color`: `#0070F0`
- `--submit-text-color`: `#FFFFFF`
- `--submit-shadow-color`: `#EEEEEE`
- `--submit-hover-bg-color`: `#0070F0`
- `--submit-hover-color`: `#FFFFFF`
- `--submit-hover-border-color`: `#0070F0`
- `--submit-active-bg-color`: `#0070F0`
- `--submit-active-color`: `#FFFFFF`
- `--submit-active-border-color`: `#0070F0`
- `--error-bg`: `#FFFFFF`
- `--error-border`: `#002F52`
- `--error-text`: `#002F52`
- `--success-bg-color`: `#FFFFFF`
- `--success-border-color`: `#002F52`
- `--success-text-color`: `#002F52`
- `--progress-bg-color`: `#EAEAEA`
- `--progress-color`: `#3F4B5B`
- `--progress-active-bg-color`: `#0070F0`
- `--progress-active-color`: `#FFFFFF`
- `--progress-border-color`: `#E5E5E5`
- `--toggle-on-color`: `#0070F0`
- `--toggle-off-color`: `#EAEAEA`
- `--slider-color`: `#0070F0`
- `--slider-bar-color`: `#EAEAEA`
- `--date-head-bg-color`: `#0070F0`
- `--date-head-color`: `#555555`
- `--date-band-color`: `#0070F0`
- `--v-tl-border-color`: `#EFEFEF`
- `--frm-views-calendar-border-color`: `#D1D1DB`
- `--frm-views-calendar-background-hover-color`: `#F9F9FB`
- `--frm-views-calendar-color`: `#282833`
- `--frm-views-calendar-accent-color`: `#00ACFF`
- `--frm-views-calendar-accent-bg-color`: `#00ACFF`
- `--frm-views-calendar-background-color`: `#FFFFFF`
- `--frm-views-timeline--line-color`: `#98A2B3`
- `--frm-views-timeline--marker-color`: `#12B76A`
- `--frm-views-timeline--card-background`: `#FFFFFF`
- `--frm-views-timeline--text-color`: `#1D2939`
- `--frm-views-timeline--popup-background`: `#FFFFFF`
- `--frm-views-timeline--popup-text-color`: `#1D2939`
- `--progress-border-color-b`: `#DBDBDB`
- `--ss-primary-color`: `#5897FB`
- `--ss-font-placeholder-color`: `#8D8D8D`
- `--ss-disabled-color`: `#DCDEE2`
- `--ss-highlight-color`: `#FFFB8C`
- `--ss-success-color`: `#00B755`
- `--ss-error-color`: `#DC3545`
- `--ss-focus-color`: `#5897FB`
- `--iti-hover-color`: `#000000`
- `--iti-border-color`: `#CCCCCC`
- `--iti-dialcode-color`: `#999999`
- `--iti-dropdown-bg`: `#FFFFFF`
- `--iti-search-icon-color`: `#999999`
- `--iti-arrow-color`: `#555555`

### Typefaces

- Lucida Grande (`--font`)
- \30 (`--fa`)
- Nanum Pen

### Type scale (most-used sizes)

`40px` · `32px` · `30px` · `24px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`2.4px` (1) · `-1.35px` (1) · `-2.1px` (1) · `3.6px` (1)

### Corner radii (most-used)

`50%` · `8px` · `4px` · `100%` · `3px` · `6px` · `30px` · `1px` · `9999px` · `50px`

### Shadows

- `none!important`
- `0 1px 1px #eee`
- `0 4px 8px -2px rgba(16,24,40,.1)`
- `0 0 5px 0 rgba(0,112,240,.6)`
- `0 0 5px 0 rgba(102,175,233,.6)`
- `0 .47px .94px 0 rgba(16,24,40,.06),0 .47px 1.41px 0 rgba(16,24,40,.1)`

### Gradients

- `linear-gradient(45deg,#BFC3C8 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,#BFC3C8 50%,#BFC3C8 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0))`
- `linear-gradient(to bottom,#666,#444)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`
- `linear-gradient(135deg,#fafae1,#67a671)`

### Breakpoints

500px · 600px · 601px · 700px · 750px · 760px · 768px · 769px · 782px · 783px · 800px · 900px · 991px · 992px · 993px · 1023px · 1149px · 1150px · 1200px · 1201px · 1300px