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

# Solventum design system

solventum.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--spectrum-global-color-static-gray-50

- Ink

  \#01332B

- Accent on the ground

  \#008800

- Primary

  \#04DD4C

- On primary

  \#04201B

  \--text-link-active-color

- Secondary accent

  \#05DD4D

- Dark

  \#01332B

  \--heading-color

- Site background

  \#FFFFFF

  \--spectrum-global-color-static-gray-50

## Color ramps

Spectrum Global Color Static Gray

50

\#FFFFFF

75

\#FFFFFF

100

\#FFFFFF

200

\#F4F4F4

300

\#EAEAEA

400

\#D3D3D3

500

\#BCBCBC

600

\#959595

700

\#747474

800

\#505050

900

\#323232

Spectrum Global Color Static Blue

200

\#5AA9FA

300

\#4B9CF5

400

\#378EF0

500

\#2680EB

600

\#1473E6

700

\#0D66D0

Spectrum Global Color Static Red

400

\#EC5B62

500

\#E34850

600

\#D7373F

700

\#C9252D

Spectrum Global Color Static Orange

400

\#F29423

500

\#E68619

600

\#DA7B11

700

\#CB6F10

Spectrum Global Color Static Green

400

\#33AB84

500

\#2D9D78

600

\#268E6C

700

\#12805C

Spectrum Global Color Static Celery

200

\#58E06F

300

\#51D267

400

\#4BC35F

500

\#44B556

600

\#3DA74E

700

\#379947

Spectrum Global Color Static Chartreuse

300

\#9BEC54

400

\#8EDE49

500

\#85D044

600

\#7CC33F

700

\#73B53A

Spectrum Global Color Static Yellow

200

\#FFE22E

300

\#FAD900

400

\#EDCC00

500

\#DFBF00

600

\#D2B200

700

\#C4A600

Spectrum Global Color Static Magenta

200

\#F56BB7

300

\#EC5AAA

400

\#E2499D

500

\#D83790

600

\#CA2982

700

\#BC1C74

Spectrum Global Color Static Fuchsia

400

\#CF3EDC

500

\#C038CC

600

\#B130BD

700

\#A228AD

Spectrum Global Color Static Purple

400

\#9D64E1

500

\#9256D9

600

\#864CCC

700

\#7A42BF

800

\#6F38B1

Spectrum Global Color Static Indigo

200

\#9090FA

300

\#8282F6

400

\#7575F1

500

\#6767EC

600

\#5C5CE0

700

\#5151D3

## Other named colors

- \--background-color #FFFFFF
- \--text-color #303030
- \--heading-color #01332B
- \--text-link-color #0A7B6B
- \--text-link-hover-color #005145
- \--text-link-active-color #04201B
- \--text-link-focus-outline-color #0A7B6B
- \--text-link-visited-color #5645D0
- \--text-neutral-color #6E6E6E
- \--button-filled-text-color #FFFFFF
- \--button-filled-text-hover-color #DBFFF0
- \--button-filled-text-active-color #BFFDE3
- \--button-filled-text-disabled-color #888B8B
- \--button-filled-hover-background #005145
- \--button-filled-focus-background #0A7B6B
- \--button-filled-disabled-background #E7E7E7
- \--button-outline-hover-border-color #005145
- \--button-outline-disabled-background #E7E7E7
- \--button-icon-filled-hover-background #005145
- \--button-icon-outline-hover-border-color #01332B
- \--close-background-color #01332B
- \--spectrum-global-color-static-black #000000
- \--spectrum-global-color-static-white #FFFFFF
- \--spectrum-global-color-static-blue #1473E6

## Type

Headings

Archivo · closest free match for Solve Pro

Solventum at a glance

Body

Archivo · closest free match for Solve Pro

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

- 2.5rem · 40pxSolventum
- 2rem · 32pxSolventum
- 1.5rem · 24pxSolventum
- 1.25rem · 20pxSolventum
- 1.125rem · 18pxSolventum
- 17pxSolventum
- 1rem · 16pxSolventum
- 16pxSolventum

