# Lifeyield Design System

> Corporate blue anchored by high-visibility orange actions and geometric light-blue sectioning.

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

## TL;DR
Lifeyield utilizes a professional "WealthTech" palette dominated by a deep navy ink (#1a4882) and a vibrant safety orange (#f57b20) for primary conversions. The layout is characterized by large, centered Heebo headlines and a distinct "diagonal-cut" sectioning strategy where light blue (#eef8fc) and navy backgrounds meet at sharp angles. Typography is clean and sans-serif, relying on Heebo's weight range (400 to 700) to establish hierarchy. Component geometry is polarized: either strictly sharp-edged containers or fully rounded "pill" buttons.

## Signature DNA
1. **The Conversion Orange** (Primary CTAs use #f57b20, a high-contrast departure from the otherwise blue-scale palette, observed on homepage and about pages).
2. **Diagonal Canvas Cuts** (Large sections use background colors like #1a4882 and #eef8fc with non-horizontal clipping paths to create movement).
3. **Pill-to-Sharp Contrast** (Interactive elements like buttons use 50px-100px radii, while content cards and sections maintain 0px sharp corners).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text | 82 | 1.0 | Computed Style |
| `{color.navy}` | `#1a4882` | Primary text, footer background, borders | 257 | 0.8 | Computed Style |
| `{color.ice}` | `#eef8fc` | Subtle section backgrounds | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.orange}` | `#f57b20` | Primary CTA background | 5 | 0.6 | Computed Style |
| `{color.sky}` | `#67c4eb` | Secondary button background, accents | 5 | 0.6 | Computed Style |
| `{color.azure}` | `#41b9ea` | Link text, decorative icons | 18 | 0.8 | Computed Style |
| `{color.pale-blue}` | `#d4f1fc` | Decorative surface background | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Heebo | 400, 500, 600, 700, 900 | Heading & Body | Heebo (Google Fonts) | OFL |
| sans-serif | 400 | System Fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.lg}` | 48px | 52.8px | normal | 700 | Main Hero H1 | `h1` |
| `{text.display.md}` | 40px | 46px | normal | 700 | Section Headlines | `h2.centered-text` |
| `{text.heading.md}` | 36px | 41.4px | normal | 400 | Light Headlines | `h2.large-headline--light` |
| `{text.heading.sm}` | 24px | 36px | normal | 400 | Intro Paragraphs | `p.centered-text` |
| `{text.body.lg}` | 20px | 30px | normal | 400 | Lead Body | `p:nth-of-type(1)` |
| `{text.body.md}` | 16px | 20px | normal | 400 | Standard Body | `header#header` |
| `{text.button}` | 16px | 16px | 1px | 700 | Primary CTA | `p.button.button-primary` |
| `{text.caption}` | 12px | 20px | normal | 400 | Chart labels | `tspan` |

### Principles
1. **Centered Authority:** Major headlines and subheads are almost exclusively center-aligned to create a formal, balanced presentation.
2. **Heavyweight Display:** Hero titles use weight 700 to ensure the navy text survives against light blue backgrounds.
3. **Tracking for Action:** Buttons and download links use 1px letter spacing to differentiate interactive text from prose.

## Spacing
**Base unit:** 8px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 6 |
| `{space.sm}` | 16px | 22 |
| `{space.md}` | 24px | 12 |
| `{space.lg}` | 32px | 10 |
| `{space.xl}` | 64px | 13 |
| `{space.section}` | 128px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Content cards, section containers | 272 occurrences |
| `{radius.pill}` | 50px | Secondary buttons, tags | `Surface` component |
| `{radius.full}` | 100px | Primary CTA buttons | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 0px 20px 0px` | Floating info cards on About page | 15 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site conversion (Learn More, Book Demo)
**Pages observed:** https://lifeyield.com, https://lifeyield.com/about
**Spec:** Background `{color.orange}` (#f57b20) / Text `{color.white}` (#ffffff) / Radius 100px / Padding 18px 31.5px / Typography `{text.button}`
**States observed:** Default | Hover: Not captured

#### Secondary Button
**Role:** Tertiary actions or light-surface buttons
**Pages observed:** https://lifeyield.com, https://lifeyield.com/about
**Spec:** Background `{color.sky}` (#67c4eb) / Text `{color.white}` (#ffffff) / Radius 100px / Padding 18px 31.5px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying API features or services
**Pages observed:** https://lifeyield.com
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.navy}` (25% alpha) / Radius 0px / Padding 36px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Navy Section
**Role:** High-contrast content bands or footers
**Pages observed:** https://lifeyield.com, https://lifeyield.com/about
**Spec:** Background `{color.navy}` (#1a4882) / Text `{color.white}` (#ffffff) / Radius 0px / Padding 64px 16px
**States observed:** Default

#### Ice Section
**Role:** Subtle background for feature grids
**Pages observed:** https://lifeyield.com, https://lifeyield.com/about
**Spec:** Background `{color.ice}` (#eef8fc) / Text `{color.navy}` (#1a4882) / Radius 0px / Padding 64px 16px
**States observed:** Default

#### Floating Info Card
**Role:** About page vision and solution blocks
**Pages observed:** https://lifeyield.com/about
**Spec:** Background `{color.white}` (#ffffff) / Shadow `{shadow.card}` / Radius 0px / Padding 30px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (inferred from desktop screenshots) |
| Section Padding | 64px (vertical) |
| Grid | 3-column feature layout on desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column |

## Imagery & decoration
- **Geometric Icons:** Uses thin-stroke circular icons in orange (#f57b20) to represent financial concepts.
- **Diagonal Masks:** Background sections are often clipped at 5-10 degree angles rather than flat horizontal lines.
- **Avoids:** Rounded corners on cards or containers; photography is minimized in favor of diagrams and charts.

## Do's
- Use `#f57b20` for the primary "Book a Demo" or "Schedule" actions only.
- Set all major headlines in Heebo Bold (700).
- Maintain sharp 0px corners for all content containers and cards.
- Use `#eef8fc` for alternating background sections to maintain depth.
- Center-align headlines in the 36px to 48px range.

## Don'ts
- **Wrong:** Using `#007cba` (WP Admin Blue) as a primary brand color. **Right:** Use `#1a4882`. **Reason:** The admin theme color is a system default, not the Lifeyield brand primary.
- Do not add border-radius to content cards; keep them sharp.
- Do not use orange for body text; it is reserved for interactive backgrounds and icons.
- Avoid using pure black (#000000) for text; use Navy (#1a4882) for better brand cohesion.

## Similar brands
- Charles Schwab (Corporate blue/white/orange accents)
- Betterment (Financial tech, clean sans-serif, blue-scale)
- Envestnet (WealthTech, geometric layouts, professional blue)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-navy: #1a4882;
  --color-orange: #f57b20;
  --color-sky: #67c4eb;
  --color-ice: #eef8fc;
  --font-main: 'Heebo', sans-serif;
  --radius-pill: 100px;
  --shadow-card: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a hero section with a centered H1 in Heebo 700 #1a4882 and a pill-shaped button in #f57b20."
- "Create a 3-column feature grid using white cards with 0px border-radius and a subtle 1px border in #1a4882 at 25% opacity."
- "Design a footer with a #1a4882 background and white Heebo text at 14px."

## Known gaps
- Hover and Active states for buttons were not captured in the source evidence.
- Specific mobile breakpoint values (e.g., 768px, 1024px) were not explicitly defined in the tokens.
- Internal application UI (the "Dashboard") was not analyzed; documentation is limited to the public marketing site.

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