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.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

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

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

• 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.

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