# Carepay Design System

> Deep navy foundations anchored by high-contrast cobalt actions and organic, hand-drawn decorative flourishes.

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

## TL;DR
Carepay utilizes a professional, high-trust palette dominated by Navy (`#101f37`) and White (`#ffffff`), with a vibrant Cobalt Blue (`#4285f9`) serving as the primary interactive signal. The system pairs the geometric clarity of **Inter** for functional UI and body text with the characterful **Poppins** for expressive display headlines. Visual interest is generated through a "monochrome plus" approach, where deep teal (`#003840`) and soft sky tints (`#ecf3fe`) provide depth to content sections. A signature design element is the use of thin, hand-drawn "scribble" illustrations that overlay photography and cards, softening the technical nature of the health-tech platform.

## Signature DNA
1. **The Cobalt Pill** (Primary actions use a high-saturation blue `#4285f9` with extreme pill radii `9999px` or `2323px`, creating a friendly but urgent focal point against dark backgrounds.)
2. **Organic Overlays** (Hand-drawn, thin-stroke illustrations—such as hearts or swirls—are layered over professional photography to humanize the brand.)
3. **Deep Canvas Transitions** (The layout alternates between pure white and deep navy `#101f37` or teal `#003840` full-width bands to signal shifts in content hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary-8` | `#101f37` | Primary surface, footer background, button background | 20 | 1 | Computed Style |
| `--white` | `#ffffff` | Page background, primary text on dark surfaces | 96 | 1 | Computed Style |
| `--neutral-8` | `#313940` | Primary body text on light surfaces | 82 | 1 | Computed Style |
| `--neutral-10` | `#13191f` | High-contrast headings, borders | 22 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary-4` | `#4285f9` | Primary CTA background, active borders | 14 | 1 | Computed Style |
| `--info-8` | `#003840` | Dark teal section backgrounds, accent text | 11 | 1 | Computed Style |
| `--info-6` | `#006573` | Secondary accent text | 8 | 1 | Computed Style |
| `--primary-1` | `#ecf3fe` | Soft blue card backgrounds (tint) | 3 | 1 | Computed Style |
| `--info-2` | `#93cbcf` | Decorative only | 2 | 1 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Source |
|---|---|---|---|---|
| `--warning-8` | `#5c2a05` | Warning text | 3 | Computed Style |
| `--task-8` | `#151c66` | Task/Info text | 3 | Computed Style |
| `--special-8` | `#521161` | Special emphasis text | 3 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 600 | Display Headlines | Poppins (Google Fonts) | OFL |
| Inter | 400, 500, 600, 700 | UI, Body, Subheadings | Inter (Google Fonts) | OFL |
| sans-serif | 400, 500, 700 | System Fallback | - | - |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 55px | 66px | normal | 600 | Hero H1 | `h1.rel` |
| `display-lg` | 45px | 58px | normal | 600 | Section H2 | `h2.txt-color-black` |
| `display-md` | 40px | 48px | normal | 700 | Card Titles | `h3.we-do-card-title` |
| `heading-sm` | 26px | 39px | normal | 600 | Feature text | `p.tab-body-txt` |
| `body-lg` | 21px | 31px | normal | 500 | Subtitles | `p.subtitle-txt` |
| `body-md` | 18px | 27px | normal | 500 | Standard prose | `p` |
| `button` | 18px | 27px | normal | 700 | CTA Labels | `a.btn.primary-4-btn` |
| `label-bold` | 16px | 24px | normal | 700 | Pretitled/Badges | `div.pretitle` |
| `body-sm` | 14px | 21px | normal | 400 | Navigation/Small text | `div.navbar` |

### Principles
1. **Poppins is for Impact.** Use only for top-level headings (H1, H2) to maintain brand character.
2. **Inter for Utility.** All functional UI, buttons, and long-form reading must use Inter.
3. **High Contrast Ratios.** Text on dark surfaces (`#101f37`) must always be pure white (`#ffffff`) or high-opacity tints.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 12px | 4 |
| `space-sm` | 16px | 19 |
| `space-md` | 24px | 37 |
| `space-lg` | 32px | 15 |
| `space-xl` | 40px | 10 |
| `space-xxl` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Section containers, sharp buttons | 186 occurrences |
| `radius-card` | 16px | Content cards, image containers | 15 occurrences |
| `radius-pill` | 9999px | Primary CTA buttons | 30 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-low` | `rgba(0, 0, 0, 0.12) 0px 0px 10px 0px` | Small buttons / UI elements | 4 occurrences |
| `shadow-md` | `rgba(0, 0, 0, 0.1) 0px 0px 20px 0px` | Floating surfaces / cards | 2 occurrences |
| `shadow-high` | `rgba(0, 0, 0, 0.25) 0px 2px 12px 0px` | Hover states / Modals | 15 occurrences |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Main call to action (Talk to us, Our story)
**Pages observed:** carepay.com, carepay.com/about
**Spec:** Background: `#4285f9` | Text: `#ffffff` | Border: 2px `#4285f9` | Radius: `9999px` | Padding: `15px 50px` | Typography: Inter 700 18px
**States observed:** Default: Captured | Hover: Not captured

#### Pill Button (Secondary)
**Role:** Secondary actions on dark backgrounds
**Pages observed:** carepay.com
**Spec:** Background: `#101f37` | Text: `#ffffff` | Border: 2px `#101f37` | Radius: `9999px` | Padding: `15px 50px` | Typography: Inter 700 18px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific platform benefits
**Pages observed:** carepay.com, carepay.com/about
**Spec:** Background: `rgba(236, 243, 254, 0.05)` | Text: `#ffffff` | Radius: `16px` | Padding: `60px` | Shadow: None
**States observed:** Default: Captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** carepay.com, carepay.com/about
**Spec:** Background: `#101f37` | Text: `#ffffff` | Radius: `0px` | Typography: Inter 500 16px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Info Surface
**Role:** Full-width content bands for alternating sections
**Pages observed:** carepay.com, carepay.com/about
**Spec:** Background: `#003840` | Text: `#edf8fa` | Radius: `0px` | Padding: `0px`
**States observed:** Default: Captured

#### Neutral Surface
**Role:** Subtle background for secondary content
**Pages observed:** carepay.com, carepay.com/about
**Spec:** Background: `#f1f3f4` | Text: `#313940` | Radius: `0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px (approx) |
| Section Padding | 60px - 100px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero H1 scales to ~32px; Buttons become full-width. |
| Desktop | 1440px | Standard 12-column grid; horizontal navigation. |

## Imagery & decoration
Carepay uses high-quality photography of people (members, providers) to ground the technology. These images are often framed in `16px` rounded containers. The brand's unique decorative move is the "Scribble"—thin, hand-drawn vector lines in white or accent colors that appear to float over the UI, adding a layer of human touch to the medical/financial context.

## Do's
- Use `#4285f9` for the primary "Talk to us" action.
- Apply `16px` border radius to all content cards.
- Use **Poppins 600** for all H1 and H2 headlines.
- Ensure text on `#101f37` surfaces is `#ffffff` for accessibility.
- Incorporate hand-drawn "scribble" motifs sparingly to humanize photography.

## Don'ts
- Do not use `#4285f9` for body text; it is reserved for interactive signals.
- Do not use sharp corners (`0px`) for cards; only for full-width section containers.
- Do not mix Poppins into body copy or small UI labels.
- Do not use sub-brand colors (if they existed) as the primary site-wide action color.
- Do not apply shadows to primary pill buttons; they should remain flat.

## Similar brands
- Oscar Health (Human-centric healthcare)
- Stripe (High-trust financial surfaces)
- Qonto (Professional navy/cobalt UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary-8: #101f37;
  --primary-4: #4285f9;
  --primary-1: #ecf3fe;
  --neutral-8: #313940;
  --neutral-10: #13191f;
  --info-8: #003840;
  --white: #ffffff;
  --radius-card: 16px;
  --radius-pill: 9999px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-navy: #101f37;
  --color-cobalt: #4285f9;
  --color-teal: #003840;
  --font-display: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius-card: 16px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Carepay's cobalt blue #4285f9, with a 9999px border radius and Inter Bold 18px text."
- "Design a feature card with a soft blue background #ecf3fe, 16px corner radius, and a Poppins 600 headline."
- "Generate a hero section with a deep navy #101f37 background and white text, featuring a Poppins 600 H1."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the source tokens.
- Specific mobile-only typography scale for H3-H6 was not fully sampled.
- Exact SVG paths for the "scribble" decorative elements are not tokenized.

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