Persivia Inc. design system

persivia.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --white
• Ink

  #3D5566
• Accent on the ground

  #008652
• Primary

  #15CC93

  --green
• On primary

  #0D1F2D

  --text-dark
• Dark

  #3D5566

  --text-mid
• Site background

  #FFFFFF

  --white

Other named colors

• --navy #134D67
• --green #15CC93
• --red #FC3441
• --blue #3570FF
• --white #FFFFFF
• --offwhite #F4F8FB
• --text-dark #0D1F2D
• --text-mid #3D5566
• --text-light #6B8599

Type

• 44pxPersivia Inc.
• 22pxPersivia Inc.
• 20pxPersivia Inc.
• 18pxPersivia Inc.
• 17pxPersivia Inc.
• 16pxPersivia Inc.
• 15pxPersivia Inc.
• 14pxPersivia Inc.

Shape & depth

Cards and panels: 12px corners · buttons and chips: 100px.

Corner radii

• 50%

  used in 6 rules
• 100px

  used in 5 rules
• 14px

  used in 3 rules
• 8px

  used in 3 rules
• 20px

  used in 3 rules
• 2px

  used in 1 rule
• 12px

  used in 1 rule
• 16px

  used in 1 rule
• 24px

  used in 1 rule

Shadows

• 0 20px 44px rgba(19,77,103,0.16)

  used in 1 rule
• 0 2px 12px rgba(19,77,103,0.06)

  used in 1 rule
• 0 16px 40px rgba(19,77,103,0.1)

  used in 1 rule
• 0 20px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(21,204,147,0.3)

  used in 1 rule

Gradients

• radial-gradient(circle, rgba(21,204,147,0.12) 0%, transparent 70%)

  used in 1 rule
• radial-gradient(circle, rgba(53,112,255,0.08) 0%, transparent 70%)

  used in 1 rule
• radial-gradient(circle, rgba(21,204,147,0.15) 0%, transparent 70%)

  used in 1 rule
• radial-gradient(ellipse, rgba(21,204,147,0.1) 0%, transparent 70%)

  used in 1 rule

Breakpoints: 600px · 768px · 960px · 1024px

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: "Persivia Inc."
domain: "persivia.com"
colors:
  primary: "#15CC93"
  onPrimary: "#0D1F2D"
  dark: "#3D5566"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#3D5566"
  accent: "#008652"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "12px"
  button: "100px"
---

# Design System — Persivia Inc.

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

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

## Color
- **Accent on the ground: #008652** (4.63:1), adjusted from Persivia Inc.'s primary #15CC93 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #15CC93** for filled shapes (buttons, chips, bars), with #0D1F2D text on it (8.07:1).
- Quote every hex exactly as written above.

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

## Shape
- Cards and panels: 12px corners. Buttons and chips: 100px.

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

## Tokens from the site's stylesheets

### Other named colors

- `--navy`: `#134D67`
- `--green`: `#15CC93`
- `--red`: `#FC3441`
- `--blue`: `#3570FF`
- `--white`: `#FFFFFF`
- `--offwhite`: `#F4F8FB`
- `--text-dark`: `#0D1F2D`
- `--text-mid`: `#3D5566`
- `--text-light`: `#6B8599`

### Typefaces

- Inter — on Google Fonts

### Type scale (most-used sizes)

`44px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`-1px` (4) · `2px` (3) · `1.5px` (2) · `2.5px` (2) · `0.3px` (1) · `-2px` (1)

### Corner radii (most-used)

`50%` · `100px` · `14px` · `8px` · `20px` · `2px` · `12px` · `16px` · `24px`

### Shadows

- `0 20px 44px rgba(19,77,103,0.16)`
- `0 2px 12px rgba(19,77,103,0.06)`
- `0 16px 40px rgba(19,77,103,0.1)`
- `0 20px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(21,204,147,0.3)`

### Gradients

- `radial-gradient(circle, rgba(21,204,147,0.12) 0%, transparent 70%)`
- `radial-gradient(circle, rgba(53,112,255,0.08) 0%, transparent 70%)`
- `radial-gradient(circle, rgba(21,204,147,0.15) 0%, transparent 70%)`
- `radial-gradient(ellipse, rgba(21,204,147,0.1) 0%, transparent 70%)`

### Breakpoints

600px · 768px · 960px · 1024px