Virtual Physical Therapy and More: Personalized Pain Care

Design Specification — Virtual Physical Therapy and More: Personalized Pain Care

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#007B34). All type is set in BrownLLWeb. Detected font weights: 300, 400, 500, 700. Detected style signatures: rounded / pill-heavy.

Logo asset(s): https://www.hingehealth.com/favicon-32x32.png?v=d67da43265f622860ee944946736992c

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg,rgba(0,0,0,0.00) 0%,#000 120%)
• linear-gradient( 95deg,#F9F9F9 20%,#DBDBDB 50%,#F9F9F9 60% )

Typography

Primary typeface: BrownLLWeb — stack: BrownLLWeb

Font stacks (most used first)

• BrownLLWeb
• BrownLLWeb,sans-serif
• "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 8px 0 rgba(0,0,0,.3)

Layout

Container max-width: 1100px

Breakpoints

• 322px
• 377px
• 768px
• 992px
• 1024px
• 1100px
• 1101px
• 1440px

Animation & Motion

Transitions

• all 0.2s
• rotate 0.25s
• opacity 500ms
• background-color 500ms ease
• all 0.3s ease
• width 0.1s ease-out
• background-color 0.2s ease-in-out
• -webkit-transform 0.3s ease-out
• transform 0.3s ease-out
• 0.5s ease-in-out
• 0.25s ease-in-out
• 0.25s

Animations

• lbWRkT .5s linear,lfJhcX 1s linear infinite,gnMFVW 3.5s linear infinite

CTA labels found on page

• Enroll now
• Am I eligible?
• Request a business demo

Source Design Tokens (CSS custom properties)

:root {
  --reach-dialog: 1;
  --webkit-view-transition-name: main-nav;
  --progress: 0%;
}

Do's and Don'ts

Do

• Do reserve the accent #007B34 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 700.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #00491F;
  --color-accent: #007B34;
  --color-background: #FFFFFF;
  --color-surface: #F9F9F9;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #373938;
  --color-border: #BCBCBC;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F9F9F9;
  --color-surface-container: #DDDDDD;
  --color-surface-container-high: #DBDBDB;
  --font-sans: BrownLLWeb;
  --font-size-display: 56px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 35px;
  --radius-pill: 100%;
  --shadow-md: 0 0 8px 0 rgba(0,0,0,.3);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-label: 0.5px;
  --container-max: 1100px;
}