---
generator: clinical-terminal-brand-kit
company: "CommerceHealthcare"
domain: "commercehealthcare.com"
colors:
  primary: "#76BC21"
  onPrimary: "#000000"
  dark: "#27292B"
  accent: "#007AB8"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#27292B"
  accent: "#438600"
fonts:
  heading: "Poppins"
  body: "Open Sans"
radius:
  card: "4px"
  button: "4px"
---

# Design System — CommerceHealthcare

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

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

## Color
- **Accent on the ground: #438600** (4.52:1), adjusted from CommerceHealthcare's primary #76BC21 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #76BC21** for filled shapes (buttons, chips, bars), with #000000 text on it (8.99:1).
- Secondary accent #007AB8: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Poppins**. Body: **Open Sans**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Palette Ui Layer** (`--palette-ui-layer-N`): 1 `#FFFFFF` · 2 `#F3F4F4` · 3 `#E6E7E8`

### Other named colors

- `--color-brand`: `#006747`
- `--color-link`: `#008A1C`
- `--color-text`: `#505658`
- `--color-text-dark`: `#27292B`
- `--color-border`: `#E6E7E8`
- `--color-white`: `#FFFFFF`
- `--palette-brand-one`: `#006747`
- `--palette-brand-two`: `#78BE20`
- `--palette-brand-three`: `#00B5E2`
- `--palette-brand-four`: `#FFD006`
- `--palette-brand-five`: `#EE5223`
- `--palette-actions-perform`: `#005D8F`
- `--palette-actions-perform-selected`: `#004E7A`
- `--palette-actions-perform-pressed`: `#27292B`
- `--palette-actions-perform-accent`: `#F7FCFD`
- `--palette-actions-progress`: `#007AB8`
- `--palette-actions-progress-selected`: `#005D8F`
- `--palette-actions-progress-pressed`: `#004E7A`
- `--palette-actions-progress-accent`: `#F7FCFD`
- `--palette-actions-destructive`: `#D60000`
- `--palette-actions-destructive-selected`: `#AB0000`
- `--palette-actions-destructive-pressed`: `#800000`
- `--palette-actions-destructive-accent`: `#FBE6E6`
- `--palette-actions-disabled`: `#D1D1D1`
- `--palette-actions-disabled-heavy`: `#939595`
- `--palette-actions-disabled-lite`: `#F3F4F4`
- `--palette-ui-background`: `#F3F4F4`
- `--palette-ui-background-lite`: `#F9FAFA`
- `--palette-ui-background-heavy`: `#27292B`
- `--palette-ui-border`: `#777E82`
- `--palette-ui-border-lightest`: `#E6E7E8`
- `--palette-ui-border-lite`: `#939595`
- `--palette-ui-border-heavy`: `#505658`
- `--palette-ui-focus`: `#D1D5D6`
- `--palette-status-success`: `#008A1C`
- `--palette-status-success-heavy`: `#004C0F`
- `--palette-status-success-accent`: `#E6F4E9`
- `--palette-status-info`: `#007AB8`
- `--palette-status-info-heavy`: `#005D8F`
- `--palette-status-info-accent`: `#F7FCFD`
- `--palette-status-warning`: `#FFBC1F`
- `--palette-status-warning-heavy`: `#8C6711`
- `--palette-status-warning-accent`: `#FFFCF5`
- `--palette-status-error`: `#D60000`
- `--palette-status-error-heavy`: `#800000`
- `--palette-status-error-accent`: `#FBE6E6`
- `--palette-status-neutral`: `#777E82`
- `--palette-status-neutral-heavy`: `#27292B`
- `--palette-status-neutral-accent`: `#F3F4F4`
- `--palette-status-required`: `#61676A`
- `--palette-typography-primary`: `#27292B`
- `--palette-typography-secondary`: `#61676A`
- `--palette-typography-knockout`: `#FFFFFF`
- `--palette-typography-decorative`: `#005D8F`
- `--palette-typography-hyperlink`: `#006CA4`
- `--palette-typography-hyperlink-hover`: `#005D8F`
- `--palette-typography-hyperlink-focus`: `#004E7A`
- `--palette-typography-hyperlink-visited`: `#D822A1`
- `--palette-decorative-piggy`: `#D822A1`
- `--palette-decorative-piggy-heavy`: `#B4328C`
- `--palette-decorative-piggy-accent`: `#FCECF7`
- `--palette-decorative-tinkywinky`: `#913CBB`
- `--palette-decorative-tinkywinky-heavy`: `#5B2669`
- `--palette-decorative-tinkywinky-accent`: `#F5EBFC`
- `--palette-decorative-forest`: `#006747`
- `--palette-decorative-forest-heavy`: `#002F22`
- `--palette-decorative-forest-accent`: `#EBFEF4`
- `--palette-decorative-slate`: `#777E82`
- `--palette-decorative-slate-heavy`: `#27292B`
- `--palette-decorative-slate-accent`: `#F3F4F4`

### Typefaces

- Poppins (`--font`) — on Google Fonts
- Open Sans — on Google Fonts

### Type scale (most-used sizes)

`4.8rem` · `4rem` · `3.2rem` · `3rem` · `2.8rem` · `2.4rem` · `2rem` · `1.8rem` · `1.6rem` · `1.4rem` · `1.2rem` · `16px`

### Letter-spacing

`.02em` (15) · `.04em` (13) · `.03em` (10) · `.05rem` (2) · `.05em` (2) · `.48px` (1)

### Corner radii (most-used)

`.4rem` · `.1rem` · `4px` · `.8rem` · `1px` · `.5rem` · `50%` · `2rem` · `8px` · `20px`

### Shadows

- `0 2px 4px -1px #1e1e251a,0 4px 8px #1e1e2529`
- `0 3px 1px -2px #1e1e251a,0 2px 3px #1e1e2529`
- `0 4px 8px #1e1e2529,0 2px 4px -1px #1e1e251a`
- `0px 2px 4px -1px rgba(30, 30, 37, 0.1),0px 4px 8px 0px rgba(30, 30, 37, 0.16)`
- `0px 3px 1px -2px rgba(30, 30, 37, 0.1),0px 2px 3px 0px rgba(30, 30, 37, 0.16)`
- `0 1px 8px #00000080`

### Gradients

- `linear-gradient(119deg, #007ab8 6.31%, #004e7a 100%)`
- `linear-gradient(90deg,#000 0% 45%,#0000 65% 100%)`
- `linear-gradient(119deg, #00a068 3.05%, #006747 100%)`
- `linear-gradient(119deg, #66b977 37.63%, #006e16 100%)`
- `linear-gradient(119deg, #005d8f 0%, #27292b 100%)`
- `linear-gradient(119deg, #d60000 3.05%, #800000 100%)`

### Breakpoints

743px · 744px · 983px · 984px · 1248px