# Hostbooks Design System

> High-contrast obsidian canvas punctuated by electric cyan-to-magenta gradients and structured Raleway typography.

**Source:** [https://hostbooks.com](https://hostbooks.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Hostbooks employs a "Dark Mode by Default" aesthetic, utilizing a deep black foundation (`#060606`) to make its vibrant functional elements pop. The system relies heavily on the **Raleway** typeface for its structural hierarchy, often paired with wide letter-spacing (up to 4.8px) for display moments. Brand "voltage" is delivered through linear gradients that transition from a primary blue (`#0071b2`) to a secondary magenta (`#f56bfa`), primarily used in high-impact CTA buttons and hero text. Layouts are spacious, adhering to an 8px base unit with significant section breathing room (up to 128px).

## Signature DNA
1. **The "Zeno" Gradient** (A consistent linear-gradient transition from cyan/blue to magenta used on primary CTAs and "HB Zeno" branding across all pages).
2. **Obsidian Depth** (The use of `#060606` as the primary background instead of pure black, paired with `#131313` for elevated surface sections to create subtle containment).
3. **Spaced Raleway Display** (Large 96px display type with +4.8px letter-spacing, creating a technical, "architectural" feel for enterprise headers).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-background` | `#060606` | Primary page background | 114 | 1.0 | Computed style |
| `--color-white` | `#ffffff` | Primary text and button borders | 225 | 1.0 | CSS Variable |
| `--color-surface-elevated` | `#131313` | Section backgrounds (Integration grid) | 18 | 0.8 | Computed style |
| `--color-gray-900` | `#222222` | Card borders and dividers | 3 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-text-secondary` | `#140f29` | Deep bluish-gray text emphasis | 6 | 1.0 | CSS Variable |
| `--color-bluish-gray-300`| `#625e70` | Muted secondary body text | 6 | 1.0 | CSS Variable |
| `--color-primary` | `#0071b2` | Gradient start / Primary brand blue | Declared | 1.0 | CSS Variable |
| `--color-secondary` | `#f56bfa` | Gradient end / Brand magenta | Declared | 1.0 | CSS Variable |
| `--color-bluish-gray-100`| `#b6b5bd` | Muted labels and icons | 21 | 1.0 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Raleway | 400, 500, 600, 700 | All headings, buttons, and navigation | Raleway (Google Fonts) | SIL Open Font |
| Montserrat | 600 | Hero display text | Montserrat (Google Fonts) | SIL Open Font |
| ui-sans-serif | 400 | System fallback / UI utility | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 96px | 96px | 4.8px | 700 | Hero Display | `span` |
| `{type.display.lg}` | 80px | 96px | -0.4px | 600 | Section Hero | `p.font-raleway.font-semibold` |
| `{type.display.md}` | 60px | 60px | normal | 500 | Section Header | `h2.antialiased.text-white` |
| `{type.heading.lg}` | 36px | 40px | normal | 600 | Feature Title | `span.bg-gradient-to-b` |
| `{type.heading.md}` | 30px | 36px | normal | 500 | Sub-header | `p.text-white.text-base` |
| `{type.heading.sm}` | 20px | 24px | -0.4px | 600 | Card Title | `h2.text-[20px]` |
| `{type.body.lg}` | 18px | 24px | 0.9px | 500 | Primary Button | `button.antialiased` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `a` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Footer/Utility | `div.text-sm` |

### Principles
1. **Gradient Masking:** Large display type often uses `bg-clip: text` with a white-to-transparent or brand-gradient fill.
2. **Aggressive Tracking:** Display sizes at 96px use 5% (4.8px) letter-spacing to reinforce the "Enterprise" scale.
3. **Antialiasing:** All typography uses `-webkit-font-smoothing: antialiased` to maintain legibility on dark backgrounds.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 48 |
| `{space.sm}` | 16px | 42 |
| `{space.md}` | 24px | 9 |
| `{space.lg}` | 48px | 6 |
| `{space.xl}` | 96px | 3 |
| `{space.section}` | 128px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, footer | 390 occurrences |
| `{radius.card}` | 16px | Feature cards, pricing cards | 18 occurrences |
| `{radius.panel}` | 24px | Integration containers | 3 occurrences |
| `{radius.pill}` | 9999px | Primary CTAs, Badges | 36 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | None | Primary canvas (`#060606`) | Universal |
| Raised | `#131313` | Integration grid background | Integration section |
| Shadow | `0 1px 3px rgba(0,0,0,0.1)` | Small utility buttons | Footer/Utility |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary Call to Action
**Pages observed:** All
**Spec:** Background: `linear-gradient(to right, #0071b2, #f56bfa)` / Text: `#ffffff` / Radius: `9999px` / Padding: `24px 48px` / Typography: `Raleway 500 18px`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Captured

#### Bordered Badge
**Role:** Category labels (e.g., "Industry We Serve")
**Pages observed:** All
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `1px solid #ffffff` / Radius: `9999px` / Padding: `8px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Industry vertical selection
**Pages observed:** All
**Spec:** Background: `rgba(255, 255, 255, 0.1)` / Border: `1px solid #222222` / Radius: `16px` / Padding: `16px`
**States observed:** Default: Captured

#### Integration Grid Item
**Role:** Partner logo containment
**Pages observed:** All
**Spec:** Background: `#131313` / Radius: `0px` / Padding: `16px` / Aspect Ratio: `1:1`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Zeno Hero Section
**Role:** Product introduction
**Pages observed:** Home, About
**Spec:** Background: `#060606` / Padding: `0px 96px` / Text: `#ffffff`
**States observed:** Default: Captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1280px |
| Section Gap | 128px |
| Grid Columns | 12-column desktop |
| Card Gap | 24px |

## Do's
- Use `#060606` for the primary canvas to ensure gradient vibrancy.
- Apply `Raleway` with `700` weight and `4.8px` tracking for display headers.
- Use the blue-to-magenta gradient exclusively for primary "Revolution" CTAs.
- Ensure all cards use a `16px` border radius.
- Maintain a minimum of `96px` vertical padding between major content sections.

## Don'ts
- **Wrong:** Using pure black `#000000` for large section backgrounds. **Right:** Use `#060606`. **Reason:** Pure black creates harsh "smearing" on OLED and lacks the depth of the brand's obsidian palette.
- **Wrong:** Labeling sub-brand colors (like a potential orange) as the parent primary. **Right:** Stick to `#0071b2` (Primary) and `#f56bfa` (Secondary).
- Do not use sharp `0px` corners on interactive cards; these are reserved for layout containers.
- Do not use `Montserrat` for body text; it is reserved for specific hero display moments.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-background: #060606;
  --color-surface: #131313;
  --color-primary: #0071b2;
  --color-secondary: #f56bfa;
  --color-white: #ffffff;
  --font-main: 'Raleway', sans-serif;
  --radius-card: 16px;
  --radius-pill: 9999px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-obsidian: #060606;
  --color-elevated: #131313;
  --color-hb-blue: #0071b2;
  --color-hb-magenta: #f56bfa;
  --font-raleway: "Raleway", sans-serif;
  --spacing-section: 128px;
}
```

## Agent prompt examples
- "Create a primary CTA button using a linear gradient from #0071b2 to #f56bfa, 9999px radius, and 18px Raleway medium text."
- "Design a feature card with a #131313 background, 1px border in #222222, and 16px border radius."
- "Generate a hero section header using Raleway 700 at 96px with 4.8px letter spacing on a #060606 background."

## Known gaps
- Hover and Focus states for the primary gradient buttons were not captured in the static evidence.
- Mobile-specific navigation menu transitions were not fully documented.
- Success/Error semantic tokens were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Home | `https://hostbooks.com` | 1440px | 2026-06-06 |
| Pricing | `https://hostbooks.com/pricing` | 1440px | 2026-06-06 |
| About | `https://hostbooks.com/about` | 390px | 2026-06-06 |