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