# Wrshealth Design System

> A professional clinical interface defined by deep corporate blues and high-visibility safety green accents on a clean medical-white canvas.

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

## TL;DR
Wrshealth utilizes a high-contrast palette of Navy Blue (#00529c) and Lime Green (#66c21b) to establish a balance between clinical authority and actionable clarity. The system is built on a pure white foundation (#ffffff) with structured typography using Open Sans for both headings and body text. Visual hierarchy is maintained through heavy use of colored surface bands and pill-shaped or rounded-corner buttons. The design avoids complex gradients, favoring solid blocks of color and functional iconography to guide the user through healthcare management workflows.

## Signature DNA
1. **The Action Green** (The use of #66c21b for primary conversion points like "Free Billing Analysis" and "Discover Our Intelligent Platform" creates a high-visibility contrast against the corporate blue.)
2. **Clinical Blue Banding** (Large horizontal sections utilize #00529c as a background to anchor product information and footer navigation, establishing a professional "medical suite" atmosphere.)
3. **Open Sans Uniformity** (The brand relies exclusively on Open Sans across all tiers, using weight shifts (400 to 700) rather than typeface changes to distinguish hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary background, button text on dark, card surfaces | 85 | 1.0 | Computed Style |
| `{color.charcoal}` | `#313131` | Primary text, navigation links, dark borders | 107 | 0.8 | Computed Style |
| `{color.slate}` | `#767678` | Secondary body text, descriptions | 89 | 0.8 | Computed Style |
| `{color.night}` | `#191919` | Footer background, deep surface bands | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#00529c` | Primary brand color, hero backgrounds, primary CTAs | 47 | 0.8 | Computed Style |
| `{color.success}` | `#66c21b` | High-conversion buttons, status badges, accents | 37 | 0.8 | Computed Style |
| `{color.sky-muted}` | `#9cb0ce` | Tertiary text, decorative borders, icons | 50 | 0.8 | Computed Style |
| `{color.blue-border}` | `#1862a5` | Component borders, divider lines | 16 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans | 400, 500, 600, 700 | Heading, Body, UI | Inter | Google Fonts |
| FontAwesome | 400 | Icons | N/A | FontAwesome |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 28px | normal | 400 | Hero Alert/Headlines | `div.alert.alert-primary` |
| `{type.h3-large}` | 36px | 46.8px | normal | 600 | Section Headings | `h3` |
| `{type.h2}` | 28px | 36.4px | normal | 600 | Page Sub-headers | `h2` |
| `{type.h3-small}` | 22px | 28.6px | normal | 600 | Component Titles | `h3` |
| `{type.body-lg}` | 18px | 32.4px | normal | 400 | Lead Paragraphs | `p.fs-lg-18` |
| `{type.body-md}` | 16px | 28px | normal | 400 | Standard Body | `p:nth-of-type(1)` |
| `{type.button}` | 16px | 22.8px | normal | 500 | CTA Labels | `a.btn.btn-green` |
| `{type.nav}` | 14px | 20px | normal | 400 | Navigation Links | `nav.navbar` |

### Principles
1. **Weight-Based Hierarchy:** Headings are consistently weight 600, while body text remains 400.
2. **High Contrast Text:** All primary body text on white backgrounds uses #313131 for maximum legibility.
3. **Iconic Reinforcement:** FontAwesome icons are paired with text labels to provide visual cues for clinical categories.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 22 |
| `{space.sm}` | 10px | 120 |
| `{space.md}` | 20px | 47 |
| `{space.lg}` | 24px | 33 |
| `{space.xl}` | 40px | 3 |
| `{space.section}` | 60px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Surface bands, sharp containers | 302 occurrences |
| `{radius.sm}` | 4px | Navigation dropdowns, inputs | `nav.navbar` |
| `{radius.lg}` | 12px | Feature cards | `div.card` |
| `{radius.pill}` | 50px | Primary and secondary buttons | `a.btn.btn-green` |
| `{radius.circle}` | 100px | Icon containers, avatars | `div.card-circle` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | Default surface state | Most components |
| `{shadow.card}` | `rgba(0, 0, 0, 0.16) 0px 1px 6px 0px` | Floating feature cards | `div.card` |
| `{shadow.nav}` | `rgba(91, 91, 91, 0.2) 0px 3px 10px 0px` | Navigation headers | `nav.navbar` |
| `{shadow.button}` | `rgba(51, 51, 51, 0.65) 0px 3px 3px 0px` | Primary green buttons | `a.btn.btn-green` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** All
**Spec:** Background `{color.success}` (#66c21b) | Text `{color.white}` (#ffffff) | Radius `{radius.pill}` (50px) | Padding 8px 32px | Typography `{type.button}` (16px/500)
**States observed:** Default | Hover: captured (darker green shift) | Focus: not captured | Active: captured

#### Navigation
**Role:** Main site header
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.charcoal}` (#313131) | Border `{color.charcoal}` (0px) | Radius `{radius.sm}` (4px) | Font Size 14px
**States observed:** Default | Hover: captured (blue text shift)

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific software services
**Pages observed:** https://wrshealth.com
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.charcoal}` (#313131) | Radius `{radius.lg}` (12px) | Padding 24px | Shadow `{shadow.card}`
**States observed:** Default | Hover: not captured

#### Footer
**Role:** Global site footer
**Pages observed:** All
**Spec:** Background `{color.night}` (#191919) | Text `{color.slate}` (#a8a8a8) | Padding 24px 0px | Font Size 14px
**States observed:** Default

### Tier 3: Surface-specific

#### Blue Surface Band
**Role:** Section anchoring and hero backgrounds
**Pages observed:** All
**Spec:** Background `{color.primary}` (#00529c) | Text `{color.white}` (#ffffff) | Radius `{radius.none}` (0px) | Padding 40px 0px
**States observed:** Default

#### Solution Badge
**Role:** Inline tags for software solutions
**Pages observed:** All
**Spec:** Background `{color.success}` (#66c21b) | Text `{color.white}` (#ffffff) | Radius `{radius.pill}` (20px) | Padding 3px 26px | Font Size 14px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 60px (vertical) |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; buttons become full-width; section padding reduces to 20px. |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) for feature cards. |

## Do's
- Use `#66c21b` for the primary "conversion" button on any page.
- Ensure all body text on white backgrounds uses `#313131`.
- Apply `{radius.pill}` (50px) to all interactive buttons.
- Use Open Sans 600 for all section headings.
- Maintain a 60px vertical gap between major content sections.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) as a primary background. **Right:** Use `#00529c`. **Reason:** #0693e3 is a preset token not used for primary branding in evidence.
- Do not use serif fonts; the brand is strictly sans-serif (Open Sans).
- Do not use drop shadows on text inside primary blue bands.
- Do not use sharp corners (0px) for buttons; always use the pill shape.
- Do not mix multiple icon libraries; stick to FontAwesome 400.

## Similar brands
- Athenahealth
- Nextgen Healthcare
- eClinicalWorks
- Modernizing Medicine

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #00529c;
  --color-success: #66c21b;
  --color-white: #ffffff;
  --color-charcoal: #313131;
  --font-main: 'Open Sans', sans-serif;
  --radius-pill: 50px;
  --shadow-card: 0px 1px 6px 0px rgba(0, 0, 0, 0.16);
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the computed style logs.
- Specific transition timings for button hover effects were not captured.
- Form validation error states (semantic red) were not present in the analyzed pages.

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