# Legalzoom Design System

> A high-contrast legal canvas pairing authoritative serif typography with deep forest-teal surfaces and vibrant orange action points.

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

## TL;DR
Legalzoom utilizes a "monochrome" parent system that is actually anchored by a high-contrast palette of deep teal (`#193138`), pure white (`#ffffff`), and a signature brand orange (`#f45a27`). The typography is a sophisticated pairing of **Quincy CF** for display headers and **Work Sans** for functional UI and body text. Layouts rely on generous vertical spacing (up to 98px) and a mix of sharp and soft-radius (8px to 16px) containers. The system balances "professional authority" through its dark surfaces and serif type with "modern accessibility" via high-visibility orange CTAs and clean sans-serif body copy.

## Signature DNA
1. **The Deep Teal Anchor:** Large-scale sections and cards use `--color-accent2-700` (#193138) to create a sense of legal gravity, often paired with white text for high legibility.
2. **Quincy CF Display:** The use of a serif typeface for primary value propositions (up to 60px) signals traditional legal heritage, while the 128px Work Sans display numbers provide a modern, data-driven counterpoint.
3. **The "Action Orange" CTA:** Primary conversion points are strictly reserved for `--color-brand-500` (#f45a27), creating a singular focal point against both light and dark canvases.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-neutral-0` | `#ffffff` | Page background, card surface, primary text on dark | 157 | 1.0 | CSS Variable |
| `--color-neutral-800` | `#252424` | Primary text, scrim, dark borders | 116 | 1.0 | CSS Variable |
| `--color-neutral-600` | `#696764` | Secondary text, neutral borders | 54 | 1.0 | CSS Variable |
| `--color-neutral-50` | `#f5f2ee` | Subtle section backgrounds (Surface 3) | 8 | 1.0 | CSS Variable |
| `--color-neutral-900` | `#0c0c0c` | Deep black text emphasis | 6 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-accent2-700` | `#193138` | Primary dark surface (Deep Teal) | 10 | 1.0 | CSS Variable |
| `--color-brand-500` | `#f45a27` | Primary CTA background, brand accent | 5 | 1.0 | CSS Variable |
| `--color-accent2-400` | `#2a525e` | Borders on dark teal surfaces | 8 | 1.0 | CSS Variable |
| `--color-accent1-400` | `#ffd470` | Decorative guarantee card (decorative_only) | 1 | 1.0 | CSS Variable |
| `--color-brand-800` | `#651d05` | Deep orange/brown surface (decorative_only) | 1 | 1.0 | CSS Variable |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `--color-error-500` | `#e52554` | Error states / critical alerts |
| `--color-success-500` | `#11aa5e` | Success states / confirmations |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Quincy CF | 400, 500 | Display / Editorial Headings | Crimson Pro | Licensed |
| Work Sans | 400, 500, 600 | UI / Body / Functional Headings | Work Sans (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{display.mega}` | 128px | 128px | -2px | 400 | Large numeric stats | `span.inline-flex.h-[1em]` |
| `{display.h1}` | 60px | 70px | normal | 400 | Hero headlines (Quincy) | `h1.builder-block` |
| `{display.h2}` | 44px | 52px | normal | 400 | Section headlines (Quincy) | `h2.builder-block` |
| `{heading.h3}` | 32px | 40px | -0.8px | 600 | Feature titles (Work Sans) | `h3.builder-block` |
| `{heading.sm}` | 24px | 28px | -0.144px | 600 | Card titles | `h3.builder-block` |
| `{body.lg}` | 18px | 28px | normal | 600 | Navigation / Lead text | `a.my-2.block` |
| `{body.md}` | 16px | 24px | normal | 400 | Default running text | `article` |
| `{body.sm}` | 14px | 20px | normal | 400 | Captions / Footer links | `p.h-7.w-full` |
| `{caption}` | 12px | 16px | -0.3px | 600 | Small labels / Badges | `a.flex.h-6` |

### Principles
1. **Serif for Narrative:** Use Quincy CF for storytelling and value propositions to establish trust.
2. **Sans for Utility:** Use Work Sans for all interactive elements, instructions, and data.
3. **Tight Display Tracking:** Large display numbers (128px) must use -2px letter spacing to maintain visual density.
4. **High Contrast Ratios:** Text on dark teal surfaces must be white (#ffffff) to ensure accessibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 38 |
| `{space.sm}` | 12px | 50 |
| `{space.md}` | 16px | 11 |
| `{space.lg}` | 24px | 22 |
| `{space.xl}` | 48px | 6 |
| `{space.section}` | 98px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default section containers | 368 occurrences |
| `{radius.sm}` | 4px | Input fields, small cards | 55 occurrences |
| `{radius.md}` | 8px | Feature cards, secondary buttons | 14 occurrences |
| `{radius.lg}` | 12px | Profile cards, elevated UI | 9 occurrences |
| `{radius.xl}` | 16px | Main content cards | 8 occurrences |
| `{radius.pill}` | 9999px | Primary CTA buttons | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | 0px 1px 8px 0px rgba(37, 36, 36, 0.04) | Floating nav / subtle cards | 7 occurrences |
| `{shadow.elevated}` | 0px 4px 12px 0px rgba(37, 36, 36, 0.08) | Hovered cards / pricing tiers | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** legalzoom.com
**Spec:** Background: `#f45a27` | Text: `#ffffff` | Radius: `9999px` | Typography: `Work Sans 600`
**States observed:** Default | Hover: Captured (darker orange)

#### Neutral Card
**Role:** Content grouping on light canvas
**Pages observed:** legalzoom.com
**Spec:** Background: `#ffffff` | Border: `1px #dcdad6` | Radius: `12px` | Padding: `20px 20px 32px`
**States observed:** Default | Hover: Captured (shadow elevation)

### Tier 2: Patterns

#### Dark Feature Card
**Role:** High-impact service highlights
**Pages observed:** legalzoom.com
**Spec:** Background: `#193138` | Text: `#ffffff` | Border: `1px #2a525e` | Radius: `12px`
**States observed:** Default | Hover: Not captured

#### Guarantee Block
**Role:** Trust signaling
**Pages observed:** legalzoom.com
**Spec:** Background: `#ffd470` | Text: `#252424` | Radius: `8px` | Padding: `16px 24px`
**States observed:** Default

### Tier 3: Surface-specific

#### Global Navigation
**Role:** Site-wide header
**Pages observed:** legalzoom.com
**Spec:** Background: `#ffffff` | Height: `80px` | Shadow: `{shadow.subtle}`
**States observed:** Default

#### Footer
**Role:** Directory and legal disclosure
**Pages observed:** legalzoom.com
**Spec:** Background: `#f5f2ee` | Text: `#696764` | Border-top: `1px #e9e6e2`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1280px |
| Section Padding | 98px (Vertical) |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Stacked cards, 100% width CTAs, hidden desktop nav |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), horizontal nav |

## Imagery & decoration
- **Photography:** Uses warm, human-centric photography of small business owners and families.
- **Iconography:** Thin-stroke (1px) icons contained within circles or squares on dark surfaces.
- **Avoids:** Heavy drop shadows, neon gradients, or overly aggressive "tech" aesthetics.

## Do's
- Use **Quincy CF** for all primary section headers to maintain authority.
- Reserve **#f45a27** (Action Orange) for conversion-critical buttons only.
- Apply **#193138** (Deep Teal) for full-width background bands to break up long white pages.
- Ensure all body text uses **Work Sans** at 16px minimum for accessibility.
- Use **98px** vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using #f45a27 for non-interactive decorative elements. **Right:** Use #ffd470 for decorative accents. **Reason:** Orange is the "Action" signal; using it elsewhere dilutes CTA visibility.
- **Wrong:** Setting display headers in Work Sans. **Right:** Use Quincy CF. **Reason:** The serif typeface is a core brand identifier for trust.
- **Wrong:** Using pure black #000000 for body text. **Right:** Use #252424. **Reason:** The softer neutral black reduces eye strain on white backgrounds.

## Similar brands
- Rocket Lawyer
- LegalShield
- ZenBusiness

## Quick start

### CSS Custom Properties
```css
:root {
  --color-brand-orange: #f45a27;
  --color-legal-teal: #193138;
  --color-neutral-white: #ffffff;
  --color-neutral-ink: #252424;
  --font-display: 'Quincy CF', serif;
  --font-ui: 'Work Sans', sans-serif;
  --radius-card: 12px;
  --radius-pill: 9999px;
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated run.
- Form validation error states (beyond the color token) were not observed in the primary flow.

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