# Leapfrog Design System

> High-contrast educational utility anchored by a signature "Leapfrog Green" and rounded, accessible geometry.

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

## TL;DR
Leapfrog’s design system is built on a high-contrast foundation of pure white (#ffffff) and a deep achromatic gray (#222222), punctuated by a vibrant spectrum of greens (#62a300, #15803d). The typography pairs the friendly, rounded characteristics of **Mulish** for headings with the high-legibility utility of **Inter** for body and interactive elements. Layouts are strictly modular, utilizing saturated color bands to group content by age or category. Components favor extreme corner radii (90px+) for interactive pills or sharp 0px edges for structural surfaces, creating a clear distinction between "container" and "action."

## Signature DNA
1. **The Green Horizon** (Saturated green bands (#62a300) used as full-width section anchors to group "Learning Resources" and footer CTAs, providing a high-energy visual floor.)
2. **Mulish Display** (Mulish at weight 600 serves as the brand's friendly voice, specifically at 24px and 36px for all primary section headers and product titles.)
3. **Pill-Form Interactivity** (Interactive buttons and badges utilize a 90px+ radius, creating a "soft-touch" tactile feel consistent with physical toy design.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Leapfrog Academy | #62a300 | Circular badges | Parent Foundation | Custom app-specific navigation |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, surface background | 41 | 1.0 | Computed Style |
| `{color.charcoal}` | `#222222` | Primary text, footer text, button labels | 87 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.green.primary}` | `#62a300` | Section backgrounds, category headers, borders | 19 | 0.8 | Computed Style |
| `{color.green.dark}` | `#15803d` | Text emphasis, secondary links | 70 | 0.8 | Computed Style |
| `{color.green.deep}` | `#006232` | High-contrast text links | 27 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.focus.ring}` | `#3b82f6` | Accessibility focus state (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Mulish | 400, 600 | Headings, Product Titles | Mulish (Google Fonts) | SIL Open Font |
| Inter | 400, 500, 700, 800 | Body, Buttons, Navigation | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 36px | 28px | normal | 600 | Main section heads | `span.fontsize36` |
| `{type.heading.md}` | 24px | 32px | normal | 600 | Hero sub-headers | `h2.white` |
| `{type.heading.sm}` | 24px | 15px | normal | 600 | Product titles | `h2` |
| `{type.button.lg}` | 20px | 28px | normal | 700 | Primary CTA buttons | `a.LinkButton` |
| `{type.body.bold}` | 19px | 28.5px | normal | 700 | Emphasized body | `div.font-bold` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body / Nav | `a` |
| `{type.subheading}` | 16px | 24px | normal | 400 | Section sub-text | `h3` |
| `{type.button.sm}` | 16px | 5px | normal | 500 | Inline links | `a` |

### Principles
1. **Mulish for Identity:** Use Mulish exclusively for headings to maintain the brand's approachable, rounded personality.
2. **Inter for Utility:** Use Inter for all functional UI, including navigation, buttons, and long-form body text.
3. **Weight as Hierarchy:** Bold weights (700-800) are reserved for interactive actions and critical emphasis.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 5 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 16px | 28 |
| `{space.lg}` | 20px | 6 |
| `{space.xl}` | 32px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Structural surfaces, cards, banners | 207 occurrences |
| `{radius.pill}` | 99px | Primary buttons, interactive badges | 3 occurrences |
| `{radius.soft}` | 90px | Content panels | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.outline}` | `rgba(0, 0, 0, 0.7) 0px 0px 0px 1px` | Button focus/hover states | Rounded Button component |

## Components

### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions (e.g., "Shop Now")
**Pages observed:** leapfrog.com
**Spec:** Background: #ffffff / Text: #ffffff / Border: #ffffff / Radius: 99px / Shadow: rgba(0,0,0,0.7) 0px 0px 0px 1px / Typography: Inter 700
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Category Surface
**Role:** Grouping icons and labels for "Shop by Category"
**Pages observed:** leapfrog.com
**Spec:** Background: #62a300 / Text: #222222 / Radius: 0px / Padding: 8px / Typography: Inter 16px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Content Band
**Role:** Full-width section grouping for Learning Resources
**Pages observed:** leapfrog.com
**Spec:** Background: #62a300 / Text: #222222 / Radius: 0px / Padding: 0px / Typography: Mulish 24px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Grid System | Modular bands |
| Section Padding | 32px (vertical) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; product grids become 1-up or 2-up |
| Desktop | 1440px | 4-up product grids; full horizontal navigation |

## Imagery & decoration
Leapfrog uses high-saturation product photography featuring children interacting with toys. Visuals are often placed within "bubbles" or rounded containers. Backgrounds are kept clean (white) to allow the colorful products to stand out.

## Do's
- Use **Mulish 600** for all primary section headers.
- Anchor large content groups with **#62a300** background bands.
- Apply **99px radius** to all primary call-to-action buttons.
- Maintain high contrast with **#222222** text on white or light green backgrounds.
- Use **Inter 400** for all legal and footer navigation.

## Don'ts
- **Wrong:** Using #15803d as a primary background color. **Right:** Use #62a300 for surfaces and #15803d for text/accents. **Reason:** #62a300 is the brand's signature surface green.
- **Wrong:** Applying rounded corners to product category cards. **Right:** Keep structural cards at 0px radius. **Reason:** Evidence shows structural surfaces are sharp-edged.
- **Wrong:** Using Mulish for body copy. **Right:** Use Inter for body and Mulish for headings only.
- **Wrong:** Using sub-brand colors (like specific age-group colors) for global navigation.

## Similar brands
- Fisher-Price
- VTech
- LEGO
- PBS Kids

## Quick start

```css
/* CSS Custom Properties */
:root {
  --lf-green-primary: #62a300;
  --lf-green-dark: #15803d;
  --lf-charcoal: #222222;
  --lf-white: #ffffff;
  --lf-radius-pill: 99px;
  --lf-font-heading: 'Mulish', sans-serif;
  --lf-font-body: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Leapfrog style: white background, Inter 700 font in white, 99px border radius, and a 1px charcoal outline shadow."
- "Design a section header using Mulish 600 at 36px, centered, in charcoal #222222."
- "Generate a content band with a #62a300 background and a 2-column grid for mobile."

## Known gaps
- Hover and Active states for navigation links were not explicitly captured in the token evidence.
- The specific hex codes for the "Shop by Age" multi-color buttons (pink, blue, purple) were not included in the primary foundation color list.

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