## Shape & depth

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

### Corner radii

- 4px

  used in 103 rules

- .25rem

  used in 61 rules

- .125rem

  used in 60 rules

- 5rem

  used in 57 rules

- .5rem

  used in 43 rules

- 5px

  used in 40 rules

- .1875rem

  used in 30 rules

- 50%

  used in 25 rules

- 1px

  used in 13 rules

- 8px

  used in 10 rules

### Shadows

- 0 0 0 1px #2680eb

  used in 35 rules

- 0 0 0 1px #e34850

  used in 26 rules

- 0 1px 4px rgba(0,0,0,.15)

  used in 18 rules

- 0 0 0 1px #1473e6

  used in 16 rules

- 0 0 0 1px #378ef0

  used in 15 rules

- 0 0 0 2px #2680eb

  used in 14 rules

### Gradients

- linear-gradient(-45deg,transparent 75.5%,#bcbcbc 75.5%)

  used in 12 rules

- linear-gradient(45deg,transparent 75.5%,#bcbcbc 75.5%)

  used in 12 rules

- linear-gradient(-45deg,#bcbcbc 25.5%,transparent 25.5%)

  used in 12 rules

- linear-gradient(45deg,#bcbcbc 25.5%,transparent 25.5%)

  used in 12 rules

- radial-gradient(circle closest-side,#4397e1 40%,rgba(67,151,225,0) 50%)

  used in 5 rules

- linear-gradient(90deg,#01332b,rgba(1,51,43,.64) 32.8%,rgba(1,51,43,0) 71.01%)

  used in 4 rules

Breakpoints: 303px · 304px · 320px · 340px · 375px · 390px · 500px · 550px · 599px · 600px · 650px · 766px

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

```
---
generator: clinical-terminal-brand-kit
company: "Solventum"
domain: "solventum.com"
colors:
  primary: "#04DD4C"
  onPrimary: "#04201B"
  dark: "#01332B"
  accent: "#05DD4D"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#01332B"
  accent: "#008800"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "80px"
---

# Design System — Solventum

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

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

## Color
- **Accent on the ground: #008800** (4.64:1), adjusted from Solventum's primary #04DD4C so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #04DD4C** for filled shapes (buttons, chips, bars), with #04201B text on it (9.33:1).
- Secondary accent #05DD4D: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Solventum's site uses Solve Pro / Solve Pro; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Spectrum Global Color Static Gray** (`--spectrum-global-color-static-gray-N`): 50 `#FFFFFF` · 75 `#FFFFFF` · 100 `#FFFFFF` · 200 `#F4F4F4` · 300 `#EAEAEA` · 400 `#D3D3D3` · 500 `#BCBCBC` · 600 `#959595` · 700 `#747474` · 800 `#505050` · 900 `#323232`
- **Spectrum Global Color Static Blue** (`--spectrum-global-color-static-blue-N`): 200 `#5AA9FA` · 300 `#4B9CF5` · 400 `#378EF0` · 500 `#2680EB` · 600 `#1473E6` · 700 `#0D66D0`
- **Spectrum Global Color Static Red** (`--spectrum-global-color-static-red-N`): 400 `#EC5B62` · 500 `#E34850` · 600 `#D7373F` · 700 `#C9252D`
- **Spectrum Global Color Static Orange** (`--spectrum-global-color-static-orange-N`): 400 `#F29423` · 500 `#E68619` · 600 `#DA7B11` · 700 `#CB6F10`
- **Spectrum Global Color Static Green** (`--spectrum-global-color-static-green-N`): 400 `#33AB84` · 500 `#2D9D78` · 600 `#268E6C` · 700 `#12805C`
- **Spectrum Global Color Static Celery** (`--spectrum-global-color-static-celery-N`): 200 `#58E06F` · 300 `#51D267` · 400 `#4BC35F` · 500 `#44B556` · 600 `#3DA74E` · 700 `#379947`
- **Spectrum Global Color Static Chartreuse** (`--spectrum-global-color-static-chartreuse-N`): 300 `#9BEC54` · 400 `#8EDE49` · 500 `#85D044` · 600 `#7CC33F` · 700 `#73B53A`
- **Spectrum Global Color Static Yellow** (`--spectrum-global-color-static-yellow-N`): 200 `#FFE22E` · 300 `#FAD900` · 400 `#EDCC00` · 500 `#DFBF00` · 600 `#D2B200` · 700 `#C4A600`
- **Spectrum Global Color Static Magenta** (`--spectrum-global-color-static-magenta-N`): 200 `#F56BB7` · 300 `#EC5AAA` · 400 `#E2499D` · 500 `#D83790` · 600 `#CA2982` · 700 `#BC1C74`
- **Spectrum Global Color Static Fuchsia** (`--spectrum-global-color-static-fuchsia-N`): 400 `#CF3EDC` · 500 `#C038CC` · 600 `#B130BD` · 700 `#A228AD`
- **Spectrum Global Color Static Purple** (`--spectrum-global-color-static-purple-N`): 400 `#9D64E1` · 500 `#9256D9` · 600 `#864CCC` · 700 `#7A42BF` · 800 `#6F38B1`
- **Spectrum Global Color Static Indigo** (`--spectrum-global-color-static-indigo-N`): 200 `#9090FA` · 300 `#8282F6` · 400 `#7575F1` · 500 `#6767EC` · 600 `#5C5CE0` · 700 `#5151D3`
- **Spectrum Global Color Static Seafoam** (`--spectrum-global-color-static-seafoam-N`): 200 `#26C0C7` · 300 `#23B2B8` · 400 `#20A3A8` · 500 `#1B959A` · 600 `#16878C` · 700 `#0F797D`
- **Spectrum Global Color Celery** (`--spectrum-global-color-celery-N`): 400 `#44B556` · 500 `#3DA74E` · 600 `#379947` · 700 `#318B40`
- **Spectrum Global Color Chartreuse** (`--spectrum-global-color-chartreuse-N`): 400 `#85D044` · 500 `#7CC33F` · 600 `#73B53A` · 700 `#6AA834`
- **Spectrum Global Color Yellow** (`--spectrum-global-color-yellow-N`): 400 `#DFBF00` · 500 `#D2B200` · 600 `#C4A600` · 700 `#B79900`
- **Spectrum Global Color Magenta** (`--spectrum-global-color-magenta-N`): 400 `#D83790` · 500 `#CE2783` · 600 `#BC1C74` · 700 `#AE0E66`
- **Spectrum Global Color Fuchsia** (`--spectrum-global-color-fuchsia-N`): 400 `#C038CC` · 500 `#B130BD` · 600 `#A228AD` · 700 `#93219E`
- **Spectrum Global Color Purple** (`--spectrum-global-color-purple-N`): 400 `#9256D9` · 500 `#864CCC` · 600 `#7A42BF` · 700 `#6F38B1`
- **Spectrum Global Color Indigo** (`--spectrum-global-color-indigo-N`): 400 `#6767EC` · 500 `#5C5CE0` · 600 `#5151D3` · 700 `#4646C6`
- **Spectrum Global Color Seafoam** (`--spectrum-global-color-seafoam-N`): 400 `#1B959A` · 500 `#16878C` · 600 `#0F797D` · 700 `#096C6F`
- **Spectrum Global Color Red** (`--spectrum-global-color-red-N`): 400 `#E34850` · 500 `#D7373F` · 600 `#C9252D` · 700 `#BB121A`
- **Spectrum Global Color Orange** (`--spectrum-global-color-orange-N`): 400 `#E68619` · 500 `#DA7B11` · 600 `#CB6F10` · 700 `#BD640D`
- **Spectrum Global Color Green** (`--spectrum-global-color-green-N`): 400 `#2D9D78` · 500 `#268E6C` · 600 `#12805C` · 700 `#107154`
- **Spectrum Global Color Blue** (`--spectrum-global-color-blue-N`): 400 `#2680EB` · 500 `#1473E6` · 600 `#0D66D0` · 700 `#095ABA`
- **Spectrum Global Color Gray** (`--spectrum-global-color-gray-N`): 50 `#FFFFFF` · 75 `#FAFAFA` · 100 `#F5F5F5` · 200 `#EAEAEA` · 300 `#E1E1E1` · 400 `#CACACA` · 500 `#B3B3B3` · 600 `#8E8E8E` · 700 `#6E6E6E` · 800 `#4B4B4B` · 900 `#2C2C2C`

### Other named colors

- `--background-color`: `#FFFFFF`
- `--text-color`: `#303030`
- `--heading-color`: `#01332B`
- `--text-link-color`: `#0A7B6B`
- `--text-link-hover-color`: `#005145`
- `--text-link-active-color`: `#04201B`
- `--text-link-focus-outline-color`: `#0A7B6B`
- `--text-link-visited-color`: `#5645D0`
- `--text-neutral-color`: `#6E6E6E`
- `--button-filled-text-color`: `#FFFFFF`
- `--button-filled-text-hover-color`: `#DBFFF0`
- `--button-filled-text-active-color`: `#BFFDE3`
- `--button-filled-text-disabled-color`: `#888B8B`
- `--button-filled-hover-background`: `#005145`
- `--button-filled-focus-background`: `#0A7B6B`
- `--button-filled-disabled-background`: `#E7E7E7`
- `--button-outline-hover-border-color`: `#005145`
- `--button-outline-disabled-background`: `#E7E7E7`
- `--button-icon-filled-hover-background`: `#005145`
- `--button-icon-outline-hover-border-color`: `#01332B`
- `--close-background-color`: `#01332B`
- `--spectrum-global-color-static-black`: `#000000`
- `--spectrum-global-color-static-white`: `#FFFFFF`
- `--spectrum-global-color-static-blue`: `#1473E6`

### Typefaces

- Barlow (`--aquapure-font-family`) — on Google Fonts
- Noto Sans Simplified Chinese (`--aquapure-font-family-zh-sc`)
- Noto Sans Traditional Chinese (`--aquapure-font-family-zh-tc`)
- Solve Pro
- adobe-clean
- adobe-clean-han-traditional
- Source Code Pro
- adobe-clean-serif

### Type scale (most-used sizes)

`2.5rem` · `2rem` · `1.5rem` · `1.25rem` · `1.125rem` · `17px` · `1rem` · `16px` · `.875rem` · `14px` · `12px` · `.75rem`

### Letter-spacing

`.05em` (110) · `.06em` (36) · `.0125em` (21) · `.03em` (7) · `.07px` (4) · `.02625rem` (3)

### Corner radii (most-used)

`4px` · `.25rem` · `.125rem` · `5rem` · `.5rem` · `5px` · `.1875rem` · `50%` · `1px` · `8px`

### Shadows

- `0 0 0 1px #2680eb`
- `0 0 0 1px #e34850`
- `0 1px 4px rgba(0,0,0,.15)`
- `0 0 0 1px #1473e6`
- `0 0 0 1px #378ef0`
- `0 0 0 2px #2680eb`

### Gradients

- `linear-gradient(-45deg,transparent 75.5%,#bcbcbc 75.5%)`
- `linear-gradient(45deg,transparent 75.5%,#bcbcbc 75.5%)`
- `linear-gradient(-45deg,#bcbcbc 25.5%,transparent 25.5%)`
- `linear-gradient(45deg,#bcbcbc 25.5%,transparent 25.5%)`
- `radial-gradient(circle closest-side,#4397e1 40%,rgba(67,151,225,0) 50%)`
- `linear-gradient(90deg,#01332b,rgba(1,51,43,.64) 32.8%,rgba(1,51,43,0) 71.01%)`

### Breakpoints

303px · 304px · 320px · 340px · 375px · 390px · 500px · 550px · 599px · 600px · 650px · 766px · 767px · 768px · 900px · 905px · 992px · 1023px · 1024px · 1025px · 1200px · 1280px · 1366px · 1440px · 1768px · 2160px
```