# Zettahost Design System

> High-contrast utility hosting defined by deep navy anchors, vibrant grass-green actions, and a strict reliance on Open Sans for technical clarity.

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

## TL;DR
Zettahost utilizes a high-contrast monochrome base (#000000 on #ffffff) punctuated by a functional "Grass Green" (#59a425) for primary conversions and a "Deep Sea" navy (#032f47) for structural framing. The system is built on **Open Sans**, using heavy weights (600-700) for large display prices and section headers to establish a "no-nonsense" utility aesthetic. Layouts follow a strict vertical rhythm with generous 54px-62px section padding, while interactive elements use a consistent 5px to 10px corner radius to soften the technical density of hosting spec lists.

## Signature DNA
1. **The Green Conversion Anchor** (#59a425 is used exclusively for "Start Now", "Search", and "Order" actions, creating a singular color-path for user success across all pages).
2. **Navy Framing** (Structural borders and secondary buttons use #032f47 to provide a professional, "enterprise-lite" weight that black alone lacks).
3. **Price-First Typography** (Open Sans at 45px/700 weight is the largest element in pricing tiers, prioritizing value over marketing prose).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and card surfaces | 39 | 1.0 | `--wp--preset--color--white` |
| `{color.ink}` | `#111111` | Primary body text and footer links | 182 | 0.8 | Computed Style |
| `{color.ink-pure}` | `#000000` | High-emphasis text and shadows | 19 | 1.0 | `--wp--preset--color--black` |
| `{color.border-muted}` | `#bbbbbb` | Default input and divider lines | 13 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#59a425` | Primary CTA backgrounds and success states | 20 | 0.8 | Computed Style |
| `{color.secondary}` | `#032f47` | Secondary button borders and heading text | 34 | 0.8 | Computed Style |
| `{color.accent-blue}` | `#0e6caa` | Informational surfaces and link hovers | 18 | 0.8 | Computed Style |
| `{color.error}` | `#ff0000` | Alert text (decorative_only) | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Open Sans** | 300, 400, 500, 600, 700, 800 | Primary Display and UI | N/A (Google Font) | Apache 2.0 |
| **Rubik** | 500 | Secondary headings | N/A (Google Font) | OFL |
| **ETmodules** | 400 | Icon font | FontAwesome | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 45px | 40px | normal | 700 | Pricing values | `span.singlebox-price` |
| `{type.display-lg}` | 40px | 56px | normal | 700 | Section headers | `h2` |
| `{type.heading-md}` | 28px | 25.5px | normal | 500 | Feature titles | `span` (Rubik) |
| `{type.heading-sm}` | 24px | 40.8px | normal | 500 | Large Ghost Buttons | `a.et_pb_button.blBrdBtn` |
| `{type.body-lg}` | 18px | 18px | normal | 400 | Module headers | `h4.et_pb_module_header` |
| `{type.body-md}` | 16px | 24px | normal | 500 | Footer links | `a.footer-links` |
| `{type.body-sm}` | 15px | 25.5px | normal | 500 | Running text | `p` |
| `{type.caption}` | 12px | 14px | normal | 500 | Pricing periods | `span.singlebox-period` |

### Principles
1. **Bold Price Hierarchy:** Prices are always the largest and heaviest elements on the page (45px/700).
2. **Navy for Information:** Use #032f47 for subheadings to distinguish them from #111111 body text.
3. **Tight Display Leading:** Large headers use line-heights roughly equal to font-size (e.g., 45px/40px) to maintain visual density.

## Spacing
**Base unit:** 10px (derived from common padding/radius clusters)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 5 |
| `{space.sm}` | 10px | 53 |
| `{space.md}` | 20px | 22 |
| `{space.lg}` | 40px | 12 |
| `{space.section}` | 54px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.input}` | 4px | Form fields | `input#sld` |
| `{radius.button}` | 5px | Primary/Secondary CTAs | `button#rchr-domain-search` |
| `{radius.card}` | 10px | Feature cards | Pricing tier containers |
| `{radius.card-lg}` | 12px | Featured pricing | Zetta Personal card |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Standard sections | Default page bands |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.02) 2px 2px 2px 2px` | Feature cards | Service grid cards |
| `{shadow.raised}` | `rgba(0, 0, 0, 0.3) 0px 1px 5px 0px` | Hover/Active cards | Pricing tier focus |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (Start Now, Search)
**Pages observed:** https://zettahost.com
**Spec:** Background: `#59a425` | Text: `#ffffff` | Radius: `5px` | Padding: `5.1px 17px` | Typography: `17px/500`
**States observed:** Default | Hover: captured | Active: captured

#### Ghost Button (Navy)
**Role:** Secondary actions and "Learn More"
**Pages observed:** https://zettahost.com
**Spec:** Background: `transparent` | Text: `#032f47` | Border: `2px solid #032f47` | Radius: `10px` | Padding: `7.2px 24px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying hosting services
**Pages observed:** https://zettahost.com
**Spec:** Background: `transparent` | Border: `1px solid #032f47` | Radius: `10px` | Padding: `20px` | Shadow: `{shadow.subtle}`
**States observed:** Default

#### Pricing Tier
**Role:** Plan comparison
**Pages observed:** https://zettahost.com
**Spec:** Background: `#ffffff` | Border: `2px solid #032f47` | Radius: `12px` | Padding: `0px` (internal content padding varies)
**States observed:** Default | Recommended: uses `#59a425` badge

### Tier 3: Surface-specific

#### Domain Search Bar
**Role:** Homepage utility
**Pages observed:** https://zettahost.com
**Spec:** Background: `#ffffff` | Border: `1px solid #bbbbbb` | Radius: `4px` | Height: `40px`
**States observed:** Default

#### Footer Navigation
**Role:** Site-wide directory
**Pages observed:** https://zettahost.com
**Spec:** Background: `#ffffff` | Text: `#111111` | Font-size: `16px` | Line-height: `24px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 54px - 62px |
| Column Gap | 30px |

## Do's
- Use `#59a425` for the final action in any user flow.
- Pair Open Sans 700 with a line-height smaller than the font-size for pricing.
- Apply `{radius.card}` (10px) to all container elements holding feature lists.
- Use `#032f47` for borders on secondary interactive elements.
- Ensure all body text uses `#111111` for optimal contrast on white.

## Don'ts
- **Wrong:** Using `#0e6caa` (Accent Blue) for primary "Order" buttons.
  **Right:** Use `#59a425` (Primary Green).
  **Reason:** Blue is reserved for informational links and secondary accents; Green is the conversion signal.
- **Wrong:** Setting display headers in weights below 600.
  **Right:** Use Open Sans 700 or 800.
  **Reason:** The brand relies on heavy typographic weight to establish authority.
- Do not use pure black `#000000` for long-form body text; stick to `#111111`.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #59a425;
  --color-secondary: #032f47;
  --color-ink: #111111;
  --color-canvas: #ffffff;
  --font-main: 'Open Sans', sans-serif;
  --radius-button: 5px;
  --radius-card: 10px;
  --shadow-subtle: 2px 2px 2px 2px rgba(0, 0, 0, 0.02);
}
```

## Agent prompt examples
- "Create a pricing card using a 12px border radius, a 2px navy (#032f47) border, and a primary green (#59a425) button."
- "Generate a hero section with Open Sans 700 headlines at 40px and a #59a425 CTA button."
- "Design a feature grid where each item has a 10px border radius and a subtle 2px blur shadow."

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