Clinical Terminal
AboutSign in

Pinnacle Revenue Cycles design system

pinnaclerev.com

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

Corrections or removal: agent@clinicalterminal.com

Pinnacle Revenue Cycles homepage

Palette

Other named colors

Type

Headings
Hanken Grotesk

Pinnacle Revenue Cycles at a glance

Body
Roboto

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 479px · 767px · 768px · 782px · 800px · 900px · 980px · 981px · 1350px

Voice

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

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Pinnacle Revenue Cycles"
domain: "pinnaclerev.com"
colors:
  primary: "#00843D"
  onPrimary: "#FFFFFF"
  dark: "#232323"
  accent: "#2098D1"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#232323"
  accent: "#00843D"
fonts:
  heading: "Hanken Grotesk"
  body: "Roboto"
radius:
  card: "8px"
  button: "3px"
---

# Design System — Pinnacle Revenue Cycles

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

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

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

## Type
- Headlines: **Hanken Grotesk**. Body: **Roboto**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--acu-blue`: `#0082CB`
- `--acu-blue-dark`: `#0B7BB5`
- `--acu-navy`: `#000000`
- `--acu-text`: `#55606B`
- `--acu-focus`: `#0B5F96`

### Typefaces

- Roboto — on Google Fonts
- ETmodules
- Open Sans — on Google Fonts
- ETmodules!important
- Hanken Grotesk — on Google Fonts
- e9mQ4Fvr3TD1:::Hanken Grotesk

### Type scale (most-used sizes)

`96px` · `64px` · `32px` · `30px` · `28px` · `26px` · `22px` · `20px` · `18px` · `16px` · `14px` · `12px`

### Corner radii (most-used)

`5px` · `3px` · `4px` · `50%` · `50px` · `32px` · `14px`

### Shadows

- `0 2px 5px rgba(0,0,0,.1)`
- `0 0 8px rgba(0,0,0,.6)`
- `0 5px 10px rgba(41,196,169,.15)`
- `inset 0 0 7px rgba(0,0,0,.07)`
- `2px -2px 5px rgba(0,0,0,.1)`
- `0 1px 0 rgba(0,0,0,.1)`

### Gradients

- `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)`
- `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)`
- `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)`
- `linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)`
- `linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)`
- `linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)`

### Breakpoints

479px · 767px · 768px · 782px · 800px · 900px · 980px · 981px · 1350px