[Design systems](/design-systems/) / Darena Health

# Darena Health design system

darena.health

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

Corrections or removal: <agent@clinicalterminal.com>

D

## Palette

- Ground

  \#FFFFFF

- Ink

  \#3B3E3F

- Accent on the ground

  \#095E86

- Primary

  \#095E86

- On primary

  \#FFFFFF

- Dark

  \#3B3E3F

- Site background

  \#FFFFFF

## Type

Headings

Poppins

Darena Health at a glance

Body

Poppins

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

- 15pxDarena Health
- 14pxDarena Health
- 13pxDarena Health
- 12pxDarena Health

## Shape & depth

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

### Corner radii

- 2px

  used in 2 rules

- 30px

  used in 1 rule

- 1000px

  used in 1 rule

### Shadows

- 0 0 0 1px #00000016,0 1px #00000026

  used in 1 rule

- 0 1px 1px #0000004d

  used in 1 rule

### Gradients

- radial-gradient(white, black)

  used in 5 rules

- linear-gradient(#1e1e1e,#040404)

  used in 1 rule

- linear-gradient(#fbfbfb,#e1e1e1)

  used in 1 rule

Breakpoints: 432px · 433px · 700px · 767px · 768px

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

```
---
generator: clinical-terminal-brand-kit
company: "Darena Health"
domain: "darena.health"
colors:
  primary: "#095E86"
  onPrimary: "#FFFFFF"
  dark: "#3B3E3F"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#3B3E3F"
  accent: "#095E86"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "0px"
  button: "6.8px"
---

# Design System — Darena Health

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

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

## Color
- **Accent on the ground: #095E86** (7.1:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #095E86** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.1:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Typefaces

- Poppins — on Google Fonts

### Type scale (most-used sizes)

`15px` · `14px` · `13px` · `12px`

### Letter-spacing

`1px` (1)

### Corner radii (most-used)

`2px` · `30px` · `1000px`

### Shadows

- `0 0 0 1px #00000016,0 1px #00000026`
- `0 1px 1px #0000004d`

### Gradients

- `radial-gradient(white, black)`
- `linear-gradient(#1e1e1e,#040404)`
- `linear-gradient(#fbfbfb,#e1e1e1)`

### Breakpoints

432px · 433px · 700px · 767px · 768px
```