DreamHost Brand Design System Deep Dive

1. Brand Overview

DreamHost’s visual language is exactly what you’d expect from a web hosting company that’s been around for decades but still wants to feel fresh. The tone is approachable but decidedly “tech-forward” — bright blues, clean typography, rounded corners everywhere. It’s built for people who want web infrastructure without feeling like they’re configuring a server rack.

The vibe: confident, energetic, and slightly playful. The primary blue (#0073ec) is pure SaaS energy — it’s the kind of blue you see on “Sign Up” buttons across the tech world because it screams “Click here.” But DreamHost tempers that with a softer secondary palette — purples (#b188cc, #a644e5), teals (#00caaa), and subdued neutrals (#434f58, #696969, #555555). It’s not just blue-and-white minimalism; there’s personality in the accents.

The site’s structure tells you they care about hierarchy and clarity. The Gilroy typeface is a bold choice — geometric sans with enough friendliness to feel human. This isn’t the spartan Helvetica look; Gilroy’s rounded shapes align with the pill-shaped buttons and high border-radius values.

The design philosophy:

• Approachable tech — technical product, but visual language is friendly.
• Readable hierarchy — massive headings, tight line height for impact.
• Consistent rhythm — 8px spacing grid, consistent corner radii, restrained shadow usage.
• State clarity — interactive states are obvious (hover blues pop, focus outlines are explicit).

Who’s this for? Small business owners, devs, hobbyists — anyone who needs hosting but doesn’t want to wade through AWS console screens. DreamHost’s design system is about making something inherently technical feel simple, fast, and trustworthy.

2. Color System

2.1 Primary Colors

The primary action color is Bright Blue (#0073ec). This is the “DreamHost blue” you see on CTAs, primary buttons, and interactive highlights. Psychologically, this hue sits in the zone of trust/competence but with enough saturation to feel energetic. Compared to competitors:

• GoDaddy leans green for approachability.
• Bluehost uses a softer, more corporate blue.
• DreamHost is punchier — closer to tech startup blue than enterprise blue.

This works because the product is technical but the brand wants to be approachable. A saturated blue cuts through neutral backgrounds without feeling aggressive.

2.2 Complete Palette

2.3 Color Relationships

Contrast is mostly solid — primary blue on white easily passes WCAG AA for normal text. Dark gray (#434f58) and medium gray (#696969) maintain legibility against white, though medium gray is borderline for small text. Teal and vivid purple are accents, not core text colors — they pop against white but need careful use against darker backgrounds.

Accessibility note: The hover color (#1883fd) for links and buttons keeps contrast high, but the teal (#00caaa) on white is borderline for small text — better for icons or backgrounds.

2.4 Usage Guide

• Works well: #0073ec + white for CTAs; #434f58 text on white; purple accents alongside blue for marketing banners.
• Avoid: Teal (#00caaa) as primary text — contrast drops.
• Dark mode: Palette adapts well — dark gray can flip to light gray, accents keep saturation.

3. Typography

3.1 Font Families

Primary typeface: Gilroy — geometric sans, custom/licensed, not Google or Adobe via API. Used everywhere: headings, body, buttons.
Icon fonts: Font Awesome 7 Pro and Font Awesome 7 Brands for social/media icons.

Fallbacks: Not listed explicitly. Gilroy is likely loaded globally with custom fallbacks in CSS.

3.2 Type Scale

All extracted sizes:

3.3 Hierarchy

Headings are massive — 88px down to 24px, tight line heights for impact. This creates strong visual anchors. Body text sits around 16–20px with generous line height for readability. Buttons and links get heavier weights (600–700) to signal interactivity.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Extracted values:

4.2 Layout

Breakpoints extracted: from 375px up to 1920px — clear mobile-first responsive design. Common widths: 640px, 768px, 1024px, 1280px, 1536px. Tailwind CSS powers the responsive variants — expect utility classes like sm:, md:, lg:.

5. Visual Elements

Border Radius

DreamHost loves rounded corners:

• 2px — small controls
• 16px — most buttons, inputs, images
• 32px — larger cards, sections
• 9999px — pills, avatars
• Odd shapes: 0px 16px 16px 0px — asymmetrical buttons

Shadows

Minimal, subtle depth:

• rgba(38, 45, 118, 0.08) 0px 10px 60px — large soft shadow
• rgba(23, 73, 77, 0.15) 0px 20px 30px — accent depth
• Inset white shadows for focus

Borders

Mostly 1px solid — neutral grays or transparent for layout structure.

6. Components

6.1 Buttons

Primary Button:

• Default: background: #0073ec, white text, padding: 14px 32px, radius 0px 16px 16px 0px, no visible border.
• Hover: background: rgb(30,174,219), opacity 0.9.
• Focus: outline: 2px solid black, background same as hover, border 1px solid black.
• Font: Gilroy, 20px, weight 600.

6.2 Links

Three styles:

1. White text — hover to blue (#1883fd).
2. Blue text (#0073ec) with underline — hover to lighter blue, no underline.
3. Black text — hover to blue.

6.3 Forms

No extracted text inputs with full states — but borders are light gray (#e0e4e8), radii consistent (16px).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary-blue: #0073ec;
  --color-soft-purple: #b188cc;
  --color-dark-gray: #434f58;
  --color-medium-gray: #696969;
  --color-teal: #00caaa;
  --color-vivid-purple: #a644e5;
  --color-gray-555: #555555;
  --color-deep-blue: #005fcc;

  /* Typography */
  --font-primary: "Gilroy", sans-serif;
  --font-icon-brands: "Font Awesome 7 Brands";
  --font-icon-pro: "Font Awesome 7 Pro";

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-88: 88px;
  --space-96: 96px;
  --space-144: 144px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-lg: rgba(38, 45, 118, 0.08) 0px 10px 60px;
  --shadow-md: rgba(23, 73, 77, 0.15) 0px 20px 30px;
}

8. AI Coding Assistant Prompt

# DreamHost Design System Specification

You are a DreamHost design expert. Build UIs matching their visual language exactly.

## Brand Context
DreamHost’s design is approachable tech—bright saturated blues for primary actions, friendly rounded typography, consistent 8px spacing, and high corner radii. Shadows are subtle, borders are light, and interactive states are clear.

## Color Palette
- Primary Blue: #0073ec — Primary buttons, CTAs, links
- Soft Purple: #b188cc — Secondary accents, decorative elements
- Dark Gray: #434f58 — Body text
- Medium Gray: #696969 — Secondary text
- Teal: #00caaa — Success states, icons
- Vivid Purple: #a644e5 — Marketing highlights
- Gray-555: #555555 — UI icons, controls
- Deep Blue: #005fcc — Hover/focus states

## Typography
- Primary: "Gilroy", sans-serif
- Icon Fonts: "Font Awesome 7 Pro", "Font Awesome 7 Brands"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 88px | 700 | 1.18 | Hero titles |
| H1 | 80px | 700 | 1.20 | Hero titles alt |
| H2 | 64px | 700 | 1.00 | Section titles |
| H2 | 64px | 600 | 1.25 | Section titles alt |
| H3 | 48px | 700 | 1.25 | Subheaders |
| Body | 20px | 400 | 1.60 | Paragraphs |
| Button | 20px | 600 | 1.00 | Interactive text |
| Caption | 14px | 400 | 1.25 | Meta info

## Spacing & Grid
Base: 8px. Scale: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 88px, 96px, 144px.

## Border Radius
- sm: 2px — small controls
- md: 16px — buttons, inputs
- lg: 32px — cards
- full: 9999px — pills, avatars

## Shadows & Depth
- Large: rgba(38, 45, 118, 0.08) 0px 10px 60px
- Medium: rgba(23, 73, 77, 0.15) 0px 20px 30px
Use shadows sparingly for depth.

## Component Specifications

### Primary Button
Default:
```css
background: #0073ec;
color: #fff;
padding: 14px 32px;
border-radius: 0px 16px 16px 0px;
border: 1px solid transparent;
font-weight: 600;
font-size: 20px;
```
Hover:
```css
background: rgb(30, 174, 219);
opacity: 0.9;
```
Focus:
```css
outline: 2px solid #000;
background: rgb(30, 174, 219);
border: 1px solid #000;
```

### Navigation Links
- White text — hover to #1883fd
- Blue text — hover to #1883fd, underline removed

### Cards
- Background: #fff
- Padding: 32px
- Border-radius: 32px
- Shadow: var(--shadow-lg)

## Layout & Responsive Rules
Breakpoints: 375px, 640px, 768px, 1024px, 1280px, 1536px.
Mobile-first. Spacing multiples of 8px.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: 2px solid black

## DO List
- Use only palette colors
- Maintain 8px grid
- Gilroy for all text
- Consistent radii per component type
- Visible focus styles

## DON'T List
- Introduce unapproved colors
- Mix sharp and rounded corners
- Remove focus indicators
- Overuse shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0073ec;
  color: #fff;
  padding: 14px 32px;
  border-radius: 0px 16px 16px 0px;
  font-weight: 600;
  font-size: 20px;
}
.btn-primary:hover { background: rgb(30, 174, 219); opacity: 0.9; }
.btn-primary:focus { outline: 2px solid #000; }
```

Card:
```css
.card {
  background: #fff;
  padding: 32px;
  border-radius: 32px;
  box-shadow: rgba(38,45,118,0.08) 0px 10px 60px;
}
```

9. Summary

TL;DR — DreamHost’s design system is bright, friendly, and consistent. Saturated blue drives interaction, Gilroy typeface builds hierarchy, and an 8px grid keeps everything aligned. Rounded corners are everywhere, shadows are subtle, states are clear.

Brand Keywords: tech-friendly, blue-driven, rounded-modern, state-conscious, grid-consistent