# Isolvedbenefitservices Design System

> High-contrast corporate utility anchored by a signature magenta voltage and light-weight Open Sans typography.

**Source:** https://isolvedbenefitservices.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Isolvedbenefitservices utilizes a clean, high-contrast palette where a vibrant magenta (`#f7008c`) serves as the primary brand signal against a stark white (`#ffffff`) and light gray (`#efeff0`) foundation. The system relies heavily on **Open Sans** at a signature light weight (300) for both display and body copy, creating an airy, professional atmosphere. Layouts are structured with generous vertical spacing (up to 120px) and a strict adherence to sharp, 0px border radii for all containers and buttons. Cyan (`#00a6da`) acts as a secondary functional accent for large section backgrounds and specific call-to-action moments.

## Signature DNA
1. **The Magenta Pulse** (`#f7008c`): Used as the primary color for logos, icons, and text-based CTAs, providing a high-energy contrast against the neutral base.
2. **Light-Weight Typography** (Open Sans 300): The brand avoids heavy weights, using weight 300 for everything from H1 headers (36px) to standard body paragraphs (16px).
3. **Sharp Geometry** (0px Radius): A complete rejection of rounded corners; every button, card, and surface is strictly rectangular, signaling corporate precision.

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, primary surface | 25 | 1.0 | Computed style |
| `{color.gray.light}` | `#efeff0` | Section backgrounds, subtle borders | 18 | 0.8 | Computed style |
| `{color.text.primary}` | `#666666` | Default body text | 178 | 0.8 | Computed style |
| `{color.text.muted}` | `#808080` | Secondary text, footer labels | 6 | 0.6 | Computed style |
| `{color.black}` | `#000000` | Overlay states (calendar/events) | 1 | 1.0 | `--fc-event-selected-overlay-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#f7008c` | Brand logo, icons, border-buttons, text links | 52 | 0.8 | Chromatic signal |
| `{color.secondary}` | `#00a6da` | Hero backgrounds, primary action buttons | 4 | 0.6 | Computed style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans | 200, 300, 400, 500 | Heading & Body | N/A (Google Font) | Apache 2.0 |
| Helvetica Neue | 400 | Secondary Body | Inter | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 36px | 54px | normal | 300 | Main Page Headers | `h1.text-caps` |
| `{type.h2}` | 32px | 48px | normal | 300 | Section Headers | `h2.text-caps` |
| `{type.h3}` | 24px | 36px | normal | 200 | Sub-section titles | `h3` |
| `{type.body.lg}` | 16px | 28.8px | normal | 300 | Navigation items | `li.nav-item` |
| `{type.body}` | 16px | 25.6px | normal | 300 | Standard paragraphs | `p` |
| `{type.body.bold}` | 16px | 24px | normal | 400 | Header/UI text | `div.header` |
| `{type.label}` | 13px | 20.48px | normal | 300 | Caps headlines | `p.text-caps.headline` |
| `{type.caption}` | 12px | 28.8px | normal | 500 | Dropdown toggles | `a.nav-link` |

### Principles
1. **Light over Bold:** Weight 300 is the default for information density; weight 500 is reserved for small-scale navigation utility.
2. **Uppercase for Labels:** Section labels and specific headlines use `text-transform: uppercase` to create hierarchy without increasing font weight.
3. **Generous Leading:** Line heights are consistently 1.5x to 1.8x the font size (e.g., 16px/28.8px) to maintain legibility in dense benefit descriptions.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 70 |
| `{space.sm}` | 16px | 40 |
| `{space.md}` | 32px | 11 |
| `{space.lg}` | 40px | 5 |
| `{space.xl}` | 120px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and containers | 239 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.flat}` | none | All UI elements | Observed across all pages |

## Components

### Tier 1: Foundational

#### Primary Button (Ghost)
**Role:** Primary CTA on white backgrounds
**Pages observed:** 3
**Spec:** Background: transparent / Text: `{color.primary}` (#f7008c) / Border: 1px `{color.primary}` / Radius: 0px / Padding: 16px 32px
**States observed:** Default | Hover: Not captured

#### Primary Button (Solid)
**Role:** High-visibility CTA in hero/accent sections
**Pages observed:** 2
**Spec:** Background: transparent / Text: `{color.white}` (#ffffff) / Border: 1px `{color.white}` / Radius: 0px / Padding: 16px 32px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit service grid items
**Pages observed:** 2
**Spec:** Background: `{color.white}` (#ffffff) / Border: 1px `{color.gray.light}` (#efeff0) / Radius: 0px / Padding: 16px / Text: `{color.text.primary}` (#666666)
**States observed:** Default

#### Section Header Group
**Role:** Introducing new content blocks
**Pages observed:** 3
**Spec:** Typography: `{type.h2}` / Border-top: 2px solid `{color.primary}` (#f7008c) (used as a 40px wide decorative rule) / Alignment: Center

### Tier 3: Surface-specific

#### Cyan Hero Block
**Role:** High-impact value proposition
**Pages observed:** 1
**Spec:** Background: `{color.secondary}` (#00a6da) / Text: `{color.white}` (#ffffff) / Padding: 120px 0px
**States observed:** Default

#### Light Gray Content Band
**Role:** Alternating section background
**Pages observed:** 2
**Spec:** Background: `{color.gray.light}` (#efeff0) / Padding: 120px 0px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 120px (Vertical) |
| Grid | 3-column or 4-column benefit grid |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 120px padding reduces; grids stack vertically. |

## Imagery & decoration
- **Iconography:** Thin-stroke line icons in Magenta (`#f7008c`).
- **Photography:** Professional corporate imagery featuring diverse teams in office settings, often with high-key lighting.
- **Decorative Rules:** Short horizontal lines (approx 40px) in Magenta used to anchor section headers.

## Do's
- Use **Open Sans 300** for all primary body and heading text.
- Maintain **0px border radius** on all interactive elements.
- Use **Magenta (#f7008c)** for all iconography and text-based links.
- Apply **120px vertical padding** between major content sections.
- Ensure all buttons have a **1px border**, even if the background is transparent.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px radius. **Reason:** Brand identity is built on sharp, corporate geometry.
- **Wrong:** Using Bold (700) for headers. **Right:** Light (300). **Reason:** The brand signature is a "light" editorial feel.
- **Wrong:** Using Cyan (#00a6da) for text links. **Right:** Magenta (#f7008c). **Reason:** Cyan is reserved for large surface backgrounds and primary action buttons in heroes.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #f7008c;
  --color-secondary: #00a6da;
  --color-bg-light: #efeff0;
  --color-text-main: #666666;
  --font-family-base: 'Open Sans', sans-serif;
  --font-weight-light: 300;
  --radius-none: 0px;
  --spacing-section: 120px;
}
```

## Agent prompt examples
- "Generate a service benefit card using a 1px #efeff0 border, 0px border radius, and a magenta #f7008c line icon at the top."
- "Create a hero section with a #00a6da background, white Open Sans 300 text, and a ghost button with a 1px white border."
- "Design a section header with a 40px wide #f7008c horizontal rule above a 32px Open Sans 300 title in all caps."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Specific mobile breakpoint transitions for the 120px padding were not quantified.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://isolvedbenefitservices.com | 1440px | 2026-06-06 |
| Pricing | https://isolvedbenefitservices.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://isolvedbenefitservices.com | 390px | 2026-06-06 |