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

# Arrowhealth design system

arrowhealth.io

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--bg

- Ink

  \#111111

- Accent on the ground

  \#00847A

- Primary

  \#31B3A7

- On primary

  \#000000

  \--br-shell-border

- Secondary accent

  \#2A6672

  \--accent

- Dark

  \#56625F

  \--muted

- Site background

  \#FFFFFF

  \--bg

## Other named colors

- \--bg #FFFFFF
- \--surface #F6F7F3
- \--ink #0F1A1A
- \--muted #56625F
- \--subtle #6B7773
- \--border #DDE0D8
- \--hairline #ECEDE8
- \--border-strong #C9CEC4
- \--accent #2A6672
- \--accent-dark #1F4F58
- \--accent-tint #DDECEE
- \--brand #C2621A
- \--brand-dark #A04F12
- \--brand-tint #FDF3EA
- \--kind-patient-ink #1E4B9C
- \--kind-diagnosis-ink #5135B8
- \--kind-visit-ink #1C6A62
- \--kind-vitals-ink #9B1F5C
- \--kind-reason-ink #46620C
- \--ehr-navy #2E4A6B
- \--ehr-banner #F3F6F9
- \--ehr-border #D5DCE3
- \--ehr-ink #1C2B38
- \--ehr-muted #5B6B79
- \--ehr-skeleton #E8ECF0
- \--ehr-alert-bg #FDECEC
- \--ehr-alert-ink #9B2C2C
- \--dark-bg #0A0E13
- \--dark-panel #11161D
- \--dark-border #2A323C
- \--dark-ink #E6EDF3
- \--dark-muted #9AA5B1
- \--mint #32B3A7
- \--br-tabbar #E8EAED
- \--br-tab-active #FFFFFF
- \--br-toolbar #FFFFFF
- \--br-toolbar-border #E8EAED
- \--br-omnibox #F1F3F4
- \--br-omnibox-hover #E8EAED
- \--br-icon #5F6368
- \--br-text #202124
- \--br-shell-border #000000
- \--br-btn-hover #000000
- \--br-placeholder #F8F9FA
- \--br-placeholder-icon #BDC1C6
- \--br-placeholder-text #9AA0A6
- \--secondary #6F625E
- \--met #2F7A46

## Type

Headings

Archivo · closest free match for Schibsted Grotesk

Arrowhealth at a glance

Body

Archivo · closest free match for Schibsted Grotesk

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

- 17pxArrowhealth
- 16pxArrowhealth
- 15pxArrowhealth
- 14pxArrowhealth
- 13.6pxArrowhealth
- 13.5pxArrowhealth
- 13.12pxArrowhealth
- 13pxArrowhealth

## Shape & depth

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

### Corner radii

- 50%

  used in 38 rules

- 8px

  used in 19 rules

- 10px

  used in 19 rules

- 6px

  used in 16 rules

- 12px

  used in 14 rules

- 4px

  used in 9 rules

- 999px

  used in 8 rules

- 7px

  used in 8 rules

- 3px

  used in 6 rules

- 14px

  used in 5 rules

### Shadows

- 0 1px 4px #0000000d

  used in 6 rules

- 0 12px 28px #0f1a1a1a

  used in 2 rules

- 0 40px 80px #0f1a1a33

  used in 2 rules

- 0 2px 8px #00000012

  used in 2 rules

- 0 1px 2px #0f1a1a0f,0 16px 36px #0f1a1a24

  used in 1 rule

- 0 14px 30px #0f1a1a47

  used in 1 rule

### Gradients

