[Design systems](/design-systems/) / CompuGroup Medical US

# CompuGroup Medical US design system

cgm.com

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

Corrections or removal: <agent@clinicalterminal.com>

![CompuGroup Medical US logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F101616348.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--brand-white

- Ink

  \#003366

- Accent on the ground

  \#003366

- Primary

  \#003366

  \--brand-blue-100

- On primary

  \#FFFFFF

  \--brand-white

- Secondary accent

  \#0074BC

  \--brand-accent-blue-100

- Dark

  \#003366

  \--brand-blue-100

- Site background

  \#FFFFFF

  \--brand-white

## Color ramps

Brand Solid Opacity

10

\#000000

40

\#000000

70

\#000000

Brand Gray

10

\#F4F4F4

20

\#E5E5E5

40

\#D3D3D3

70

\#B2B2B2

100

\#919191

120

\#757575

Brand Blue

10

\#E5EAEF

20

\#F5F7F9

40

\#99ADC2

50

\#919191

60

\#597998

70

\#4C7094

100

\#003366

Brand Blue 100 Opacity

14

\#003366

40

\#003366

50

\#003366

70

\#003366

80

\#003266

Brand Accent Blue

10

\#E5F1F8

40

\#99C7E4

70

\#4C9DD0

100

\#0074BC

Brand Accent Yellow

10

\#FFF8E5

40

\#FDE399

70

\#FCCF4C

100

\#FBBA00

Brand Accent Orange

10

\#FDF2E7

40

\#F9CBA1

70

\#F4A45A

100

\#EF7D14

Brand Accent Green

10

\#F4F9E8

40

\#D4E6A4

70

\#B4D360

100

\#94C11C

Brand Accent Red

10

\#FCE5E7

40

\#F4999F

70

\#EB4C57

100

\#E3000F

## Other named colors

- \--brand-black #1F1F1F
- \--brand-solid #000000
- \--brand-white #FFFFFF
- \--brand-hero-special-blue #2BA1EA
- \--blue #007BFF
- \--indigo #6610F2
- \--purple #6F42C1
- \--pink #E83E8C
- \--red #DC3545
- \--orange #FD7E14
- \--yellow #FFC107
- \--green #28A745
- \--teal #20C997
- \--cyan #17A2B8
- \--white #FFFFFF
- \--gray #6C757D
- \--gray-dark #343A40
- \--primary #007BFF
- \--secondary #6C757D
- \--success #28A745
- \--info #17A2B8
- \--warning #FFC107
- \--danger #DC3545
- \--light #F8F9FA
- \--dark #343A40
- \--brand-blue-10-opacity-40 #E5EAEF
- \--brand-navy-100 #002447
- \--brand-accent-yellow-70-opacity-50 #FCCF4C
- \--brand-error-100 #D63706
- \--brand-error-10 #FFFCFB
- \--brand-blue-overlay-80 #295683

## Type

Headings

Archivo · closest free match for PolySans

CompuGroup Medical US at a glance

Body

Archivo · closest free match for DMSans

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

- 1.25rem · 20pxCompuGroup Medical US
- 20pxCompuGroup Medical US
- 1.125rem · 18pxCompuGroup Medical US
- 18pxCompuGroup Medical US
- 1rem · 16pxCompuGroup Medical US
- 16pxCompuGroup Medical US
- .875rem · 14pxCompuGroup Medical US

## Shape & depth

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

### Corner radii

- .375rem

  used in 2 rules

### Shadows

- 0 0 0 .2rem rgba(38,143,255,.5)

  used in 4 rules

- 0 0 0 .2rem hsla(208,6%,54%,.5)

  used in 4 rules

- 0 0 0 .2rem rgba(72,180,97,.5)

  used in 4 rules

- 0 0 0 .2rem rgba(58,176,195,.5)

  used in 4 rules

- 0 0 0 .2rem rgba(217,172,21,.5)

  used in 4 rules

- 0 0 0 .2rem rgba(225,83,97,.5)

  used in 4 rules

### Gradients

- linear-gradient(166deg,hsla(0,0%,100%,0) 25.73%,hsla(0,0%,100%,0) 45.79%,#3a9ad9 81.45%,#013366 98.88%)

  used in 1 rule

- linear-gradient(119deg,#0d538c -17.58%,#036 22.84%,#013669 57.96%,#166aa8 80.81%,#4c9dd0 94.71%)

  used in 1 rule

- linear-gradient(164deg,#e5f1f8 17.1%,#2ba1ea 162.12%)

  used in 1 rule

- linear-gradient(116deg,hsla(0,0%,100%,.2) 45.07%,rgba(43,161,234,.88) 74.35%,#036 95.45%)

  used in 1 rule

- linear-gradient(104deg,#0d538c .19%,#036 36.05%,#013669 67.93%,#166aa8 89.85%,#4c9dd0 99.81%)

  used in 1 rule

- linear-gradient(122deg,#e5f1f8 12.09%,#2ba1ea 163.7%)

  used in 1 rule

Breakpoints: 576px · 768px · 992px · 1200px · 1404px

## Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

## 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%2F101616348.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "CompuGroup Medical US"
domain: "cgm.com"
colors:
  primary: "#003366"
  onPrimary: "#FFFFFF"
  dark: "#003366"
  accent: "#0074BC"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#003366"
  accent: "#003366"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "6px"
  button: "4px"
---

# Design System — CompuGroup Medical US

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- CompuGroup Medical US's site uses PolySans / DMSans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Brand Solid Opacity** (`--brand-solid-opacity-N`): 10 `#000000` · 40 `#000000` · 70 `#000000`
- **Brand Gray** (`--brand-gray-N`): 10 `#F4F4F4` · 20 `#E5E5E5` · 40 `#D3D3D3` · 70 `#B2B2B2` · 100 `#919191` · 120 `#757575`
- **Brand Blue** (`--brand-blue-N`): 10 `#E5EAEF` · 20 `#F5F7F9` · 40 `#99ADC2` · 50 `#919191` · 60 `#597998` · 70 `#4C7094` · 100 `#003366`
- **Brand Blue 100 Opacity** (`--brand-blue-100-opacity-N`): 14 `#003366` · 40 `#003366` · 50 `#003366` · 70 `#003366` · 80 `#003266`
- **Brand Accent Blue** (`--brand-accent-blue-N`): 10 `#E5F1F8` · 40 `#99C7E4` · 70 `#4C9DD0` · 100 `#0074BC`
- **Brand Accent Yellow** (`--brand-accent-yellow-N`): 10 `#FFF8E5` · 40 `#FDE399` · 70 `#FCCF4C` · 100 `#FBBA00`
- **Brand Accent Orange** (`--brand-accent-orange-N`): 10 `#FDF2E7` · 40 `#F9CBA1` · 70 `#F4A45A` · 100 `#EF7D14`
- **Brand Accent Green** (`--brand-accent-green-N`): 10 `#F4F9E8` · 40 `#D4E6A4` · 70 `#B4D360` · 100 `#94C11C`
- **Brand Accent Red** (`--brand-accent-red-N`): 10 `#FCE5E7` · 40 `#F4999F` · 70 `#EB4C57` · 100 `#E3000F`

### Other named colors

- `--brand-black`: `#1F1F1F`
- `--brand-solid`: `#000000`
- `--brand-white`: `#FFFFFF`
- `--brand-hero-special-blue`: `#2BA1EA`
- `--blue`: `#007BFF`
- `--indigo`: `#6610F2`
- `--purple`: `#6F42C1`
- `--pink`: `#E83E8C`
- `--red`: `#DC3545`
- `--orange`: `#FD7E14`
- `--yellow`: `#FFC107`
- `--green`: `#28A745`
- `--teal`: `#20C997`
- `--cyan`: `#17A2B8`
- `--white`: `#FFFFFF`
- `--gray`: `#6C757D`
- `--gray-dark`: `#343A40`
- `--primary`: `#007BFF`
- `--secondary`: `#6C757D`
- `--success`: `#28A745`
- `--info`: `#17A2B8`
- `--warning`: `#FFC107`
- `--danger`: `#DC3545`
- `--light`: `#F8F9FA`
- `--dark`: `#343A40`
- `--brand-blue-10-opacity-40`: `#E5EAEF`
- `--brand-navy-100`: `#002447`
- `--brand-accent-yellow-70-opacity-50`: `#FCCF4C`
- `--brand-error-100`: `#D63706`
- `--brand-error-10`: `#FFFCFB`
- `--brand-blue-overlay-80`: `#295683`

### Typefaces

- DMSans (`--font-family-base`)
- PolySans (`--font-family-accent`)
- Prompt (`--font-family-sans-serif`)
- SFMono-Regular (`--font-family-monospace`)

### Type scale (most-used sizes)

`1.25rem` · `20px` · `1.125rem` · `18px` · `1rem` · `16px` · `.875rem`

### Letter-spacing

`.0037rem` (1) · `.005rem` (1) · `.0413rem` (1)

### Corner radii (most-used)

`.375rem`

### Shadows

- `0 0 0 .2rem rgba(38,143,255,.5)`
- `0 0 0 .2rem hsla(208,6%,54%,.5)`
- `0 0 0 .2rem rgba(72,180,97,.5)`
- `0 0 0 .2rem rgba(58,176,195,.5)`
- `0 0 0 .2rem rgba(217,172,21,.5)`
- `0 0 0 .2rem rgba(225,83,97,.5)`

### Gradients

- `linear-gradient(166deg,hsla(0,0%,100%,0) 25.73%,hsla(0,0%,100%,0) 45.79%,#3a9ad9 81.45%,#013366 98.88%)`
- `linear-gradient(119deg,#0d538c -17.58%,#036 22.84%,#013669 57.96%,#166aa8 80.81%,#4c9dd0 94.71%)`
- `linear-gradient(164deg,#e5f1f8 17.1%,#2ba1ea 162.12%)`
- `linear-gradient(116deg,hsla(0,0%,100%,.2) 45.07%,rgba(43,161,234,.88) 74.35%,#036 95.45%)`
- `linear-gradient(104deg,#0d538c .19%,#036 36.05%,#013669 67.93%,#166aa8 89.85%,#4c9dd0 99.81%)`
- `linear-gradient(122deg,#e5f1f8 12.09%,#2ba1ea 163.7%)`

### Breakpoints

576px · 768px · 992px · 1200px · 1404px
```