[Design systems](/design-systems/) / CommerceHealthcare

# CommerceHealthcare design system

commercehealthcare.com

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

Corrections or removal: <agent@clinicalterminal.com>

![CommerceHealthcare homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923684.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--palette-ui-layer-1

- Ink

  \#27292B

- Accent on the ground

  \#438600

- Primary

  \#76BC21

- On primary

  \#000000

- Secondary accent

  \#007AB8

  \--palette-actions-progress

- Dark

  \#27292B

  \--color-text-dark

- Site background

  \#FFFFFF

  \--palette-ui-layer-1

## Color ramps

Palette Ui Layer

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

## Type

Headings

Poppins

CommerceHealthcare at a glance

Body

Open Sans

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

- 4.8rem · 76.8pxCommerceHealthcare
- 4rem · 64pxCommerceHealthcare
- 3.2rem · 51.2pxCommerceHealthcare
- 3rem · 48pxCommerceHealthcare
- 2.8rem · 44.8pxCommerceHealthcare
- 2.4rem · 38.4pxCommerceHealthcare
- 2rem · 32pxCommerceHealthcare
- 1.8rem · 28.8pxCommerceHealthcare

## Shape & depth

Cards and panels: 4px corners · buttons and chips: 4px.

### Corner radii

- .4rem

  used in 203 rules

- .1rem

  used in 97 rules

- 4px

  used in 16 rules

- .8rem

  used in 13 rules

- 1px

  used in 10 rules

- .5rem

  used in 9 rules

- 50%

  used in 8 rules

- 2rem

  used in 2 rules

- 8px

  used in 2 rules

- 20px

  used in 2 rules

### Shadows

- 0 2px 4px -1px #1e1e251a,0 4px 8px #1e1e2529

  used in 30 rules

- 0 3px 1px -2px #1e1e251a,0 2px 3px #1e1e2529

  used in 27 rules

- 0 4px 8px #1e1e2529,0 2px 4px -1px #1e1e251a

  used in 6 rules

- 0px 2px 4px -1px rgba(30, 30, 37, 0.1),0px 4px 8px 0px rgba(30, 30, 37, 0.16)

  used in 5 rules

- 0px 3px 1px -2px rgba(30, 30, 37, 0.1),0px 2px 3px 0px rgba(30, 30, 37, 0.16)

  used in 5 rules

- 0 1px 8px #00000080

  used in 3 rules

### Gradients

- linear-gradient(119deg, #007ab8 6.31%, #004e7a 100%)

  used in 7 rules

- linear-gradient(90deg,#000 0% 45%,#0000 65% 100%)

  used in 2 rules

- linear-gradient(119deg, #00a068 3.05%, #006747 100%)

  used in 2 rules

- linear-gradient(119deg, #66b977 37.63%, #006e16 100%)

  used in 2 rules

- linear-gradient(119deg, #005d8f 0%, #27292b 100%)

  used in 2 rules

- linear-gradient(119deg, #d60000 3.05%, #800000 100%)

  used in 2 rules

Breakpoints: 743px · 744px · 983px · 984px · 1248px

## Voice

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

## DESIGN.md

The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100923684.md?alt=media).

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