# Caresoft.us Design System

> High-contrast orange utility meets soft-shadowed white surfaces, anchored by heavy Gilroy display type.

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

## TL;DR
Caresoft.us utilizes a high-energy palette dominated by Safety Orange (#ff7101) and Apple Green (#93c853) against a clean white foundation. The system relies on the **Gilroy** typeface family, using extreme weight contrasts—ranging from 900-weight display headings to 400-weight body text—to establish hierarchy. Components are characterized by generous border radii (30px to 50px) and soft, expansive shadows (#f5f5f5) that create a friendly, approachable software aesthetic. Layouts are spacious, often using 40px to 60px of internal padding to maintain legibility for administrative users.

## Signature DNA
1. **The Safety Pill** (High-saturation #ff7101 or #93c853 buttons with 30px-50px radii, seen on all pages).
2. **Gilroy Black Display** (Heavy 900-weight headings at 72px and 48px that anchor the top of every page).
3. **Ghost Shadows** (Large, low-opacity shadows like `rgb(245, 245, 245) 0px 5px 25px 6px` that lift cards without adding visual clutter).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Page background, button text | 99 | 1.0 | computed_style |
| `{color.ink.primary}` | #222222 | Primary body text | 289 | 0.8 | computed_style |
| `{color.ink.muted}` | #545454 | Secondary descriptive text | 49 | 0.8 | computed_style |
| `{color.border.light}` | #cccccc | Form borders, dividers | 10 | 0.6 | computed_style |
| `{color.surface.soft}` | #f2f2f2 | Alternating sections | 7 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.orange}` | #ff7101 | Primary CTA, active text | 19 | 0.8 | computed_style |
| `{color.brand.green}` | #93c853 | Secondary CTA (Watch Demo) | 4 | 0.6 | computed_style |
| `{color.brand.peach}` | #ffead9 | Decorative background blobs | 12 | 0.8 | computed_style |
| `{color.brand.footer}` | #ff9534 | Footer background | 4 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.error}` | #ff0000 | Required form labels | 7 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Gilroy | 400, 500, 700, 900 | Display, Headings, UI | Montserrat | Commercial |
| sans-serif | 400 | Form inputs | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 72px | 79.2px | normal | 900 | Hero H1 | `h1` |
| `{type.display.lg}` | 48px | 56px | normal | 900 | Section H2 | `h2` |
| `{type.body.lg}` | 18px | 26px | normal | 400 | Intro paragraphs | `p:nth-of-type(2)` |
| `{type.heading.sm}` | 18px | 24px | normal | 700 | Card titles | `h2` |
| `{type.label}` | 16px | 20.8px | normal | 700 | Form labels | `label` |
| `{type.body.md}` | 16px | 20.8px | normal | 400 | Standard body | `span` |
| `{type.nav}` | 14px | 22px | normal | 500 | Header menu | `header a` |
| `{type.button}` | 14px | 26px | normal | 700 | CTA text | `a.btn1` |
| `{type.caption}` | 12px | 22px | normal | 500 | Sub-labels | `a` |

### Principles
1. **Weight Extremes:** Use 900 weight for display and 400 for body; avoid 600/700 for long-form text.
2. **Tight Display Leading:** Display headings use a 1.1x line-height ratio.
3. **Gilroy Everywhere:** All brand-critical touchpoints must use Gilroy; system sans-serif is reserved for user input fields.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 5px | 19 |
| `{space.xs}` | 10px | 119 |
| `{space.sm}` | 20px | 55 |
| `{space.md}` | 30px | 41 |
| `{space.lg}` | 40px | 39 |
| `{space.xl}` | 60px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.input}` | 2px | Text inputs | `input#wpforms-810-field_0` |
| `{radius.card}` | 5px | Feature cards | `Card` component |
| `{radius.pill}` | 30px | Primary buttons | `Rounded Button` component |
| `{radius.full}` | 50px | Large UI panels | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | 0px 5px 25px 6px #f5f5f5 | Feature/Testimonial cards | `Card` component |
| `{shadow.nav}` | 0px 2px 5px 0px #f6f4f4 | Sticky header | `Navigation` component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: `{color.brand.orange}` (#ff7101) | Text: `{color.white}` (#ffffff) | Radius: 30px | Padding: 10px 30px | Typography: `{type.button}`
**States observed:** Default: captured | Hover: not captured

#### Navigation
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `{color.white}` (#ffffff) | Text: `{color.ink.primary}` (#222222) | Shadow: `{shadow.nav}` | Padding: 20px 0px
**States observed:** Default: captured

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and testimonials
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.white}` (#ffffff) | Radius: 5px | Padding: 40px 30px | Shadow: `{shadow.card}`
**States observed:** Default: captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** Pricing
**Spec:** Background: `{color.white}` (#ffffff) | Border: 1px `{color.border.light}` (#cccccc) | Radius: 2px | Padding: 6px 10px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Footer
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background: `{color.brand.footer}` (#ff9534) | Text: `{color.ink.primary}` (#222222) | Padding: 60px 0px
**States observed:** Default: captured

#### Pricing Surface
**Role:** Background for pricing tiers
**Pages observed:** Pricing, About
**Spec:** Background: #f9f0fc | Padding: 150px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 150px (vertical) |
| Grid Gap (Cards) | 30px |

## Imagery & decoration
- **Organic Blobs:** Uses soft, rounded background shapes in `{color.brand.peach}` (#ffead9) behind device mockups.
- **Iconography:** Line-art icons contained within circular peach backgrounds.
- **Photography:** Features warm, high-key photos of caregivers and patients, often with rounded-corner masking.

## Do's
- Use Gilroy 900 for all H1 and H2 headings.
- Apply `{shadow.card}` to all white surfaces sitting on white backgrounds.
- Ensure primary buttons use the 30px pill radius.
- Use `{color.brand.orange}` for the main "Free Trial" action.
- Maintain 150px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using #ff9534 (Footer Orange) for primary buttons. **Right:** Use #ff7101. **Reason:** #ff9534 is a lower-contrast background color reserved for large surfaces.
- Do not use sharp 0px corners for buttons or cards.
- Do not use Gilroy 900 for body text; it is strictly for display.
- Do not use pure black (#000000) for text; use `{color.ink.primary}` (#222222).

## Similar brands
- HubSpot (use of orange/green accents)
- Zendesk (clean surfaces, soft shadows)
- Help Scout (friendly typography, organic shapes)

## Quick start
```css
:root {
  --color-primary: #ff7101;
  --color-secondary: #93c853;
  --color-ink: #222222;
  --font-display: 'Gilroy', sans-serif;
  --shadow-card: 0px 5px 25px 6px #f5f5f5;
  --radius-pill: 30px;
}
```

## Agent prompt examples
- "Generate a feature card using a white background, 5px border radius, and a 0px 5px 25px 6px #f5f5f5 shadow. Use Gilroy 700 for the 18px title."
- "Create a primary CTA button with #ff7101 background, white Gilroy 700 text, and 30px border radius."
- "Design a hero section with a 72px Gilroy 900 headline in #222222 and a #ff7101 pill button."

## Known gaps
- Hover and Active states for buttons were not captured in the computed style evidence.
- Mobile-specific font scale adjustments for display sizes were not fully sampled.

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