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

# Relatient design system

relatient.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--color-text-white

- Ink

  \#004D43

- Accent on the ground

  \#004D43

- Primary

  \#004D43

- On primary

  \#FFFFFF

  \--color-text-white

- Secondary accent

  \#83CEB8

- Dark

  \#004D43

- Site background

  \#FFFFFF

  \--color-text-white

## Other named colors

- \--bricks-color-primary #FFD64F
- \--bricks-color-secondary #FC5778
- \--bricks-text-dark #212121
- \--bricks-text-muted #616161
- \--bricks-text-light #9E9E9E
- \--bricks-text-info #00B0F4
- \--bricks-text-success #11B76B
- \--bricks-text-warning #FFA100
- \--bricks-text-danger #FA4362
- \--bricks-bg-info #E5F3FF
- \--bricks-bg-success #E6F6ED
- \--bricks-bg-warning #FFF2D7
- \--bricks-bg-danger #FFE6EC
- \--bricks-bg-dark #263238
- \--bricks-bg-light #F5F6F7
- \--bricks-border-color #DDDEDF
- \--bricks-tooltip-bg #23282D
- \--bricks-tooltip-text #EAECEF
- \--brx-loader-color #9E9E9E
- \--color-accent-bright-orange #E24912
- \--color-accent-bright-teal #7DE1C3
- \--color-accent-cement #D0CFCB
- \--color-accent-hunter-green #007167
- \--color-brand-evergreen #004D44
- \--color-brand-greige #E8E5E0
- \--color-brand-yellow-flash #D9E021
- \--color-text-charcoal #24272A
- \--color-text-deep-blue #04202E
- \--color-text-white #FFFFFF
- \--bricks-color-044daf #F5F5F5
- \--bricks-color-dc6fd5 #E0E0E0
- \--bricks-color-b9c4da #9E9E9E
- \--bricks-color-ca2395 #616161
- \--bricks-color-f0a03f #424242
- \--bricks-color-16ba63 #212121
- \--bricks-color-e7492a #FFEB3B
- \--bricks-color-60167d #FFC107
- \--bricks-color-65ee86 #FF9800
- \--bricks-color-61ef9d #FF5722
- \--bricks-color-b6bc52 #F44336
- \--bricks-color-0cc70b #9C27B0
- \--bricks-color-3acca0 #2196F3
- \--bricks-color-3a1046 #03A9F4
- \--bricks-color-3351dc #81D4FA
- \--bricks-color-23bbf6 #4CAF50
- \--bricks-color-178b7d #8BC34A
- \--bricks-color-a492d0 #CDDC39
- \--color-2 #004D44

## Type

Headings

Archivo · closest free match for Paralucent

Relatient at a glance

Body

Roboto

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

- 60pxRelatient
- 40pxRelatient
- 30pxRelatient
- 20pxRelatient
- 17pxRelatient
- 16pxRelatient
- 15pxRelatient
- 14pxRelatient

## Shape & depth

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

### Corner radii

- 50%

  used in 14 rules

- 59%

  used in 7 rules

- 4px

  used in 5 rules

- 3px

  used in 5 rules

- 2px

  used in 5 rules

- 2rem

  used in 3 rules

- 100%

  used in 3 rules

- 5px

  used in 3 rules

- 14px

  used in 2 rules

- 10px

  used in 2 rules

### Shadows

- inset 0 0 0 2px #fff

  used in 2 rules

- 0 0 0 0 rgba(0, 0, 0, 0)

  used in 2 rules

- 0 0 2px 2px rgba(0,0,0,.6)

  used in 1 rule

- 4px 4px 4px rgba(0,0,0,.2)

  used in 1 rule

- 0 2px 6px rgba(0,0,0,.3)

  used in 1 rule

- 0 0 0 2px

  used in 1 rule

### Gradients

- linear-gradient(rgba(0, 77, 67, 0.76), rgba(0, 77, 67, 0.76))

  used in 4 rules

- linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent)

  used in 2 rules

- linear-gradient(45deg,transparent 50%,gray 0)

  used in 1 rule

- linear-gradient(135deg,gray 50%,transparent 0)

  used in 1 rule

- linear-gradient(270deg,rgba(0,0,0,.5),transparent)

  used in 1 rule

- linear-gradient(90deg,rgba(0,0,0,.5),transparent)

  used in 1 rule

Breakpoints: 478px · 480px · 767px · 900px · 991px · 1024px · 1320px

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

