# Highspot Design System

> Deep polar night foundations anchored by precise Source Sans 3 typography and soft arctic blue elevations.

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

## TL;DR
Highspot utilizes a "Polar Night" palette, where deep navy (#002133) and slate gray (#4d6470) provide a high-contrast foundation against pure white (#ffffff) canvases. The system is characterized by a signature light-weight display type (Source Sans 3 at weight 325) that lends an air of technical precision without the bulk of traditional bold headers. UI elements follow a strict geometric logic with 16px radius cards and 32px pill-shaped controls, often utilizing subtle "Arctic Blue" (#1d6de2) accents for interactive cues.

## Signature DNA
1. **The 325 Weight Display** (Source Sans 3 at a custom 325 weight is used for primary H1 and metric headlines, creating a distinct, high-end technical aesthetic observed on the homepage and about pages).
2. **Polar Night Layering** (The use of #002133 as a primary surface for high-impact cards and footers, contrasted with #f2f5f7 "Fog" backgrounds to define section boundaries).
3. **Soft Arctic Geometry** (Consistent 16px rounding on content containers paired with 32px rounding on secondary buttons, creating a friendly but professional enterprise interface).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-polar-night` | `#002133` | Primary surface, footer, and dark-mode CTA backgrounds | 87 | 1 | `css_variable` |
| `--color-white` | `#ffffff` | Primary page canvas and text on dark surfaces | 58 | 1 | `computed_style` |
| `--color-polar-fog-100` | `#f2f5f7` | Secondary section backgrounds and subtle card surfaces | 26 | 1 | `css_variable` |
| `--color-polar-night-900` | `#4d6470` | Primary body text and secondary headings | 145 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-arctic-blue` | `#1d6de2` | Primary action text and link accents | 22 | 1 | `css_variable` |
| `--color-mosaic-blue-200` | `#e9f3fc` | Decorative card backgrounds (light blue) | 10 | 1 | `css_variable` |
| `--color-ocean` | `#2abaf8` | Tertiary text accents | 8 | 1 | `css_variable` |
| `--color-spring-teal` | `#c5eef3` | Decorative surface background (pricing) | 3 | 1 | `decorative_only` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `--color-success` | `#4d9f1a` | Positive validation and success states |
| `--color-alert` | `#cf2e2e` | Error states and critical alerts |
| `--color-warning` | `#ffce09` | Warning notifications |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Source Sans 3 | 325, 400, 600 | Display, Headings, Buttons | Source Sans Pro | SIL Open Font |
| Arial | 400 | Fallback body, UI controls | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `--text-display-mega` | 64px | 76.8px | normal | 325 | Hero H1 | `h1.content-heading` |
| `--text-display-lg` | 56px | 67.2px | normal | 400 | Section H2 | `h2.Mosaic__heading` |
| `--text-heading-xl` | 42px | 56px | normal | 400 | Sub-section H3 | `h3#h-gtm-agent` |
| `--text-metric` | 42px | 50.4px | normal | 325 | Large numbers | `span.CustomerStoryCards__number` |
| `--text-heading-lg` | 32px | 42.6px | normal | 400 | Standard H3 | `h3.PlanComparison__planTitle` |
| `--text-heading-sm` | 24px | 32px | normal | 400 | Card titles | `div.LatestNews__headline` |
| `--text-body` | 18px | 27px | normal | 400 | Default prose | `section.spz-bg-wrap` |
| `--text-button` | 16px | 24px | normal | 600 | CTA labels | `a.Mosaic__link` |
| `--text-caption` | 14px | 21px | normal | 600 | Badges/Labels | `span.PlanComparison__planBadge` |

### Principles
1. **Lightweight Authority:** Use weight 325 for all hero-level typography to maintain a modern, airy feel.
2. **Prose Comfort:** Body text is locked to 18px with a 1.5x line height (27px) for maximum readability on long-form content.
3. **Semibold Interaction:** All interactive elements (buttons, links) must use weight 600 to distinguish them from static prose.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `--space-xs` | 8px | 22 |
| `--space-sm` | 16px | 92 |
| `--space-md` | 24px | 34 |
| `--space-lg` | 32px | 23 |
| `--space-xl` | 72px | 21 |
| `--space-section` | 112px | 20 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `--radius-sm` | 6px | Input fields and small buttons | `Rounded Button (16px font)` |
| `--radius-md` | 8px | Secondary action buttons | `Rounded Button (18px font)` |
| `--radius-lg` | 16px | Standard content cards | `Card (18px font)` |
| `--radius-pill` | 32px | Primary navigation and pill CTAs | `Rounded Button (13.3px font)` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | 0px | Default card state | All cards in evidence |
| Crisp | `0 2px 4px rgba(0,0,0,0.1)` | Hovered cards (token reference) | `--wp--preset--shadow--crisp` |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main call-to-action (Request Demo, Contact Sales)
**Pages observed:** All
**Spec:** Background: `#002133` / Text: `#ffffff` / Radius: `32px` / Typography: `16px Semibold`
**States observed:** Default | Hover: captured

#### Ghost Button
**Role:** Secondary navigation and inline actions
**Pages observed:** https://highspot.com, https://highspot.com/about
**Spec:** Background: `transparent` / Text: `#1d6de2` / Border: `none` / Radius: `6px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Content Card (Light)
**Role:** Feature highlights and blog entries
**Pages observed:** All
**Spec:** Background: `#e9f3fc` / Text: `#4d6470` / Radius: `16px` / Padding: `24px`
**States observed:** Default

#### Content Card (Dark)
**Role:** High-impact section highlights
**Pages observed:** All
**Spec:** Background: `#002133` / Text: `#f2f4f5` / Radius: `16px` / Padding: `24px`
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Pricing plan comparison
**Pages observed:** https://highspot.com/pricing
**Spec:** Background: `#ffffff` / Border: `1px solid #ccd3d6` / Radius: `16px` / Padding: `64px 32px`
**States observed:** Default

#### Metric Badge
**Role:** Small status or category labels
**Pages observed:** https://highspot.com/pricing
**Spec:** Background: `#f2f5f7` / Text: `#4d6470` / Radius: `6px` / Typography: `14px Semibold`

## Layout
| Property | Value |
|------|-------|
| Max-width | 1280px |
| Section Padding | 112px (Vertical) |
| Grid Gap | 24px |

## Do's
- Use **Source Sans 3 weight 325** for all primary page titles.
- Apply **16px border-radius** to all content-containing cards.
- Use **#f2f5f7** for alternating section backgrounds to maintain rhythm.
- Ensure primary CTAs use the **#002133** background for maximum contrast.
- Maintain **112px vertical spacing** between major homepage sections.

## Don'ts
- Do not use weight 700 or 800 for headings; stick to the signature 325/400 scale.
- Do not use pure black (#000000) for text; use **#4d6470** for body and **#002133** for titles.
- Do not apply shadows to cards by default; the system relies on flat color blocks and hairlines.
- Avoid using **#1d6de2** (Arctic Blue) as a background for large surfaces; it is an accent color only.

## Quick start

```css
:root {
  --color-polar-night: #002133;
  --color-polar-night-900: #4d6470;
  --color-polar-fog-100: #f2f5f7;
  --color-arctic-blue: #1d6de2;
  --color-white: #ffffff;
  
  --font-family-display: "Source Sans 3", sans-serif;
  --font-weight-signature: 325;
  
  --radius-card: 16px;
  --radius-pill: 32px;
}
```

## Agent prompt examples
- "Create a feature section with a #f2f5f7 background, a 56px Source Sans 3 heading, and three 16px rounded white cards."
- "Generate a primary button using #002133 background, white text, and 32px border-radius."
- "Design a pricing table using 1px borders in #ccd3d6 and 16px rounded corners."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://highspot.com | 1440px | 2026-06-06 |
| Pricing | https://highspot.com/pricing | 1440px | 2026-06-06 |
| About | https://highspot.com/about | 1440px | 2026-06-06 |