# Hover Design System

> A utilitarian canvas of forest greens and slate grays, where bold Inter headlines anchor a structured grid of domain management tools.

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

## TL;DR
Hover utilizes a high-contrast palette of deep forest green (#229e87) and dark slate (#2b333b) against a clean white background. The system is built on **Inter**, using heavy weights (700-900) for headlines to establish clear information hierarchy. Components are characterized by sharp or very slightly rounded corners (2px to 9px), avoiding the "pill" shapes common in modern SaaS. Layouts rely on generous vertical spacing (up to 120px) and a mix of full-width color blocks and bordered white cards to organize dense domain data and marketing content.

## Signature DNA
1. **The Forest Header & Footer** (Deep green #229e87 and slate #2b333b blocks bookend every page, creating a "containerized" feel for the white content area. Seen on all pages.)
2. **Heavyweight Inter Display** (Headlines consistently use Inter at 700 or 900 weight, often at 52px or 44px, providing a "no-nonsense" utility aesthetic. Seen on Homepage and About.)
3. **Low-Radius Geometry** (Buttons and cards use minimal rounding (2px or 9px) or sharp 0px corners, signaling precision and stability rather than playfulness. Seen on Pricing and Homepage.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 71 | 0.8 | computed_style |
| `{color.ink.primary}` | `#2b333b` | Primary text, footer background, and dark button fills | 67 | 0.8 | computed_style |
| `{color.ink.heading}` | `#000000` | High-contrast display text and search icons | 108 | 0.8 | computed_style |
| `{color.ink.subtle}` | `#4d4c5c` | Secondary body text and descriptive paragraphs | 42 | 0.8 | computed_style |
| `{color.border.default}` | `#ddddde` | 2px card borders and table dividers | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.brand.primary}` | `#229e87` | Hero backgrounds, primary links, and brand accents | 43 | 0.8 | computed_style |
| `{color.brand.soft}` | `#cee8e2` | Secondary button backgrounds and soft surface fills | 5 | 0.6 | computed_style |
| `{color.brand.dark}` | `#2e836f` | Hover states for primary brand elements | 5 | 0.6 | computed_style |
| `{color.accent.sale}` | `#f26522` | Pricing "on sale" text indicators | 8 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Inter** | 300, 400, 500, 600, 700, 900 | All headlines, UI labels, and primary body | Inter (Google Fonts) | SIL Open Font |
| **Arial** | 400 | Search inputs and legacy form elements | Arial (System) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 52px | 62.4px | normal | 700 | Main Hero Heading | `h2.mainheading` |
| `{type.display.md}` | 44px | 52.8px | normal | 700 | Section Headers | `h2.h3` |
| `{type.heading.md}` | 28px | 33.6px | normal | 700 | Subsection Titles | `h2.h6` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 700 | Feature Titles | `h3` |
| `{type.heading.xs}` | 20px | 24px | 2px | 900 | All-caps labels | `h3` |
| `{type.body.lg}` | 20px | 32px | normal | 400 | Lead Paragraphs | `p.para_large` |
| `{type.body.md}` | 18px | 28.8px | normal | 400 | Default Body Text | `p` |
| `{type.body.sm}` | 16px | 25.6px | normal | 400 | Secondary Body | `p` |
| `{type.caption}` | 12px | 12px | normal | 600 | Small UI labels | `label.bulk` |

### Principles
1. **Weight as Hierarchy**: Use 700+ weight for all structural headings; 400 is reserved strictly for long-form prose.
2. **Generous Leading**: Body text maintains a 1.6x line-height ratio (18px/28.8px) for readability.
3. **Tracking for Impact**: Small 20px headers use 2px letter spacing when set in 900 weight to maintain legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 19 |
| `{space.sm}` | 12px | 11 |
| `{space.md}` | 20px | 21 |
| `{space.lg}` | 30px | 18 |
| `{space.xl}` | 48px | 14 |
| `{space.section}` | 120px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Primary Buttons, Nav, Footer | observed on 329 elements |
| `{radius.sm}` | 2px | Rounded Buttons | `a.button.link_with_arrow` |
| `{radius.md}` | 4px | Feature Cards | `Card` component |
| `{radius.lg}` | 9px | Product Info Cards | `Card` component |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary site actions (Sign In, Search)
**Pages observed:** Homepage, About
**Spec:** Background: `#2b333b` | Text: `#ffffff` | Radius: `0px` | Typography: `20px/500`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Text Input
**Role:** Domain search bar
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#000000` | Border: `0px` | Padding: `0px 72px 0px 16px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Secondary CTAs and "Learn More" links
**Pages observed:** Homepage, About
**Spec:** Background: `#e7e8eb` | Text: `#2b333b` | Border: `1px solid #2b333b` | Radius: `2px` | Padding: `12px 16px`
**States observed:** Default | Hover: Not captured

#### Card
**Role:** Product feature highlights
**Pages observed:** Homepage, About
**Spec:** Background: `#f0f9f5` | Text: `#000000` | Radius: `9px` | Padding: `48px 48px 100px`
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** TLD pricing display
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: `2px solid #ddddde` | Radius: `4px` | Padding: `28px`
**States observed:** Default

#### Surface Block
**Role:** Full-width section background
**Pages observed:** Homepage, About
**Spec:** Background: `#229e87` | Text: `#ffffff` | Radius: `0px` | Padding: `20px 0px`
**States observed:** Default

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

## Do's
- Use `#2b333b` for all primary footer and navigation surfaces.
- Apply `Inter` weight 700 for any text above 24px.
- Maintain `120px` vertical spacing between major marketing sections.
- Use `#f26522` exclusively for "Sale" or "Discount" price markers.
- Ensure all primary buttons have a `0px` border radius.

## Don'ts
- **Wrong:** Using `#229e87` (Forest Green) for primary body text. 
  **Right:** Use `#2b333b` or `#4d4c5c`. 
  **Reason:** Accessibility; green text on white fails contrast for small body sizes.
- **Wrong:** Applying "Pill" (9999px) radius to buttons.
  **Reason:** Hover's brand identity is built on sharp and low-radius geometry.
- **Wrong:** Mixing Arial into marketing headlines.
  **Reason:** Arial is restricted to functional input elements only.

## Similar brands
- Namecheap
- Google Domains (Legacy)
- DigitalOcean
- Linode

## Quick start

```css
/* CSS Custom Properties */
:root {
  --hover-green: #229e87;
  --hover-slate: #2b333b;
  --hover-ink: #000000;
  --hover-body: #4d4c5c;
  --hover-canvas: #ffffff;
  --hover-radius-sm: 2px;
  --hover-radius-md: 9px;
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using Hover's `#f0f9f5` background, a `9px` border radius, and a `24px` Inter Bold headline."
- "Generate a primary CTA button with a `#2b333b` background, white text, and a sharp `0px` border radius."
- "Design a pricing table row using `Inter` 400 for prices and `#f26522` for the 'Sale' badge."

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