Bluehost Design System Deep Dive

1. Brand Overview

Bluehost’s visual language is unapologetically digital-first. This isn’t a “soft brand” trying to look artisanal — it’s a hosting company, and the design reflects that: sharp blues, clean typography, generous whitespace, and UI elements that feel engineered rather than ornamental. The vibe is confident, corporate, but still approachable enough for a small business owner who’s setting up their first WordPress site.

The design philosophy is built on trust and clarity. Primary blue dominates — #196cdf — and it’s everywhere: buttons, links, borders, focus states. It’s not shy. This works because blue is the safest color in tech — trustworthy, dependable, non-threatening. Perfect for web hosting.

Typography is modern sans-serif with some subtle serif flourishes in headings (Source Serif Pro for certain H1s). They use Proxima Nova as the workhorse, with Roboto and Montserrat sprinkled in for functional UI contexts like buttons and labels. This mix keeps things practical without drifting into blandness.

The system is clearly engineered for scalability. Breakpoints range from 98px (!) to 1920px, telling you they’ve tested across everything from tiny embedded widgets to full desktop. Spacing is on an 8px grid, which is standard for modern responsive systems.

Rounded corners are used strategically — pill buttons get full 100px radius, inputs get 80px, small controls get 4px. It’s not “everything is rounded”; sharp edges still exist for containers and tables. Shadows are subtle and layered — multi-stop drop shadows for elevated elements, otherwise flat.

If you’re a designer joining a team working on Bluehost, know this: the brand is about strong color discipline, consistent spacing, and a clear hierarchy. No gradients, no skeuomorphism. It’s web hosting — keep it clean, keep it clear.

2. Color System

2.1 Primary Colors

