Hotjar Design System Deep Dive

1. Brand Overview

Hotjar’s design language is built around clarity, friendliness, and an approachable tech feel. The site is a SaaS product for user analytics and feedback—so the design needs to communicate trust, usability, and a sense of guidance without being sterile. They’ve nailed a balance: it feels like a tech tool, but not intimidating.

The vibe is clean but not “clinical.” It’s bright, with bursts of color—especially soft blues and the Hotjar signature red—to guide attention. The typography is approachable, with Ambit doing most of the heavy lifting for headings and Roboto for functional text. The spacing system is consistent, riding on an 8px grid, which makes the UI feel predictable and easy to scan.

Buttons and inputs have modest radii (mostly 4px) and clear state changes—hover effects are obvious, focus states are strong. This is good. It means accessibility isn’t an afterthought.

There’s a slight quirk: some border radii are oddball values (2px, 2.5px, 17px, 50px) in specific components. Feels like legacy or specialist UI patterns.

Hotjar’s design philosophy here:

• Keep things clear. No overcomplicated visuals.
• Use color sparingly but decisively—blues for CTAs, reds for brand emphasis.
• Maintain consistency with an 8px spacing rhythm.
• Prioritize function over flourish. Shadows are rare and mostly subtle.

If you’re building on top of this system, you can lean on the grid and typography without fear. The color palette is small but capable, so stick to it—Hotjar’s restraint is deliberate.

2. Color System

2.1 Primary Colors

The hero color is #324fbe (rgb(50, 79, 190))—a deep cobalt blue. It’s used for links, primary buttons, and key interactive elements. Blue is a safe choice for tech products—it conveys trust and clarity without shouting.

Secondary emphasis comes from #c3f0f7 (rgb(195, 240, 247)), a pale aqua used for backgrounds and secondary buttons. This works in contrast to the deep blue. And of course, the brand’s fire-red rgb(210, 50, 1) shows up in certain buttons and accents—this is the “Hotjar” in Hotjar.

Compare to competitors: Mixpanel leans purple, FullStory goes teal, Google Analytics is orange. Hotjar’s blue + red combo is more energetic and slightly friendlier.

2.2 Complete Palette

2.3 Color Relationships

The palette is high-contrast where it matters. White on cobalt is WCAG-compliant for accessibility. The pale aqua is borderline for text readability—works fine for backgrounds, but shouldn’t be used for body text.

The red buttons break from the blue scheme—good for high-emphasis actions (like “Submit Feedback”). Blue and red together are attention-grabbing but must be balanced to avoid looking like a news site.

No explicit dark mode here—the palette is tuned for light backgrounds.

2.4 Usage Guide

Works well:

