[Design systems](/design-systems/) / Persivia Inc.

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

Corrections or removal: <agent@clinicalterminal.com>

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

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

Headings

Inter

Persivia Inc. at a glance

Body

Inter

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

- 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F106234585.md?alt=media).

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