- radial-gradient(at 50% 55%,#000 55%,#0000 88%)

  used in 2 rules

- linear-gradient(90deg,#0000 0,#000 14%)

  used in 2 rules

- linear-gradient(90deg,#000 38%,#0000 50%)

  used in 2 rules

- linear-gradient(135deg,#e7f3f1,#eaeff6)

  used in 1 rule

- radial-gradient(80% 60% at 110% -10%,#ffffff2e 0%,#0000 60%)

  used in 1 rule

- radial-gradient(60% 50% at -10% 110%,#0000001f 0%,#0000 55%)

  used in 1 rule

## Voice

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

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

```
---
generator: clinical-terminal-brand-kit
company: "Arrowhealth"
domain: "arrowhealth.io"
colors:
  primary: "#31B3A7"
  onPrimary: "#000000"
  dark: "#56625F"
  accent: "#2A6672"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#111111"
  accent: "#00847A"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "8px"
  button: "0px"
---

# Design System — Arrowhealth

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

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

## Color
- **Accent on the ground: #00847A** (4.58:1), adjusted from Arrowhealth's primary #31B3A7 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #31B3A7** for filled shapes (buttons, chips, bars), with #000000 text on it (8.14:1).
- Secondary accent #2A6672: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--bg`: `#FFFFFF`
- `--surface`: `#F6F7F3`
- `--ink`: `#0F1A1A`
- `--muted`: `#56625F`
- `--subtle`: `#6B7773`
- `--border`: `#DDE0D8`
- `--hairline`: `#ECEDE8`
- `--border-strong`: `#C9CEC4`
- `--accent`: `#2A6672`
- `--accent-dark`: `#1F4F58`
- `--accent-tint`: `#DDECEE`
- `--brand`: `#C2621A`
- `--brand-dark`: `#A04F12`
- `--brand-tint`: `#FDF3EA`
- `--kind-patient-ink`: `#1E4B9C`
- `--kind-diagnosis-ink`: `#5135B8`
- `--kind-visit-ink`: `#1C6A62`
- `--kind-vitals-ink`: `#9B1F5C`
- `--kind-reason-ink`: `#46620C`
- `--ehr-navy`: `#2E4A6B`
- `--ehr-banner`: `#F3F6F9`
- `--ehr-border`: `#D5DCE3`
- `--ehr-ink`: `#1C2B38`
- `--ehr-muted`: `#5B6B79`
- `--ehr-skeleton`: `#E8ECF0`
- `--ehr-alert-bg`: `#FDECEC`
- `--ehr-alert-ink`: `#9B2C2C`
- `--dark-bg`: `#0A0E13`
- `--dark-panel`: `#11161D`
- `--dark-border`: `#2A323C`
- `--dark-ink`: `#E6EDF3`
- `--dark-muted`: `#9AA5B1`
- `--mint`: `#32B3A7`
- `--br-tabbar`: `#E8EAED`
- `--br-tab-active`: `#FFFFFF`
- `--br-toolbar`: `#FFFFFF`
- `--br-toolbar-border`: `#E8EAED`
- `--br-omnibox`: `#F1F3F4`
- `--br-omnibox-hover`: `#E8EAED`
- `--br-icon`: `#5F6368`
- `--br-text`: `#202124`
- `--br-shell-border`: `#000000`
- `--br-btn-hover`: `#000000`
- `--br-placeholder`: `#F8F9FA`
- `--br-placeholder-icon`: `#BDC1C6`
- `--br-placeholder-text`: `#9AA0A6`
- `--secondary`: `#6F625E`
- `--met`: `#2F7A46`
- `--pending`: `#A65400`
- `--fail`: `#B42318`
- `--ca-bg`: `#EAEEF4`
- `--ca-card`: `#FFFFFF`
- `--ca-navy`: `#001248`
- `--ca-navy-hover`: `#001966`
- `--ca-teal`: `#2E92A7`
- `--ca-text`: `#2A333F`
- `--ca-muted`: `#6B7684`
- `--ca-faint`: `#98A2B0`
- `--ca-border`: `#E3E8EF`
- `--ca-border-strong`: `#CDD5E0`
- `--ca-tint`: `#F1F6FB`
- `--ca-green`: `#1A7F4B`
- `--ca-amber`: `#D98A00`
- `--ca-danger`: `#C23B3B`
- `--ca-shadow`: `#10284A`
- `--ca-code-bg`: `#10284A`
- `--ec-bg`: `#F0F4F8`
- `--ec-ink`: `#111827`
- `--ec-ink-mid`: `#374151`
- `--ec-ink-light`: `#6B7280`
- `--ec-rule`: `#E5E7EB`
- `--ec-rule-dark`: `#D1D5DB`
- `--ec-amber`: `#C6851E`
- `--ec-amber-bg`: `#C6851E`
- `--ec-red`: `#DC2626`
- `--ec-red-bg`: `#DC2626`
- `--ec-blue`: `#2563EB`
- `--surface-2`: `#FBFBF9`
- `--accent-tint-2`: `#EDF5F6`

### Typefaces

- Schibsted Grotesk (`--font`)
- JetBrains Mono (`--mono`) — on Google Fonts
- Newsreader (`--serif`) — on Google Fonts
- SF Pro Rounded (`--rounded`)
- IBM Plex Mono (`--ec-mono`)
- Schibsted Grotesk Fallback
- Newsreader Fallback
- Inter — on Google Fonts

### Type scale (most-used sizes)

`17px` · `16px` · `15px` · `14px` · `13.6px` · `13.5px` · `13.12px` · `13px` · `12.5px` · `12px` · `11.5px` · `11px`

### Letter-spacing

`.06em` (10) · `.1em` (10) · `-.01em` (9) · `-.02em` (9) · `.04em` (5) · `.02em` (4)

### Corner radii (most-used)

`50%` · `8px` · `10px` · `6px` · `12px` · `4px` · `999px` · `7px` · `3px` · `14px`

### Shadows

- `0 1px 4px #0000000d`
- `0 12px 28px #0f1a1a1a`
- `0 40px 80px #0f1a1a33`
- `0 2px 8px #00000012`
- `0 1px 2px #0f1a1a0f,0 16px 36px #0f1a1a24`
- `0 14px 30px #0f1a1a47`

### Gradients

- `radial-gradient(at 50% 55%,#000 55%,#0000 88%)`
- `linear-gradient(90deg,#0000 0,#000 14%)`
- `linear-gradient(90deg,#000 38%,#0000 50%)`
- `linear-gradient(135deg,#e7f3f1,#eaeff6)`
- `radial-gradient(80% 60% at 110% -10%,#ffffff2e 0%,#0000 60%)`
- `radial-gradient(60% 50% at -10% 110%,#0000001f 0%,#0000 55%)`
```