---
generator: clinical-terminal-brand-kit
company: "Hinge Health"
domain: "hingehealth.com"
colors:
  primary: "#007B34"
  onPrimary: "#FFFFFF"
  dark: "#00491F"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#00491F"
  accent: "#007B34"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "9px"
  button: "35px"
---

# Design System — Hinge Health

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

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

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

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

## Shape
- Cards and panels: 9px corners. Buttons and chips: 35px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Neutral** (`--color-neutral-N`): 50 `#FFFFFF` · 100 `#D8D8D8` · 200 `#B8B8B8` · 300 `#6B6B6B` · 400 `#474747` · 500 `#737373`
- **Color Stone** (`--color-stone-N`): 50 `#FDFAF5` · 100 `#F8F3E3` · 200 `#EDE4C8` · 300 `#BEBC9A` · 400 `#969269` · 500 `#787555`
- **Color Forest** (`--color-forest-N`): 50 `#6ABF93` · 100 `#3A9B69` · 200 `#00491F` · 300 `#10331F` · 400 `#0A2114`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--color-special-line-light`: `#FFFFFF`
- `--color-special-line-dark`: `#000000`
- `--color-special-red`: `#C13E3E`
- `--color-article-progress`: `#2F7E55`
- `--color-red-500`: `#FB2C36`
- `--color-lime-100`: `#CFFB4E`
- `--color-lime-200`: `#AEDD0F`
- `--color-green-100`: `#DFE9DB`
- `--color-green-30`: `#007B34`
- `--color-purple-100`: `#E8DDF9`
- `--color-purple-200`: `#462572`
- `--color-pink-100`: `#F4DCEC`
- `--color-pink-200`: `#613646`

### Typefaces

- brownLL (`--font-brown-ll`)
- DM Sans (`--font-dm-sans`) — on Google Fonts
- brownLL Fallback
- DM Sans Fallback

### Type scale (most-used sizes)

`55px` · `52px` · `48px` · `45px` · `28px` · `26px` · `20px` · `18px` · `14px` · `12px`

### Letter-spacing

`-.02em` (1) · `-.78px` (1)

### Corner radii (most-used)

`.25rem` · `2147483647px` · `7px` · `4px`

### Gradients

- `linear-gradient(#0000 0%,#00000017 6.67%,#0000002c 13.33%,#0000003e 20%,#0000004e 26.67%,#0000005d 33.33%,#0000006a 40%,#00000075 46.67%,#0000007e 53.33%,#00000086 60%,#0000008d 66.67%,#00000092 73.33%,#00000098 80%,#0000009c 86.67%,#000000a0 93.33%,#000000a3 100%)`

### Breakpoints

375px · 500px · 767px · 768px · 899px · 900px · 1300px · 1440px · 1920px