Plutus Health Inc. design system

plutushealthinc.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --white
• Ink

  #0A0A0A
• Accent on the ground

  #196EB6
• Primary

  #196EB6
• On primary

  #FFFFFF

  --white
• Secondary accent

  #3375E7
• Dark

  #0A0A0A

  --authority-black
• Site background

  #FFFFFF

  --white

Other named colors

• --authority-black #0A0A0A
• --executive-burgundy #9C1B2E
• --white #FFFFFF
• --gold #B8924A
• --soft-cream #FAFAF7
• --diagnostic-beige #EFECE3
• --ar-ledger-gray #363636
• --green-ink #0C1512
• --diagnostic-gold #F1ECE0
• --executive-navy #091D3F
• --therapy-cloud #FAFAF7
• --executive-emerald #0F7A55
• --green-bright-emerald #5BC79A
• --mutedgreen #5C6A62
• --diagnostic-beige-light #F6F4EF
• --muted-ink #9DB0A6
• --cream #FBFAF6
• --deep-cream #E0D2B1
• --green-ink-2 #13211B

Type

• 40pxPlutus Health Inc.
• 30pxPlutus Health Inc.
• 28pxPlutus Health Inc.
• 22pxPlutus Health Inc.
• 20pxPlutus Health Inc.
• 18pxPlutus Health Inc.
• 17pxPlutus Health Inc.
• 16pxPlutus Health Inc.

Shape & depth

Cards and panels: 10px corners · buttons and chips: 0px.

Corner radii

• 10px

  used in 84 rules
• 5px

  used in 33 rules
• 100px

  used in 21 rules
• 50%

  used in 19 rules
• 20px

  used in 12 rules
• 25px

  used in 10 rules
• .25rem

  used in 9 rules
• .5rem

  used in 7 rules
• 3px

  used in 6 rules
• 100%

  used in 6 rules

Shadows

• 0 2px 5px #0003

  used in 15 rules
• 0 10px 30px #0000001a

  used in 3 rules
• 0 0 3px 1px #3898ec

  used in 2 rules
• 0 1px 2px #0000000a

  used in 2 rules
• 0 16px 40px #0000001f

  used in 2 rules
• 0 2px 8px #0003

  used in 2 rules

Gradients

• linear-gradient(#00000080,#00000080)

  used in 7 rules
• linear-gradient(#3375e7d1,#3375e7d1)

  used in 4 rules
• linear-gradient(#ffffffdb,#ffffffdb)

  used in 2 rules
• radial-gradient(circle farthest-side,#e7e7e7b0,#f3f3f3f0 46%,#f3f3f3ed 63%)

  used in 2 rules
• radial-gradient(circle farthest-side at 50% 40%,#e7e7e7ed,#f3f3f3fa 46%,#f3f3f3 63%)

  used in 2 rules
• linear-gradient(#ffffff80,#ffffff80)

  used in 1 rule

Breakpoints: 400px · 475px · 479px · 480px · 767px · 768px · 991px · 1024px · 1280px · 1440px · 1920px

Voice

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

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Plutus Health Inc."
domain: "plutushealthinc.com"
colors:
  primary: "#196EB6"
  onPrimary: "#FFFFFF"
  dark: "#0A0A0A"
  accent: "#3375E7"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#0A0A0A"
  accent: "#196EB6"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "10px"
  button: "0px"
---

# Design System — Plutus Health Inc.

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

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

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

## Type
- Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--authority-black`: `#0A0A0A`
- `--executive-burgundy`: `#9C1B2E`
- `--white`: `#FFFFFF`
- `--gold`: `#B8924A`
- `--soft-cream`: `#FAFAF7`
- `--diagnostic-beige`: `#EFECE3`
- `--ar-ledger-gray`: `#363636`
- `--green-ink`: `#0C1512`
- `--diagnostic-gold`: `#F1ECE0`
- `--executive-navy`: `#091D3F`
- `--therapy-cloud`: `#FAFAF7`
- `--executive-emerald`: `#0F7A55`
- `--green-bright-emerald`: `#5BC79A`
- `--mutedgreen`: `#5C6A62`
- `--diagnostic-beige-light`: `#F6F4EF`
- `--muted-ink`: `#9DB0A6`
- `--cream`: `#FBFAF6`
- `--deep-cream`: `#E0D2B1`
- `--green-ink-2`: `#13211B`

### Typefaces

- Lato (`--lato-body`) — on Google Fonts
- Montserrat (`--montserrat-headings`) — on Google Fonts
- JetBrains Mono — on Google Fonts
- Inter Tight — on Google Fonts
- InterTight

### Type scale (most-used sizes)

`40px` · `30px` · `28px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px` · `11px`

### Letter-spacing

`.04em` (3) · `.18em` (1) · `-.04em` (1) · `-.02em` (1) · `.12em` (1) · `.15em` (1)

### Corner radii (most-used)

`10px` · `5px` · `100px` · `50%` · `20px` · `25px` · `.25rem` · `.5rem` · `3px` · `100%`

### Shadows

- `0 2px 5px #0003`
- `0 10px 30px #0000001a`
- `0 0 3px 1px #3898ec`
- `0 1px 2px #0000000a`
- `0 16px 40px #0000001f`
- `0 2px 8px #0003`

### Gradients

- `linear-gradient(#00000080,#00000080)`
- `linear-gradient(#3375e7d1,#3375e7d1)`
- `linear-gradient(#ffffffdb,#ffffffdb)`
- `radial-gradient(circle farthest-side,#e7e7e7b0,#f3f3f3f0 46%,#f3f3f3ed 63%)`
- `radial-gradient(circle farthest-side at 50% 40%,#e7e7e7ed,#f3f3f3fa 46%,#f3f3f3 63%)`
- `linear-gradient(#ffffff80,#ffffff80)`

### Breakpoints

400px · 475px · 479px · 480px · 767px · 768px · 991px · 1024px · 1280px · 1440px · 1920px