The hero color is Primary Blue — rgb(25, 108, 223) (#196cdf). This is the brand anchor. It’s used for CTAs, primary links, focus outlines, and as a base for hover overlays. It’s deep enough to be legible over white, bright enough to feel active. Compared to competitors like GoDaddy (green) or HostGator (orange), Bluehost’s blue signals reliability over playfulness.

Psychologically: blue = trust, stability, intelligence. In tech, it’s safe but effective.

2.2 Complete Palette

These are all extracted from the live site. No extra colors creep in — they’ve kept the palette tight.

2.3 Color Relationships

Contrast is strong: Primary Blue on white easily meets WCAG AA for large text and UI elements. Black on white is obviously fine. The only potential trouble is Accent Yellow (#f2ff47) on white — low contrast, so it’s mostly used for hover states or on dark backgrounds.

Dark mode isn’t a native mode here — but they do use dark surfaces (#1d2a3d, #041d33) for certain components, with text flipped to white.

2.4 Usage Guide

• Works: Primary Blue + White for buttons; Black + White for text; Accent Yellow on dark navy for emphasis.
• Avoid: Yellow on white for body text — fails accessibility; mixing Slate (#495c77) with Mid Gray (#5b5b5b) in the same component — too close in value.
• Functional: Reserve Navy (#1d2a3d) for major backgrounds; use Deep Navy (#041d33) for badges and icons.

3. Typography

3.1 Font Families

Main font is Proxima Nova — multiple weights: Regular, Medium, Bold, Semibold. Fallback: Helvetica. They also use:

• Source Serif Pro (Times fallback) — for certain headings, weight 700.
• Roboto — UI contexts, uppercase buttons, font weights 400–800.
• Montserrat — Buttons and captions.
• Material Icons — Icon font.

Google Fonts loaded: Material Icons, Poppins, Lato (although not widely applied in extracted styles).

Variable fonts: Yes — supports responsive typography.

3.2 Type Scale

This is just a slice — the full extracted list has dozens of variants. The range is tight: large display down to 8px caption, but most UI sits between 14–20px.

3.3 Hierarchy

H1s are big — up to 65px — which gives hero sections impact. Body text is mostly 16–18px, plenty legible. Buttons are bold and often uppercase when Roboto is in play. Serif headings are rare, used for emphasis or stylistic contrast.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

• 5px — tight padding for small controls
• 8px — icon gaps, compact buttons
• 12px — card padding
• 16px — section padding
• 24px — larger gaps
• 30px, 40px, 50px — hero spacing and section dividers

Frequency shows 5px (171 uses) and 16px (161 uses) are dominant — small and medium spacing drive the rhythm.

4.2 Layout

Breakpoints are exhaustive: from 98px min to 1920px max. Common cutoffs: 320px, 768px, 1024px, 1441px. This suggests a fluid grid with many conditionals for specific devices.

Containers likely max out around 1200px–1400px for desktop content.

5. Visual Elements

Border Radius

They have a wide range:

• 0px — flat edges (tables, certain divs)
• 4px — small buttons, inputs
• 17.309px — slider elements
• 30px — spans
• 35px — container tops/bottoms
• 50px — medium pills
• 80px — inputs, pill segments
• 100px — full pill buttons
• 50% — perfect circles
• 100% — full element rounding

Radius is tied to component type — no random mixing.

Shadows

Layered shadows for elevated components:

rgba(0,0,0,0.2) 0px 11px 15px -7px,
rgba(0,0,0,0.14) 0px 24px 38px 3px,
rgba(0,0,0,0.12) 0px 9px 46px 8px

Otherwise flat — buttons often have none unless hovered/active.

Borders

Primary border usage: 1px solid with brand colors or dark grays. UI dividers: 0px 0px 1px solid #808080 for subtle separation.

6. Components

6.1 Buttons

Primary Blue Pill (tabsDynamic__button--active):

• Default: background: #196cdf, color: #fff, padding: 8px 24px, radius: 100px, border: none.
• Hover: Dark navy background, border highlight.
• Active: Drop shadow, opacity 0.12.
• Focus: Blue glow (rgb(81,203,238)), black outline 2px.

Secondary Outline (genesysChat):

• Default: Transparent, blue text, solid dark border.
• Hover: Solid dark background, white text.
• Active: Shrink scale, white background, black border.
• Focus: Blue glow, white background.

Yellow Accent (form__submitButton):

• Default: Yellow background, black text, radius 100px.
• Hover: Dark navy background, white text.
• Active: Drop shadow.
• Focus: Blue glow, black outline.

6.2 Links

Variants by color:

• Blue underlined — hover removes underline, changes to gray.
• White text — hover gray.
• Accent yellow — same hover behavior.

6.3 Forms

Inputs:

• Default: White background, dark navy border, radius up to 100px pill.
• Focus: Bright blue background, white text, inset box shadow.

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-black: #000000;
  --color-primary-blue: #196cdf;
  --color-white: #ffffff;
  --color-dark-gray: #212529;
  --color-slate: #495c77;
  --color-mid-gray: #5b5b5b;
  --color-navy: #1d2a3d;
  --color-deep-navy: #041d33;
  --color-neutral-gray: #404040;
  --color-accent-yellow: #f2ff47;

  /* Typography */
  --font-proxima-nova: "Proxima Nova", Helvetica, sans-serif;
  --font-source-serif: "Source Serif Pro", Times, serif;
  --font-roboto: "Roboto", sans-serif;
  --font-montserrat: "Montserrat", Helvetica, sans-serif;
  --font-icons: "Material Icons";

  /* Spacing */
  --space-5: 5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 17.309px;
  --radius-lg: 50px;
  --radius-xl: 80px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-layered: rgba(0,0,0,0.2) 0px 11px 15px -7px,
                    rgba(0,0,0,0.14) 0px 24px 38px 3px,
                    rgba(0,0,0,0.12) 0px 9px 46px 8px;
}

8. AI Coding Assistant Prompt

# Bluehost Design System Specification

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

## Brand Context
Bluehost values clarity, trust, and efficiency. The design is built for digital products — heavy on blue, clean typography, and consistent spacing. Rounded corners are strategic, shadows are minimal.

## Color Palette
- Black: #000000 — Headers, body text, icons
- Primary Blue: #196cdf — CTAs, links, focus outlines
- White: #ffffff — Backgrounds, text on dark
- Dark Gray: #212529 — Secondary text, footer links
- Slate: #495c77 — Subheadings, icon tint
- Mid Gray: #5b5b5b — Disabled states
- Navy: #1d2a3d — Dark surfaces
- Deep Navy: #041d33 — Badges, counters
- Neutral Gray: #404040 — Icons
- Accent Yellow: #f2ff47 — Highlights, hover states

## Typography
Fonts:
- Headings: "Proxima Nova", Helvetica
- Accent Headings: "Source Serif Pro", Times
- UI Labels: "Roboto", sans-serif
- Buttons: "Montserrat", Helvetica
- Icons: "Material Icons"

Type sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 65px | 400 | 1.15 | Main hero |
| H1 | 60px | 500 | 1.58 | Hero alt |
| Body | 18px | 400 | 1.28 | Paragraphs |
| Button | 20px | 700 | — | Primary CTA |
| Caption | 14px | 400 | 1.43 | Labels |

## Spacing & Grid
Base: 8px
Scale: 5px, 8px, 12px, 16px, 24px, 30px, 40px, 50px
Use for component padding, gaps, section spacing.

## Border Radius
- none: 0px — tables
- sm: 4px — small buttons, inputs
- md: 17.309px — sliders
- lg: 50px — medium pills
- xl: 80px — inputs
- pill: 100px — primary buttons
- circle: 50% — avatars

## Shadows & Depth
- Layered shadow: rgba(0,0,0,0.2) 0px 11px 15px -7px, rgba(0,0,0,0.14) 0px 24px 38px 3px, rgba(0,0,0,0.12) 0px 9px 46px 8px
- Avoid heavy drop shadows — only use for elevated elements.

## Component Specifications

### Primary Button
Default: background #196cdf, color #fff, padding 8px 24px, radius 100px, border none.
Hover: background #012957, color #fff.
Active: shadow, opacity 0.12.
Focus: glow #51cbef, outline black 2px.

### Secondary Button
Default: transparent, text #196cdf, border 1px solid #041d33, radius 4px.
Hover: background #012957, color #fff.
Active: scale 0.9, background #fff.
Focus: glow #51cbef, background #fff.

### Input Field
Default: background #fff, border 1px solid #012957, radius 100px, padding 11px 40px 12px 27px.
Focus: background #1eaedb, text #fff, inset shadow #196cdf.

### Card
Background #fff, radius 4px, padding 16px, subtle border #c4cbd7 or shadow layered.

## Layout & Responsive Rules
Max content width: ~1400px
Mobile padding: 16px
Desktop padding: 24px
Breakpoints: 320px, 768px, 1024px, 1441px

## Interaction Rules
Transitions: 150ms ease for hover/focus
Focus indicators: always visible outlines
Loading states: reduce opacity to 0.5

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use Proxima Nova for headings
- Keep button radius consistent
- Apply shadows only to elevated elements
- Ensure WCAG AA contrast
- Use uppercase only for Roboto buttons

## DON'T List
- Invent new colors
- Mix sharp and rounded corners arbitrarily
- Overuse Accent Yellow
- Apply shadows to flat containers
- Remove focus outlines

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #196cdf;
  color: #fff;
  padding: 8px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 20px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #012957; }
.btn-primary:focus { outline: 2px solid #000; box-shadow: 0 0 2px 3px #51cbef; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #196cdf;
  border: 1px solid #041d33;
  border-radius: 4px;
  padding: 5px 8px;
}
.btn-secondary:hover { background: #012957; color: #fff; }
```

Input:
```css
.input {
  background: #fff;
  border: 1px solid #012957;
  border-radius: 100px;
  padding: 11px 40px 12px 27px;
}
.input:focus {
  background: #1eaedb;
  color: #fff;
  box-shadow: inset 0 0 0 1000px #196cdf;
}
```

9. Summary

TL;DR: Bluehost’s system is about disciplined blue, clean sans-serif typography, and an 8px spacing grid. Rounded corners are strategic; shadows are rare. Follow the palette and spacing rules and you’ll match their visual language.

Brand Keywords: trust-centric, blue-dominant, grid-consistent, corporate-clean, UI-focused