---
generator: clinical-terminal-brand-kit
company: "Precision Medical Billing"
domain: "precisionmedicalbilling.com"
colors:
  primary: "#6F2E8B"
  onPrimary: "#FFFFFF"
  dark: "#4A4A4A"
  accent: "#FDC010"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#4A4A4A"
  accent: "#6F2E8B"
fonts:
  heading: "Archivo"
  body: "Open Sans"
radius:
  card: "5px"
  button: "999px"
---

# Design System — Precision Medical Billing

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

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

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

## Type
- Headlines: **Archivo**. Body: **Open Sans**. Both on Google Fonts.
- Precision Medical Billing's site uses Questrial / Open Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Mec Color Skin Rgba** (`--mec-color-skin-rgba-N`): 1 `#40D9F1` · 2 `#40D9F1` · 3 `#40D9F1` · 4 `#40D9F1`
- **Mec Fes Main Color Rgba** (`--mec-fes-main-color-rgba-N`): 1 `#40D9F1` · 2 `#40D9F1` · 3 `#40D9F1` · 4 `#40D9F1` · 5 `#40D9F1` · 6 `#40D9F1`

### Other named colors

- `--color`: `#555555`
- `--hoverColor`: `#3E3E3E`
- `--secondHoverColor`: `#555555`
- `--mec-color-skin`: `#40D9F1`
- `--mec-fes-main-color`: `#40D9F1`

### Typefaces

- Open Sans — on Google Fonts
- helveticabold
- helveticaregular
- Roboto — on Google Fonts
- vazirmatn

### Type scale (most-used sizes)

`24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`1px` (33) · `0.01rem` (18) · `.5px` (12) · `-1px` (10) · `2px` (8) · `1.5px` (4)

### Corner radii (most-used)

`3px` · `50%` · `2px` · `4px` · `5px` · `50px` · `7px` · `10px` · `8px` · `6px`

### Shadows

- `0 2px 0 0 rgba(0,0,0,.016)`
- `none!important`
- `0 0 0!important`
- `0 4px 16px 0 rgba(0,0,0,.075)`
- `0 0 3px rgba(0,0,0,.2)`
- `0 2px 0 0 rgba(0,0,0,.015)`

### Gradients

- `linear-gradient(top,rgba(0,0,0,.1) 0,rgba(64,64,64,.68) 100%)`
- `linear-gradient(top,rgba(64,64,64,.68) 0,rgba(0,0,0,.1) 100%)`
- `linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.48) 65%,rgba(0,0,0,.72) 100%)`
- `linear-gradient(top, #fff 50%, #eee 100%)`
- `linear-gradient(top, #eee 50%, #ccc 100%)`
- `linear-gradient(top, #fff 0%, #eee 50%)`

### Breakpoints

320px · 360px · 375px · 380px · 390px · 411px · 414px · 440px · 479px · 480px · 481px · 543px · 544px · 600px · 640px · 680px · 759px · 760px · 761px · 767px · 768px · 769px · 780px · 781px · 783px · 959px · 960px · 961px · 980px · 990px · 991px · 992px · 1023px · 1024px · 1200px · 1201px · 1280px · 1366px · 1921px