---
generator: clinical-terminal-brand-kit
company: "PCG Software"
domain: "pcgsoftware.com"
colors:
  primary: "#195F96"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#156B8D"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#195F96"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "0px"
  button: "50px"
---

# Design System — PCG Software

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

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

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

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

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

## 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

- `--color_1`: `#000000`
- `--color_2`: `#FFFFFF`
- `--color_3`: `#000000`
- `--color_4`: `#000000`
- `--btn-bg-color`: `#195F96`
- `--btn-icon-color`: `#FFF839`
- `--btn-icon-fill`: `#0000EE`
- `--btn-hover-bg`: `#FFF839`
- `--overlapping-background-color`: `#000000`
- `--overlapping-background-image`: `#FFFFFF`

### Typefaces

- Montserrat (`--btn-text-font-family`) — on Google Fonts
- Montserrat Fallback
- Poppins Fallback
- Syne Fallback
- calibri
- DudaSansVF
- Source Sans Pro
- Syne

### Type scale (most-used sizes)

`80px` · `50px` · `45px` · `40px` · `18px` · `16px` · `1rem` · `14px` · `13px`

### Letter-spacing

`.03em` (1) · `-.05em` (1)

### Corner radii (most-used)

`50px` · `5px` · `20px`

### Breakpoints

0px · 767px · 768px · 1024px · 1025px