# Hover.to Design System

> High-contrast monochrome precision anchored by Diatype Bold headlines and ultra-radius pill geometry.

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

## TL;DR
Hover.to utilizes a stark, achromatic palette of deep ink (#100101) and pure white (#ffffff) to convey architectural reliability. The system is defined by **Diatype**, a grotesque sans-serif that shifts from heavy 700-weight display sizes (up to 100px) to functional 400-weight body text. Visual hierarchy is maintained through massive scale shifts and generous 96px section spacing. Component geometry is extremely soft, favoring 16px card radii and 9999px pill buttons, creating a "smooth" interface that contrasts with the sharp, high-contrast typography.

## Signature DNA
1. **Aggressive Typographic Scale** (Diatype Bold is pushed to 72px and 100px for hero statements, using tight -1.44px letter spacing to maintain density at scale. Observed on Homepage and Pricing.)
2. **The "Infinite Pill" CTA** (Primary actions are consistently rendered as #100101 pills with white text, using a 9999px radius that ignores standard button height ratios. Observed on all analyzed pages.)
3. **Achromatic Layering** (Depth is created through subtle shifts between #ffffff, #f4f4f4, and #e6e6e6 rather than color, keeping the focus on photographic "real material" content. Observed on Pricing and About.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.ink}` | `#100101` | Primary text, primary button background, dark section surfaces | 486 | 1 | `--hover-colors-textPrimary` |
| `{colors.canvas}` | `#ffffff` | Primary page background, button text, card surfaces | 67 | 1 | `--hover-colors-backgroundPrimary` |
| `{colors.surface-soft}` | `#f4f4f4` | Secondary section backgrounds, glass effects | 46 | 1 | `--hover-colors-backgroundSecondary` |
| `{colors.divider}` | `#e6e6e6` | Card outlines, dividers, neutral card backgrounds | 17 | 1 | `--hover-colors-dividerPrimary` |
| `{colors.ink-muted}` | `#808080` | Disabled text, placeholder states | 4 | 1 | `--hover-colors-textDisabled` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.link-blue}` | `#0000ee` | Legacy text links (decorative/secondary) | 6 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.success}` | `#22783a` | Success states, "Pro" plan accents |
| `{colors.error}` | `#c6284b` | Error borders and invalid states |
| `{colors.warning}` | `#fdb70a` | Warning halos and focus states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Diatype | 400, 700 | Primary Display & Body | Inter | Licensed |
| Arial | 400, 700 | System Fallback / UI | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-max}` | 100px | 100px | -1.44px | 700 | Hero Display | `p.chakra-text.css-h6bra1` |
| `{type.display-xl}` | 72px | 72px | -1.44px | 700 | Section Headers | `h2.chakra-heading.css-paqz36` |
| `{type.display-lg}` | 48px | 48px | -0.96px | 700 | Page Titles | `h1.chakra-heading.css-r6e00n` |
| `{type.heading-md}` | 32px | 32px | -0.64px | 700 | Sub-section Heads | `h2.chakra-heading.css-136ue52` |
| `{type.heading-sm}` | 24px | 24px | -0.48px | 700 | Card Titles | `h4.chakra-heading.css-53ensc` |
| `{type.body-lg}` | 16px | 20px | normal | 700 | Emphasized Body | `p.chakra-text.css-b6z6y6` |
| `{type.body-md}` | 16px | 20px | normal | 400 | Standard Body | `p.chakra-text.css-1rcymt` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Footer / Captions | `p.chakra-text.css-9j7f5a` |

### Principles
1. **Bold by Default**: All headings from 24px to 100px use weight 700.
2. **Tight Display Tracking**: Letter spacing becomes increasingly negative as font size increases (-0.48px at 24px to -1.44px at 100px).
3. **Fixed Line Height**: Display sizes use 1:1 size-to-line-height ratios (e.g., 72px/72px) for tight vertical stacking.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 33 |
| `{space.sm}` | 12px | 33 |
| `{space.md}` | 16px | 36 |
| `{space.lg}` | 24px | 28 |
| `{space.section}` | 96px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 356 occurrences |
| `{radius.md}` | 10px | Feature cards | 45 occurrences |
| `{radius.lg}` | 16px | Pricing cards | 40 occurrences |
| `{radius.pill}` | 9999px | CTA Buttons | 20 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 15px 44px 0px` | Floating Pricing Cards | Pricing Page |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Primary site-wide call to action.
**Pages observed:** Homepage, Pricing, About
**Spec:** 
- Background: `{colors.ink}` (#100101)
- Text: `{colors.canvas}` (#ffffff)
- Radius: `{radius.pill}` (9999px)
- Padding: 0px 24px
- Typography: `{type.body-sm}` (14px / 700)
**States observed:** Default | Hover: captured

#### Pill Button (Secondary)
**Role:** Alternative actions or "Try for free" variants.
**Pages observed:** Homepage, About
**Spec:** 
- Background: `{colors.canvas}` (#ffffff)
- Text: `{colors.ink}` (#100101)
- Border: 1px solid `{colors.divider}` (#e6e6e6)
- Radius: `{radius.pill}` (9999px)

### Tier 2: Patterns

#### Feature Card
**Role:** Showcasing product steps or benefits.
**Pages observed:** Homepage, About
**Spec:** 
- Background: `{colors.surface-soft}` (#f4f4f4)
- Radius: `{radius.md}` (10px)
- Text: `{colors.ink}` (#100101)
- Typography: `{type.body-md}` (16px)

#### Pricing Card
**Role:** Plan selection tiers.
**Pages observed:** Pricing
**Spec:** 
- Background: `{colors.canvas}` (#ffffff)
- Radius: `{radius.lg}` (16px)
- Shadow: `{shadow.card}`
- Padding: 24px 16px

### Tier 3: Surface-specific

#### Dark Section Card
**Role:** High-impact inverted content blocks.
**Pages observed:** Homepage, About
**Spec:** 
- Background: `{colors.ink}` (#100101)
- Text: `{colors.canvas}` (#ffffff)
- Padding: 96px 0px (Sectional)

#### Navigation Bar
**Role:** Global header.
**Pages observed:** All
**Spec:** 
- Background: `{colors.canvas}` (#ffffff)
- Height: 64px (approx)
- Border-bottom: 1px solid `{colors.divider}` (#e6e6e6)

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

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales down; Cards stack 1-up. |
| Desktop | 1440px | Full horizontal navigation; Multi-column card grids (3-up on Pricing). |

## Do's
- Use `#100101` for all primary text to ensure 21:1 contrast.
- Apply negative letter-spacing to any Diatype text above 24px.
- Use `{radius.pill}` for all interactive buttons.
- Maintain `{space.section}` (96px) between major content blocks.
- Invert the canvas to `#100101` for high-impact "For Insurance" or "Hero" sections.

## Don'ts
- Do not use `#000000` for text; use the brand ink `{colors.ink}` (#100101).
- Do not use sub-brand colors (like success green) for parent-level primary buttons.
- Do not use sharp corners (0px) for interactive elements; only for layout containers.
- Do not exceed weight 400 for long-form body copy.

## Quick start

### CSS Variables
```css
:root {
  --hover-ink: #100101;
  --hover-canvas: #ffffff;
  --hover-surface-soft: #f4f4f4;
  --hover-radius-pill: 9999px;
  --hover-radius-card: 16px;
  --hover-space-section: 96px;
  --hover-font-display: "Diatype", sans-serif;
}
```

## Agent prompt examples
- "Create a pricing card using #ffffff background, a 16px border radius, and a primary pill button using #100101."
- "Generate a hero section with a 72px Diatype Bold headline in #100101 with -1.44px letter spacing."
- "Design a secondary button as a white pill with a 1px #e6e6e6 border and 14px bold text."

## Known gaps
- Hover states for secondary buttons were not explicitly tokenized in the source.
- Mobile-specific spacing tokens (e.g., reduced section padding) were not captured in the CSS variable export.
- Specific transition durations for pill button hover effects were not captured.

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