# Hingehealth Design System

> Clinical precision meets organic warmth through deep forest greens and geometric sans-serif clarity.

**Source:** https://hingehealth.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Hingehealth utilizes a high-contrast "Forest and Canvas" palette, anchoring the experience in a primary green `#007b34` against a pure white `#ffffff` background. The system relies on **BrownLLWeb** for all typographic needs, utilizing heavy weights (700) for display headers and lighter weights (300-400) for editorial body copy. Component geometry is defined by generous "Pill" radii (35px to 100px) for interactive elements, while content containers use softer 16px to 20px corners. Layouts are spacious, often utilizing 80px to 128px vertical gaps to maintain a clinical, uncluttered atmosphere.

## Signature DNA
1. **The Forest Primary** (The consistent use of `#007b34` for primary CTAs and brand accents across all analyzed pages provides a stable, health-focused anchor.)
2. **BrownLLWeb Display** (Heavyweight 700 display type at 56px and 40px creates a bold, authoritative hierarchy that defines the brand's voice on the homepage and about sections.)
3. **Hyper-Rounded Controls** (The 35px radius on primary buttons and 100px "pill" containers create an approachable, organic feel that softens the clinical precision of the grid.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 20 | 0.8 | computed_style |
| `{color.ink.primary}` | `#000000` | Primary display text | 34 | 0.8 | computed_style |
| `{color.ink.secondary}` | `#373938` | Body text, secondary UI labels | 55 | 0.8 | computed_style |
| `{color.ink.muted}` | `#1c1b1f` | De-emphasized text | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.primary}` | `#007b34` | Primary buttons, borders, brand text | 32 | 0.8 | computed_style |
| `{color.brand.dark}` | `#00491f` | Hover states, deep accents | 17 | 0.8 | computed_style |
| `{color.brand.warm}` | `#fffbed` | Decorative surfaces, secondary backgrounds | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| BrownLLWeb | 300, 400, 500, 700 | All-purpose (Display, Body, UI) | Inter (Sans), Montserrat | Proprietary (Lineto) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 56px | 61.6px | normal | 700 | Hero H1 | `h1.Heading__H1` |
| `{text.display.lg}` | 40px | 56px | normal | 700 | Section Headers | `h2.Heading__H2` |
| `{text.heading.md}` | 32px | 38.4px | normal | 700 | Card Titles | `div.CarouselCard__TitleText` |
| `{text.heading.sm}` | 26px | 33.8px | normal | 700 | Sub-headers | `h4.Heading__H4` |
| `{text.body.lg}` | 22px | 32px | normal | 400 | Intro paragraphs | `p.sc-404__Message` |
| `{text.body.md}` | 18px | 25.2px | normal | 400 | Default body | `span.Body__Body1` |
| `{text.button}` | 18px | 21.6px | 0.5px | 500 | CTA Labels | `button.ButtonElement` |
| `{text.body.sm}` | 16px | 22.4px | normal | 400 | Captions/Sub-labels | `h5.TwoColumnBulletList__SubHeader` |

### Principles
1. **Bold Hierarchy:** Display titles must use weight 700 to contrast against 400 weight body text.
2. **Tight Display Leading:** Large display sizes (56px) use a tight 1.1x line-height ratio.
3. **Interactive Tracking:** Buttons at 18px utilize a 0.5px letter spacing for increased legibility.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.sm}` | 12px | 5 |
| `{space.md}` | 16px | 26 |
| `{space.lg}` | 24px | 13 |
| `{space.xl}` | 40px | 9 |
| `{space.section}` | 80px | 5 |
| `{space.hero}` | 128px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Full-width sections | 99 occurrences |
| `{radius.card}` | 16px | Content cards | Surface component |
| `{radius.card.lg}` | 20px | Large feature cards | Surface component |
| `{radius.pill}` | 35px | Primary buttons | Rounded Button |
| `{radius.full}` | 100px | Pill containers | Surface component |

## Elevation
*Not captured in source. The system appears flat, relying on color blocking and borders rather than shadows.*

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide call to action.
**Pages observed:** https://hingehealth.com, https://hingehealth.com/about
**Spec:** 
- Background: `{color.brand.primary}` (#007b34)
- Text: `{color.canvas}` (#ffffff)
- Border: 2px solid `{color.brand.primary}` (#007b34)
- Radius: `{radius.pill}` (35px)
- Padding: 16px 40px
- Typography: `{text.button}` (18px/500)
**States observed:** Default: captured | Hover/Active: not captured

### Tier 2: Patterns

#### Surface Card
**Role:** Content grouping and feature highlights.
**Pages observed:** https://hingehealth.com, https://hingehealth.com/about
**Spec:** 
- Background: transparent / `#ffffff`
- Text: `{color.ink.secondary}` (#373938)
- Border: 0px
- Radius: `{radius.card}` (16px)
- Typography: `{text.body.sm}` (16px)
**States observed:** Default: captured

#### Pill Container
**Role:** Large structural containers for secondary information.
**Pages observed:** https://hingehealth.com
**Spec:** 
- Radius: `{radius.full}` (100px)
- Border: 0px
- Background: transparent

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
|---|---|
| Max Content Width | ~1280px |
| Section Vertical Padding | 80px - 128px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero H1 scales down; stack column layouts. |
| Desktop | 1440px | Horizontal navigation; multi-column feature grids. |

## Imagery & decoration
- **Clinical Photography:** High-quality imagery of people in home environments performing physical therapy.
- **Abstract Line Art:** Uses sweeping, organic green and yellow lines (observed on 404 and footer areas) to suggest movement.
- **UI Overlays:** Screenshots of the Hinge Health app are frequently used as floating elements within feature cards.

## Do's
- Use `#007b34` for all primary actions to maintain brand recognition.
- Apply `BrownLLWeb` weight 700 for all display headers.
- Maintain a minimum of 80px vertical spacing between major content sections.
- Use 35px border-radius for all primary action buttons.
- Ensure text on primary green backgrounds is always `#ffffff`.

## Don'ts
- **Wrong:** Using a generic bright green (#00FF00) for buttons. **Right:** Use `#007b34`. **Reason:** Brand consistency and WCAG AA contrast compliance.
- **Wrong:** Using sharp corners on interactive buttons. **Right:** Use `{radius.pill}`. **Reason:** Hingehealth identity relies on organic, rounded geometry.
- **Wrong:** Mixing multiple serif fonts. **Right:** Stick to the `BrownLLWeb` family.
- Do not use shadows to create depth; use color-blocked surfaces or borders.

## Similar brands
- Omada Health
- Sword Health
- Headspace
- Modern Health

## Quick start

### CSS Custom Properties
```css
:root {
  --color-brand-primary: #007b34;
  --color-brand-dark: #00491f;
  --color-canvas: #ffffff;
  --color-ink-primary: #000000;
  --color-ink-secondary: #373938;
  
  --font-main: "BrownLLWeb", sans-serif;
  
  --radius-card: 16px;
  --radius-pill: 35px;
  
  --space-section: 80px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Hingehealth's Forest Green (#007b34), white text, and a 35px border radius."
- "Design a content card with a 16px border radius, white background, and a title using BrownLLWeb Bold at 32px."
- "Generate a hero section with a 56px bold header and 128px of vertical padding."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the computed style evidence.
- Shadow tokens are missing as the analyzed pages utilize a flat design language.
- Specific mobile-only typography tokens were not fully isolated from desktop counterparts.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://hingehealth.com | 1440px | 2026-06-06 |
| About | https://hingehealth.com/about | 1440px | 2026-06-06 |
| Pricing | https://hingehealth.com/pricing | 1440px | 2026-06-06 |