# Jasprhealth Design System

> Clinical precision meets human warmth through airy Source Sans Pro display weights and a deep slate-indigo palette.

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

## TL;DR
Jasprhealth utilizes a "monochrome-plus" system where a deep slate-indigo (#383a56) acts as the primary anchor for text, backgrounds, and brand iconography. The visual language is defined by extreme typographic contrast: massive display headlines (up to 70px) are set in ultra-light weights (200-300) of Source Sans Pro, creating a clinical yet approachable "editorial" feel. Secondary accents of bright cyan (#33a5be) are used sparingly for interactive borders and specific text highlights. Layouts are characterized by generous white space, sharp 0px corners on major containers, and subtle 4px radii on interactive inputs and buttons.

## Signature DNA
1. **The Ultra-Light Display** (Source Sans Pro at weight 200/300 for all major headings, scaling from 40px to 70px. Observed on homepage and about page.)
2. **Slate-Indigo Foundation** (The use of #383a56 as both the primary text color and a full-bleed section background color to create high-contrast content blocks.)
3. **The 2px Ghost Button** (Transparent buttons with 2px borders and 4px radii, utilizing high letter-spacing (2px) for a technical, precise aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Primary canvas, button text on dark, card backgrounds | 72 | 1.0 | `:root` token |
| `{color.black}` | #000000 | Deep shadows, absolute dark surfaces | 2 | 1.0 | `:root` token |
| `{color.slate-indigo}` | #383a56 | Primary text, section backgrounds, brand borders | 247 | 0.8 | Computed style |
| `{color.gray.700}` | #777777 | Muted secondary text, footer copyright | 6 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.cyan}` | #33a5be | Interactive highlights, specific text accents | 26 | 0.8 | Computed style |
| `{color.cyan.light}` | #68bbd0 | Input borders, decorative strokes | 2 | 0.4 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Source Sans Pro | 200, 300, 600, 900 | Headlines, Display, UI | Source Sans 3 | SIL Open Font |
| Open Sans | 600 | Logo, specific navigation labels | Open Sans | SIL Open Font |
| icomoon | 400 | Iconography and button arrows | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 70px | 100px | 1px | 300 | Hero Input/Display | `input` |
| `{type.display.xl}` | 60px | 70px | normal | 200 | Primary Page Hero | `h1.vc_custom_heading` |
| `{type.display.lg}` | 50px | 50px | normal | 200 | Section Headers | `h3.vc_custom_heading` |
| `{type.display.md}` | 40px | 40px | normal | 200 | Sub-section Headers | `h2.vc_custom_heading` |
| `{type.ui.logo}` | 22px | 22px | -1.5px | 600 | Brand Wordmark | `a#logo` |
| `{type.body.lg}` | 20px | 30px | normal | 300 | Lead Paragraphs | `div.ocm-effect-wrap` |
| `{type.body.md}` | 16px | 22.4px | normal | 300 | Standard Body Text | `a` |
| `{type.button}` | 14px | 20px | 2px | 200 | Primary CTAs | `a.nectar-button.large` |
| `{type.caption}` | 12px | 0px | normal | 300 | Navigation Items | `li#menu-item-171` |

### Principles
1. **Weight Inversion:** Headlines use the lightest weights (200/300) while UI labels and emphasis use heavier weights (600).
2. **Vertical Rhythm:** Large display type uses generous line-height (e.g., 70px size on 100px height) to maintain airiness.
3. **Technical Tracking:** Buttons and icons use +2px letter-spacing to signal a "pro" or "clinical" toolset.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 7px | 9 |
| `{space.sm}` | 8px | 4 |
| `{space.md}` | 10px | 20 |
| `{space.lg}` | 20px | 8 |
| `{space.xl}` | 30px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, cards, surfaces | 306 occurrences |
| `{radius.sm}` | 4px | Buttons, text inputs | 6 occurrences |
| `{radius.md}` | 5px | Alternative input fields | 4 occurrences |
| `{radius.full}` | 200px | Pill-shaped decorative elements | 2 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All observed surfaces and cards | 0px border-width components |

## Components

### Tier 1: Foundational

#### Surface (Dark)
**Role:** Full-bleed section background for high-impact content.
**Pages observed:** Homepage, About
**Spec:** Background `{color.slate-indigo}` (#383a56) | Text `{color.white}` (#ffffff) | Radius 0px | Padding 20px 0px
**States observed:** Default: captured

#### Text Input (Hero)
**Role:** Large-scale interactive display field.
**Pages observed:** Homepage
**Spec:** Background transparent | Text `{color.white}` (#ffffff) | Border `{color.cyan.light}` (#68bbd0) | Radius 4px | Typography `{type.display.mega}` (70px/300)
**States observed:** Default: captured

### Tier 2: Patterns

#### Rounded Button (Ghost)
**Role:** Secondary CTA (e.g., "Request a Demo").
**Pages observed:** Homepage
**Spec:** Background transparent | Text `{color.slate-indigo}` (#383a56) | Border 2px `{color.slate-indigo}` (#383a56) | Radius 4px | Padding 13px 37px | Typography `{type.button}` (14px/200)
**States observed:** Default: captured

#### Card (Pill)
**Role:** Decorative or specialized content container.
**Pages observed:** Homepage
**Spec:** Background rgba(0, 0, 0, 0.25) | Text `{color.white}` (#ffffff) | Border `{color.white}` (#ffffff) | Radius 200px | Typography `{type.body.lg}` (20px/300)
**States observed:** Default: captured

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

## Layout
| Property | Value |
|---|---|
| Section Padding (Vertical) | 40px |
| Max Content Width | ~1200px (observed in desktop screenshots) |
| Grid | Multi-column flex (observed in "For Providers" / "For Patients" sections) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; display type stacks vertically. |
| Desktop | 1440px | Horizontal navigation; multi-column feature grids. |

## Imagery & decoration
Jasprhealth uses high-quality, desaturated photography of clinical environments and technology (tablets). Decorative elements are limited to thin 1px-2px lines and pill-shaped overlays. It avoids heavy shadows, gradients, and rounded corners on primary containers.

## Do's
1. Use **Source Sans Pro 200** for headlines larger than 40px.
2. Maintain **0px border radius** on all major section containers.
3. Apply **2px letter spacing** to all button labels.
4. Use **#383a56** as the primary background for "Hero" or "Call to Action" sections.
5. Ensure **#ffffff** text is used on dark indigo backgrounds for 11.0:1 contrast.

## Don'ts
1. Do not use bold weights (>600) for display headlines; keep them light (200-300).
2. Do not apply shadows to cards; use borders or background shifts for separation.
3. Do not use the accent cyan (#33a5be) as a primary background color.
4. Do not mix rounded corners (>4px) with the standard sharp-edged layout.
5. **Wrong:** Using #0693e3 (Vivid Cyan Blue) as the primary brand color. **Right:** Use #383a56. **Reason:** #0693e3 is a WP preset token, not the resolved brand primary.

## Similar brands
- Oscar Health (typographic clarity)
- Parsley Health (clinical/lifestyle editorial)
- Modern Health (clean, light-weight sans-serif usage)

## Quick start

### CSS Variables
```css
:root {
  --color-primary: #383a56;
  --color-accent: #33a5be;
  --color-white: #ffffff;
  --font-display: 'Source Sans Pro', sans-serif;
  --weight-display: 200;
  --radius-button: 4px;
  --letter-spacing-btn: 2px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-slate-indigo: #383a56;
  --color-cyan-accent: #33a5be;
  --font-source: "Source Sans Pro";
  --radius-sharp: 0px;
  --radius-button: 4px;
}
```

## Agent prompt examples
- "Create a hero section with a #383a56 background and a 60px Source Sans Pro headline at weight 200."
- "Design a ghost button with a 2px border of #383a56, 4px border radius, and 2px letter spacing."
- "Generate a content grid using 0px border-radius cards and #383a56 text."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Semantic colors (Success/Error) were not present in the analyzed pages.
- Specific mobile breakpoint values (e.g., 768px) were not in the token set.

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