# EngageRocket Design System

> A professional enterprise canvas of pure white and soft grays, punctuated by a high-contrast electric blue and a tri-color pastel logic for data storytelling.

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

## TL;DR
EngageRocket utilizes a clean, high-utility SaaS aesthetic centered on a primary electric blue `#1477f8`. The system is built on a foundation of white `#ffffff` and light gray `#f5f6fa` surfaces, using a specific "Pastel Trio" (Yellow `#fcc658`, Lavender `#cac5ff`, and Coral `#f7a79e`) to categorize high-level metrics and product pillars. Typography is strictly sans-serif, pairing **Inter** for structural UI and headers with **Roboto** for long-form body content. Buttons are characterized by generous horizontal padding and a mix of sharp 4px and 6px radii, maintaining a balance between approachable and corporate.

## Signature DNA
1. **The Metric Trio** (Yellow `#fcc658`, Lavender `#cac5ff`, Coral `#f7a79e` used as background blocks for top-level social proof and product categories across all pages).
2. **Electric Blue Anchoring** (Primary action color `#1477f8` used for high-intent CTAs and deep-purple/blue gradients in hero sections).
3. **Hybrid Sans-Serif Logic** (Inter at 700 weight for display headers vs. Roboto at 400 weight for readability in descriptive blocks).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary page background, card surfaces | 82 | 1.0 | brand_page |
| `{color.ghost-gray}` | `#f5f6fa` | Secondary section backgrounds, alternating bands | 33 | 1.0 | brand_page |
| `{color.slate-dark}` | `#3e4450` | Primary text color, form labels | 722 | 0.8 | computed_style |
| `{color.ink-deep}` | `#1e004d` | Heading text, footer backgrounds | 159 | 0.8 | computed_style |
| `{color.border-light}` | `#d9dde7` | Input borders, subtle dividers | 20 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#1477f8` | Primary CTA backgrounds, active links | 32 | 1.0 | brand_page |
| `{color.accent-yellow}` | `#fcc658` | Metric card background (450K users) | 11 | 1.0 | brand_page |
| `{color.accent-lavender}` | `#cac5ff` | Metric card background (18+ countries) | 5 | 1.0 | brand_page |
| `{color.accent-coral}` | `#f7a79e` | Metric card background (66M+ responses) | 3 | 1.0 | brand_page |
| `{color.brand-purple}` | `#6e31ff` | Product feature borders, secondary accents | 68 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 700 | Display, Headings, UI Labels | Inter (Google Fonts) | SIL Open Font |
| Roboto | 300, 400, 500, 700 | Body copy, Form inputs, Subheadings | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 60px | -0.48px | 700 | Hero H3 headlines | `h3` |
| `{type.h1}` | 34px | 42.5px | -0.34px | 700 | Main page H1 | `h1:nth-of-type(1)` |
| `{type.h2}` | 28px | 35px | normal | 700 | Section headers | `h2:nth-of-type(1)` |
| `{type.h3}` | 24px | 30px | -0.24px | 500 | Feature titles | `h3:nth-of-type(1)` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Intro paragraphs | `p:nth-of-type(1)` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard body copy | `p:nth-of-type(1)` |
| `{type.label}` | 14px | 20px | normal | 500 | Nav links, small CTAs | `a` |
| `{type.caption}` | 11px | 16.5px | 0.8px | 500 | Uppercase labels | `li.hs-menu-item` |

### Principles
1. **Tight Display Tracking:** Large Inter headers (32px+) use negative letter-spacing (-0.2px to -0.48px) for impact.
2. **Body Line-Height:** Roboto body text maintains a 1.5x line-height (24px on 16px text) for readability.
3. **Weight Contrast:** UI labels use 500 (Medium) to distinguish from 400 (Regular) descriptive text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 71 |
| `{space.sm}` | 12px | 48 |
| `{space.md}` | 16px | 55 |
| `{space.lg}` | 20px | 106 |
| `{space.xl}` | 32px | 30 |
| `{space.xxl}` | 48px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.input}` | 2px | Form fields | `input` |
| `{radius.button}` | 4px | Primary CTAs | `Rounded Button` |
| `{radius.card}` | 8px | Metric/Feature cards | `Card` |
| `{radius.large}` | 10px | Pricing/Elevated cards | `Card` |
| `{radius.full}` | 50% | Avatars, icon circles | `Card` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default surfaces | `Surface` |
| `{shadow.low}` | `rgba(61, 66, 77, 0.09) 0px 2px 4px 0px` | Navigation bar, small cards | `Surface` |
| `{shadow.accent}` | `rgba(192, 88, 255, 0.13) 0px 4px 16px 0px` | Feature cards (purple tint) | `Card` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Talk to our team, Book a demo)
**Pages observed:** All
**Spec:** Background `{color.primary}` (#1477f8) | Text `{color.white}` (#ffffff) | Radius 4px | Padding 10px 40px | Typography `{type.label}`
**States observed:** Default | Hover | Active: captured

#### Text Input
**Role:** Form data entry
**Pages observed:** Homepage, Pricing
**Spec:** Background `#ffffff` | Text `#3e4450` | Border 1px `#d9dde7` | Radius 2px | Padding 6px 12px
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Metric Card
**Role:** Displaying social proof numbers
**Pages observed:** Homepage, About
**Spec:** Background `{color.accent-*}` | Text `#3e4450` | Radius 8px | Padding 8px 16px
**States observed:** Default: captured

#### Feature Card (Belong/Grow)
**Role:** Product pillar differentiation
**Pages observed:** Homepage
**Spec:** Background `#ffffff` | Border 2px `#6e31ff` | Radius 20px | Shadow `{shadow.low}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Plan details
**Pages observed:** Pricing
**Spec:** Background `#f9faf2` | Radius 10px | Shadow `{shadow.accent}` | Padding 16px 8px
**States observed:** Default: captured

#### Footer Surface
**Role:** Site navigation and legal
**Pages observed:** All
**Spec:** Background `#2a2b2f` | Text `#959ba2` | Padding 32px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px |
| Section Gap | 80px - 120px |
| Column Grid | 12-column desktop |

## Do's
- Use `#1477f8` for all primary user intent actions.
- Pair Inter (700) headers with Roboto (400) body text.
- Apply negative letter-spacing to Inter headers above 30px.
- Use the Metric Trio colors (`#fcc658`, `#cac5ff`, `#f7a79e`) only for high-level data storytelling.
- Maintain 40px horizontal padding on primary buttons.

## Don'ts
- Do not use `#1477f8` for body text; use `#3e4450` for readability.
- Do not mix border radii on the same card type; stick to 8px or 10px.
- **Wrong:** Using `#fcc658` as a primary button background. **Right:** Use `#1477f8`. **Reason:** Yellow is reserved for metric categorization, not primary navigation.
- Do not use Roboto for display headlines.

## Quick start

```css
:root {
  --er-primary: #1477f8;
  --er-accent-yellow: #fcc658;
  --er-accent-lavender: #cac5ff;
  --er-accent-coral: #f7a79e;
  --er-text-main: #3e4450;
  --er-bg-ghost: #f5f6fa;
  --er-radius-btn: 4px;
  --er-shadow-accent: 0px 4px 16px 0px rgba(192, 88, 255, 0.13);
}
```

## Known gaps
- Hover and Active states for text inputs were not captured in the static trace.
- Mobile-specific navigation transitions (hamburger menu behavior) were not documented.
- Success and Error semantic tokens were not explicitly found in the page evidence.

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