# Capsicohealth Design System

> High-density clinical intelligence anchored by deep forest greens and precise Poppins typography.

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

## TL;DR
Capsicohealth utilizes a structured, high-contrast layout that balances a clinical white foundation (`#ffffff`) with a deep, authoritative forest green (`#003f24`) in the footer and primary brand elements. The system is typography-heavy, relying on the **Poppins** family to establish a clear hierarchy from 46px display headers down to 14px utility text. UI elements are characterized by generous 25px corner radii on cards and a significant 100px vertical rhythm between major sections. While the system is technically monochrome in its parent structure, it allows for specific accent colors like a deep indigo (`#330099`) and slate blue (`#2c2d3f`) for text-based emphasis.

## Signature DNA
1. **The Deep Forest Anchor** (The use of `#003f24` as a full-width surface background for footers and brand-heavy bands creates a "grounded" medical authority.)
2. **Soft-Shell Containers** (The 25px border radius applied to white cards with heavy `0px 16px 48px` shadows creates a distinct floating-panel aesthetic against the flat canvas.)
3. **Poppins Precision** (A strict adherence to Poppins across all roles, using weight 500 for headers and 400 for long-form body text to maintain a modern, accessible healthcare feel.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, card surfaces, footer text | 51 | 1.0 | `--white` |
| `{color.black}` | `#000000` | Primary text, borders | 16 | 0.8 | Computed Style |
| `{color.gray}` | `#888888` | Secondary body text, icons | 42 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.forest}` | `#003f24` | Primary brand surface (Footer) | 3 | 0.6 | Computed Style |
| `{color.indigo}` | `#330099` | Text emphasis, links | 6 | 0.6 | Computed Style |
| `{color.slate}` | `#2c2d3f` | Dark UI text | 8 | 0.6 | Computed Style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 500, 600, 700 | All UI, Headings, Body | Poppins (Google Fonts) | OFL |
| FontAwesome | 400 | Iconography | FontAwesome Free | GPL/OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 46px | 55.2px | normal | 500 | Section Headers | `h3` |
| `{type.h1}` | 30px | 36px | normal | 500 | Page Titles | `h1` |
| `{type.h2}` | 20px | 24px | normal | 600 | Card Headings | `h2` |
| `{type.h5}` | 20px | 24px | normal | 500 | Sub-headers | `h5.py-4` |
| `{type.body.lg}` | 17px | 34px | normal | 400 | Primary Prose | `p.text.rm1` |
| `{type.subheading}` | 16px | 32px | normal | 500 | Box Titles | `h6.card-title` |
| `{type.body}` | 15px | 24px | normal | 400 | List Items | `li` |
| `{type.body.sm}` | 14px | 24px | normal | 400 | Navigation, Footer | `header.header` |

### Principles
1. **Generous Leading:** Body text consistently uses a line-height of 2.0x the font size (e.g., 17px/34px) to ensure readability in clinical contexts.
2. **Weight-Based Hierarchy:** Headings are strictly 500 or 600 weight; bolding (`700`) is reserved for inline emphasis within body paragraphs.
3. **Achromatic Text Foundation:** The majority of text content is delivered in `#888888` (secondary) or `#000000` (primary), with color used only for interactive states.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 12px | 24 |
| `{space.sm}` | 15px | 11 |
| `{space.md}` | 35px | 7 |
| `{space.section}` | 100px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Buttons, sharp sections | 93 occurrences |
| `{radius.panel}` | 25px | Content cards, feature boxes | `radius: 25px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `0px 16px 48px 0px rgba(0, 0, 0, 0.176)` | Feature cards | Observed on 6 cards |
| `{shadow.soft}` | `1px 4px 20px -2px rgba(0, 0, 0, 0.1)` | Secondary panels | Observed on 2 cards |

## Components

### Tier 1: Foundational

#### Top Navigation
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#000000` | Typography: Poppins 14px/500 | Height: ~80px
**States observed:** Default | Hover: {captured}

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting core platform capabilities
**Pages observed:** https://capsicohealth.com
**Spec:** Background: `#ffffff` | Text: `#888888` | Border: `1px rgba(0, 0, 0, 0.125)` | Radius: 25px | Shadow: `{shadow.deep}`
**States observed:** Default

#### Info Box
**Role:** Secondary content grouping
**Pages observed:** https://capsicohealth.com
**Spec:** Background: `#ffffff` | Padding: 30px | Radius: 25px | Shadow: `{shadow.soft}`
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Global site map and contact info
**Pages observed:** All
**Spec:** Background: `#003f24` | Text: `#ffffff` | Typography: Poppins 14px/400 | Border-top: 1px `#ffffff` (accent)
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | ~1200px |
| Section Vertical Gap | 100px |
| Card Internal Padding | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | 3-column card grids |
| Mobile | 390px | Single column stack, hamburger menu toggle |

## Do's
- Use `#003f24` for primary brand surfaces like footers or hero accents.
- Maintain a 25px border radius on all floating white cards.
- Apply `{shadow.deep}` to cards to separate them from the flat white canvas.
- Keep body text leading at ~2.0x (e.g., 17px font / 34px line-height).
- Use Poppins 500 for all primary headings.

## Don'ts
- **Wrong:** Using a blue primary color for the parent brand. **Right:** Use `#000000` or `#003f24`. **Reason:** The parent brand is monochrome/forest-based; blue is an accent.
- Do not use rounded corners on buttons; buttons remain sharp (`0px`).
- Do not reduce section spacing below 100px for major content transitions.
- Do not use weights below 400 for Poppins text.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-forest: #003f24;
  --color-white: #ffffff;
  --color-gray: #888888;
  --font-main: 'Poppins', sans-serif;
  --radius-panel: 25px;
  --shadow-deep: 0px 16px 48px 0px rgba(0, 0, 0, 0.176);
}
```

## Known gaps
- Form input states (Focus/Error) were not captured in the initial crawl.
- Button hover transitions were not explicitly defined in the CSS variables.
- The specific "Real World Intelligence" green text color (`#28a745` inferred from tokens) was observed but not mapped to a specific component role.

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