# Legalsimpli Design System

> High-contrast utility for legal documentation, defined by deep obsidian surfaces and orange functional iconography.

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

## TL;DR
Legalsimpli operates on a high-contrast monochrome foundation, utilizing a pure white canvas (#ffffff) and obsidian primary elements (#000000). The brand's visual "voltage" is concentrated in its functional iconography, which uses a vibrant orange to denote document types and actions. Layouts are structured around generous vertical breathing room and a strict adherence to rounded-pill geometry for all primary calls-to-action. Typography is clean and functional, prioritizing legibility for complex legal templates over decorative flair.

## Signature DNA
1. **Obsidian Anchors** (The use of #000000 for primary CTAs and footer backgrounds creates a heavy, authoritative visual weight against the white canvas.)
2. **Orange Utility Icons** (Thin-stroke orange icons serve as the primary navigational signposts for document categories like "Affidavit" or "LLC Operating Agreement".)
3. **Pill-Shape Hierarchy** (A consistent use of fully rounded pill shapes for buttons and search inputs to soften the high-contrast professional aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Primary page background | High | 100% | Resolved background |
| `{colors.obsidian}` | `#000000` | Primary text, CTA backgrounds, Footer | High | 100% | Resolved primary |
| `{colors.surface-soft}` | `#f9f9f9` | Card backgrounds, testimonial blocks | Medium | 90% | Screenshot analysis |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.accent-orange}` | `#ff7a00` | Functional icons, brand mark accent | Medium | 90% | Screenshot analysis |
| `{colors.focus-ring}` | `#3b82f6` | Interactive focus states | Low | 100% | `--tw-ring-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|------|------|
| Sans-Serif (Inter/System) | 400, 500, 700 | All copy, UI, and Display | Inter | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display-xl}` | 48px | 1.1 | -0.02em | 700 | Hero headline | `h1` |
| `{typography.display-lg}` | 36px | 1.2 | normal | 700 | Section heads | `h2` |
| `{typography.title-md}` | 24px | 1.3 | normal | 600 | Card titles | `h3` |
| `{typography.body-lg}` | 18px | 1.5 | normal | 400 | Hero subtext | `p.lead` |
| `{typography.body-md}` | 16px | 1.5 | normal | 400 | Default body | `p` |
| `{typography.button}` | 14px | 1.0 | 0.05em | 600 | CTA labels | `button` |
| `{typography.label-sm}` | 13px | 1.4 | normal | 500 | Nav links | `nav a` |
| `{typography.caption}` | 12px | 1.4 | normal | 400 | Footer links | `footer a` |

### Principles
1. **Bold Headers:** All major section headings use a heavy weight (700) to establish clear information hierarchy.
2. **Tight Display:** Large headlines use slightly negative letter-spacing to maintain visual cohesion at scale.
3. **High Contrast:** Text is almost exclusively obsidian (#000000) on white or light gray to ensure maximum legibility.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.sm}` | 12px | Icon-to-text gaps |
| `{spacing.md}` | 24px | Card internal padding |
| `{spacing.lg}` | 48px | Component grouping |
| `{spacing.xl}` | 80px | Section vertical padding |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.pill}` | 9999px | Primary buttons, Search input | Hero CTA |
| `{radius.md}` | 8px | Feature cards, Testimonial blocks | Why trust us cards |
| `{radius.sm}` | 4px | Small UI elements | Form inputs |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | 0px | Default state | Page sections |
| Raised | 0 4px 12px rgba(0,0,0,0.05) | Hovered cards | Document type cards |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** Home, Mobile
**Spec:** Background: `{colors.obsidian}` (#000000) / Text: `{colors.canvas}` (#ffffff) / Radius: `{radius.pill}` / Typography: `{typography.button}`
**States observed:** Default | Hover: captured (slight opacity shift)

#### Search Input
**Role:** Document discovery
**Pages observed:** Home
**Spec:** Background: `#ffffff` / Border: 1px solid `#e5e5e5` / Radius: `{radius.pill}` / Icon: Orange magnifying glass

### Tier 2: Patterns
#### Document Type Card
**Role:** Category navigation
**Pages observed:** Home
**Spec:** Background: `#ffffff` / Border: 1px solid `#f0f0f0` / Icon: `{colors.accent-orange}` / Text: `{colors.obsidian}`

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Home
**Spec:** Text: `{colors.obsidian}` / Border-bottom: 1px solid `#eeeeee` / Icon: Chevron down

### Tier 3: Surface-specific
#### Global Footer
**Role:** Navigation and trust signals
**Pages observed:** Home
**Spec:** Background: `{colors.obsidian}` (#000000) / Text: `#ffffff` / Typography: `{typography.caption}`

#### Trust Pilot / Review Block
**Role:** Social proof
**Pages observed:** Home
**Spec:** Background: `{colors.surface-soft}` (#f9f9f9) / Stars: Orange (#ff7a00)

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 96px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | Navigation collapses to hamburger; Hero text centers; 1-column grids |
| Desktop | >1024px | Horizontal nav; Multi-column feature grids |

## Imagery & decoration
- **Photography:** High-brightness, professional office environments with soft focus backgrounds.
- **Iconography:** Linear, thin-stroke orange (#ff7a00) icons.
- **Avoid:** Heavy drop shadows, gradients, or non-functional decorative flourishes.

## Do's
- Use `{colors.obsidian}` for all primary action buttons.
- Maintain `{radius.pill}` for all top-level interactive containers.
- Use orange (#ff7a00) exclusively for icons and brand accents.
- Ensure 80px+ vertical padding between major homepage sections.
- Keep typography weights at 700 for all headlines.

## Don'ts
- **Wrong:** Using a sub-brand blue for a primary button. **Right:** Use obsidian (#000000). **Reason:** Parent brand identity is monochrome-first.
- Do not use square corners for primary CTAs.
- Do not use orange for body text or headlines.
- Do not use heavy borders; prefer subtle hairlines or soft background shifts.

## Similar brands
- LegalZoom
- Rocket Lawyer
- DocuSign
- HelloSign

## Quick start

```css
/* CSS Variables */
:root {
  --color-obsidian: #000000;
  --color-canvas: #ffffff;
  --color-accent-orange: #ff7a00;
  --radius-pill: 9999px;
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a primary button using Legalsimpli's obsidian background, white text, and pill-shaped radius."
- "Design a document category card with a centered orange icon and bold obsidian title."
- "Generate a footer section with an obsidian background and small white caption-style links."

## Known gaps
- Specific hover state hex values for orange icons were not captured.
- Exact font family name (beyond generic sans-serif) was not declared in available tokens.

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