```
---
generator: clinical-terminal-brand-kit
company: "Relatient"
domain: "relatient.com"
colors:
  primary: "#004D43"
  onPrimary: "#FFFFFF"
  dark: "#004D43"
  accent: "#83CEB8"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#004D43"
  accent: "#004D43"
fonts:
  heading: "Archivo"
  body: "Roboto"
radius:
  card: "3px"
  button: "4px"
---

# Design System — Relatient

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

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

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

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

## Shape
- Cards and panels: 3px 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

### Other named colors

- `--bricks-color-primary`: `#FFD64F`
- `--bricks-color-secondary`: `#FC5778`
- `--bricks-text-dark`: `#212121`
- `--bricks-text-muted`: `#616161`
- `--bricks-text-light`: `#9E9E9E`
- `--bricks-text-info`: `#00B0F4`
- `--bricks-text-success`: `#11B76B`
- `--bricks-text-warning`: `#FFA100`
- `--bricks-text-danger`: `#FA4362`
- `--bricks-bg-info`: `#E5F3FF`
- `--bricks-bg-success`: `#E6F6ED`
- `--bricks-bg-warning`: `#FFF2D7`
- `--bricks-bg-danger`: `#FFE6EC`
- `--bricks-bg-dark`: `#263238`
- `--bricks-bg-light`: `#F5F6F7`
- `--bricks-border-color`: `#DDDEDF`
- `--bricks-tooltip-bg`: `#23282D`
- `--bricks-tooltip-text`: `#EAECEF`
- `--brx-loader-color`: `#9E9E9E`
- `--color-accent-bright-orange`: `#E24912`
- `--color-accent-bright-teal`: `#7DE1C3`
- `--color-accent-cement`: `#D0CFCB`
- `--color-accent-hunter-green`: `#007167`
- `--color-brand-evergreen`: `#004D44`
- `--color-brand-greige`: `#E8E5E0`
- `--color-brand-yellow-flash`: `#D9E021`
- `--color-text-charcoal`: `#24272A`
- `--color-text-deep-blue`: `#04202E`
- `--color-text-white`: `#FFFFFF`
- `--bricks-color-044daf`: `#F5F5F5`
- `--bricks-color-dc6fd5`: `#E0E0E0`
- `--bricks-color-b9c4da`: `#9E9E9E`
- `--bricks-color-ca2395`: `#616161`
- `--bricks-color-f0a03f`: `#424242`
- `--bricks-color-16ba63`: `#212121`
- `--bricks-color-e7492a`: `#FFEB3B`
- `--bricks-color-60167d`: `#FFC107`
- `--bricks-color-65ee86`: `#FF9800`
- `--bricks-color-61ef9d`: `#FF5722`
- `--bricks-color-b6bc52`: `#F44336`
- `--bricks-color-0cc70b`: `#9C27B0`
- `--bricks-color-3acca0`: `#2196F3`
- `--bricks-color-3a1046`: `#03A9F4`
- `--bricks-color-3351dc`: `#81D4FA`
- `--bricks-color-23bbf6`: `#4CAF50`
- `--bricks-color-178b7d`: `#8BC34A`
- `--bricks-color-a492d0`: `#CDDC39`
- `--color-2`: `#004D44`
- `--color-3`: `#04202E`

### Typefaces

- Roboto (`--font-family-body`) — on Google Fonts
- Paralucent (`--font-family-headline`)
- Roboto Condensed — on Google Fonts

### Type scale (most-used sizes)

`60px` · `40px` · `30px` · `20px` · `17px` · `16px` · `15px` · `14px` · `.875rem` · `13px` · `12px` · `11px`

### Letter-spacing

`.25px` (2) · `.5px` (2) · `.4px` (1) · `1px` (1)

### Corner radii (most-used)

`50%` · `59%` · `4px` · `3px` · `2px` · `2rem` · `100%` · `5px` · `14px` · `10px`

### Shadows

- `inset 0 0 0 2px #fff`
- `0 0 0 0 rgba(0, 0, 0, 0)`
- `0 0 2px 2px rgba(0,0,0,.6)`
- `4px 4px 4px rgba(0,0,0,.2)`
- `0 2px 6px rgba(0,0,0,.3)`
- `0 0 0 2px`

### Gradients

- `linear-gradient(rgba(0, 77, 67, 0.76), rgba(0, 77, 67, 0.76))`
- `linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent)`
- `linear-gradient(45deg,transparent 50%,gray 0)`
- `linear-gradient(135deg,gray 50%,transparent 0)`
- `linear-gradient(270deg,rgba(0,0,0,.5),transparent)`
- `linear-gradient(90deg,rgba(0,0,0,.5),transparent)`

### Breakpoints

478px · 480px · 767px · 900px · 991px · 1024px · 1320px
```