• Deep cobalt (#324fbe) for text/icons on white backgrounds.
• Red (#d23201) for key actions paired with white text.
• Light aqua (#c3f0f7) as button fill for secondary actions.

Avoid:

• Using light aqua for text—it fails contrast.
• Pairing red with dark gray text—it kills legibility.
• Mixing cobalt and deep blue (#283f98) in the same element—too close in tone, reduces clarity.

3. Typography

3.1 Font Families

Hotjar uses Ambit for headings and UI elements, and Roboto for body copy, links, and functional labels.

Fallback stack for Ambit:
-apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

Fallback stack for Roboto:
Same, with occasional Arial fallback in certain contexts.

No Google Fonts or Adobe Fonts loaded—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The heading sizes drop from 48px to 24px in clear steps—no confusion here. The 18px size is a workhorse—used for links, small headings, and buttons. Body text sits comfortably at 16px Roboto, which is standard for readability. Captions at 14px keep secondary info unobtrusive.

The use of Ambit for headings and Roboto for body creates a nice visual separation—Ambit’s personality in titles, Roboto’s neutrality in copy.

4. Spacing & Layout

4.1 Spacing Scale

Hotjar uses an 8px base grid with occasional fractional values.

4.2 Layout

Breakpoints are dense—Hotjar is tuned for multiple device widths: starts at 300px, goes up through 1280px. This means they optimize for small devices and scale up.

5. Visual Elements

Border Radius

Mostly small radii:

• 1px — micro elements
• 2px — buttons, divs
• 4px — inputs, buttons
• Oddballs: 2.5px, 17px, 50px for special components (filters, search bars)

Shadows

Rare. Examples:

• rgba(0,0,0,0.16) 0px 16px 16px — subtle depth
• rgb(153,153,153) 0px 2px 10px -3px — mild card shadow

Mostly flat design with borders for separation.

6. Components

6.1 Buttons

Primary (Aqua)

• Default: bg #c3f0f7, color rgba(0,0,0,0.89), radius 4px, border 1px solid #c3f0f7
• Hover: bg #1eaddb, border var(--cobaltDark), color white, opacity 0.7
• Active: bg var(--midnight), color var(--white89)
• Focus: outline black 2px, bg #1eaddb

Secondary (Red)

• Default: bg #d23201, color white, radius 6px 6px 0 0
• Hover: same as primary hover (!) — odd
• Focus: dual outline: white 1px, red 3px

Muted

• Default: bg #f2efee, color #beb0ab, radius 4px
• Hover: bg dark red #7e1e01
• Focus: outline white/red combo

6.2 Links

Four variants:

• Aqua underlined
• Black no underline
• Cobalt no underline
• White underlined

6.3 Forms

Text Inputs

• Default: white bg, border 1px solid #8b8e9c, padding 8px 16px
• Focus: bg #1eaddb, color white, border black

Checkboxes

• Default: transparent bg
• Focus: bg #1eaddb, color white, border black

7. Design Tokens (CSS)

:root {
  /* Colors */
  --white: #ffffff;
  --light-aqua: #c3f0f7;
  --dim-gray: #696969;
  --deep-cobalt: #324fbe;
  --dark-gray: #555555;
  --light-gray: #d8d8d8;
  --dark-navy: #27455c;
  --muted-teal: #9cc0c6;
  --deep-blue: #283f98;
  --transparent-gray: rgba(160,160,160,0.1);

  /* Typography */
  --font-ambit: "Ambit", -apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-roboto: "Roboto", -apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-arial: Arial, Tahoma;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22-57: 22.5781px;
  --space-24: 24px;
  --space-25: 25px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-533-57: 533.578px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.16) 0px 16px 16px 0px;
  --shadow-card: rgb(153, 153, 153) 0px 2px 10px -3px;
}

8. AI Coding Assistant Prompt

# Hotjar Design System Specification

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

## Brand Context
Hotjar values clarity, user-friendliness, and trust. Their design system uses bright accents against clean white backgrounds, with a consistent 8px grid and approachable typography.

## Color Palette
- White: #ffffff — Page background
- Light Aqua: #c3f0f7 — Secondary buttons, backgrounds
- Dim Gray: #696969 — Secondary text
- Deep Cobalt: #324fbe — Primary actions, links
- Dark Gray: #555555 — Icons, muted text
- Light Gray: #d8d8d8 — Dividers, borders
- Dark Navy: #27455c — Background accents
- Muted Teal: #9cc0c6 — Hover/focus accents
- Deep Blue: #283f98 — Hover/focus on dark backgrounds
- Transparent Gray: rgba(160,160,160,0.1) — Overlays

## Typography
- Headings: Ambit, fallback stack as above
- Body: Roboto, fallback stack as above
| Level | Size | Weight | Line Height | Use For |
| H1 | 48px | 600 | 1.20 | Page titles |
| H1-sm | 40px | 600 | 1.20 | Section titles |
| H1-md | 32px | 600 | 1.20 | Subheaders |
| H4 | 24px | 400 | — | Smaller headings |
| Body-lg | 18px | 400 | 1.40 | Links, UI text |
| Body | 16px | 400 | 1.57 | Main copy |
| Caption | 14px | 400-700 | 1.25-1.50 | Secondary info |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 4px, 5px, 6px, 8px, 10px, 11.2px, 12px, 15px, 16px, 20px, 22.57px, 24px, 25px, 32px, 40px, 48px, 56px, 533.57px

## Border Radius
- 1px — borders on micro elements
- 2px — buttons/divs
- 4px — inputs/buttons
- 6px — special buttons
- 17px — filters
- 50px — search bars

## Shadows & Depth
Minimal shadows, prefer borders:
- Soft: rgba(0,0,0,0.16) 0px 16px 16px
- Card: rgb(153,153,153) 0px 2px 10px -3px

## Components

### Primary Button
Default: bg #c3f0f7, color rgba(0,0,0,0.89), padding 0 16px, radius 4px, border 1px solid #c3f0f7  
Hover: bg #1eaddb, color #fff, opacity 0.7  
Active: bg var(--midnight), color var(--white89)  
Focus: outline black 2px, bg #1eaddb  

### Secondary Button (Red)
Default: bg #d23201, color #fff, radius 6px 6px 0 0  
Hover: bg #1eaddb, color #fff  
Focus: outline white 1px + red 3px

### Input Field
Default: bg #fff, border 1px solid #8b8e9c, padding 8px 16px  
Focus: bg #1eaddb, color #fff, border black

## Layout & Responsive Rules
Breakpoints: 300, 400, 425, 426, 440, 476, 480, 530, 550, 600, 650, 700, 769, 890, 896, 897, 999, 1000, 1023, 1024, 1148, 1184, 1185, 1280

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Clear focus outlines
- Hover states must change bg and text color

## DO
- Use only palette colors
- Stick to 8px grid
- Use Ambit for headings, Roboto for body
- Maintain clear hover/focus states
- Keep button radii consistent

## DON'T
- Invent new colors
- Mix rounded and sharp corners
- Use shadows heavily
- Use light aqua for text

## Code Examples

```css
.btn-primary {
  background: #c3f0f7;
  color: rgba(0,0,0,0.89);
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid #c3f0f7;
  font-family: var(--font-ambit);
  font-size: 16px;
  font-weight: 500;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1eaddb; color: #fff; opacity: 0.7; }
.btn-primary:focus { outline: 2px solid #000; }
```

```css
.input {
  background: #fff;
  border: 1px solid #8b8e9c;
  border-radius: 4px;
  padding: 8px 16px;
}
.input:focus {
  background: #1eaddb;
  color: #fff;
  border: 1px solid #000;
}
```

```css
.card {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
```

9. Summary

TL;DR — Hotjar’s design system is a lean, approachable framework built on a tight 8px grid, a restrained color palette of cobalt blue, aqua, and brand red, and typography that balances personality and clarity. The components are functional first, with strong accessibility cues.

Brand Keywords: friendly-tech, clarity-first, grid-consistent, restrained-color, accessible-interactive