Speedtest Brand Design System Deep Dive

1. Brand Overview

Speedtest.net is one of those rare web tools that’s become a verb — “I’ll speedtest my connection.” Its design reflects that ubiquity and trust: stripped down, high-contrast, and slightly futuristic. This isn’t a lifestyle brand; it’s a functional, performance-oriented tool for people who care about numbers and want them fast. The interface wastes no time — you land, you click, you get results. Everything else is secondary.

The vibe is “digital instrument panel.” Fonts are sharp, sans-serif, often uppercase. Colors are electric — that signature cyan-blue (#1cbfff) jumps off a dark background like a neon indicator light. White text and fine gray lines keep the interface readable without losing that high-tech feel. The aesthetic leans toward dark mode by default, which makes sense for an app people may run at night or in environments where glare is a problem.

There’s a deliberate avoidance of skeuomorphism: no glossy buttons, no gradients pretending to be glass. Shadows are rare and subtle; depth comes from color and thin borders rather than heavy drop shadows. Components are clean pills or tight rectangles, with consistent radii that make them feel engineered, not decorative.

For the audience — network engineers, gamers, remote workers — this works. You don’t need to “delight” them with whimsy; you need to reassure them that the tool is precise and professional. Speedtest’s design says, “We’re here to measure, not to mess around.” I love how they’ve resisted the temptation to clutter the dashboard with “fun” — it’s just clean, efficient UI.

2. Color System

2.1 Primary Colors

The main brand color is #1cbfff — a vivid cyan. It’s used for links, accent icons, and certain buttons. Psychologically, cyan communicates clarity, precision, and tech-forward thinking. It’s also a safe choice for accessibility on dark backgrounds — it pops without straining the eyes. Compared to competitors (e.g., Fast.com’s stark black/white, Ookla’s own dark purple branding in some contexts), Speedtest’s cyan feels more “instrument panel” and less corporate.

White (#ffffff) is the other dominant color, used for most text and icons. It’s the default foreground against dark surfaces, ensuring maximum contrast.

2.2 Complete Palette

These four colors are the entire palette extracted. That’s lean — they’re relying on dark backgrounds (not extracted here) and these accents.

2.3 Color Relationships

• Contrast ratios: White on dark backgrounds easily passes WCAG AA and AAA for body text. Cyan (#1cbfff) on dark backgrounds is also safe. Cyan on white, however, needs careful weight — it can be thin and still readable, but heavier weights are better for accessibility.
• Dark mode bias: The palette is tuned for dark surfaces. White and cyan both blow out against black or deep navy. Light gray (#d7d8df) works for de-emphasized text without disappearing.
• No explicit “error” or “success” colors extracted — likely context-specific and rendered dynamically.

2.4 Usage Guide

Do:

• Use #1cbfff for interactive elements — links, CTAs, icons.
• Keep #ffffff for main text and primary buttons on dark backgrounds.
• Use #d7d8df for secondary info — timestamps, footnotes.

Avoid:

• Cyan on white unless it’s bold and large.
• Mixing aqua (#6afff3) and cyan in the same component — they’re too close in spectrum; use one per context.
• Introducing warm colors — they’ll clash with the cool, tech palette.

3. Typography

3.1 Font Families

Two main families:

• gauge-mono — custom, likely for the speed gauge readout. Fallbacks: Montserrat, Montserrat-Fixed, Avenir, Avenir Next LT Pro, Corbel, URW Gothic, source-sans-pro.
• Montserrat — everywhere else. Same fallback stack. Montserrat is a clean, geometric sans-serif that pairs well with the numeric feel of gauge-mono.

No Google Fonts or Adobe Fonts loaded — gauge-mono is custom, Montserrat likely bundled or self-hosted.

3.2 Type Scale

3.3 Hierarchy

They build hierarchy with size jumps and uppercase transforms. Big headings are 40–50px, often uppercase for impact. Body and small UI text cluster around 14–16px. The gauge-mono at 50px is purely for the speed readout — it stands out as different. Line heights are tight for big type (1.20) and looser for smaller text (1.60), helping scanability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — confirmed in metadata. Common values:

4.2 Layout

Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 640px, 896px, 1280px. That’s granular — they’re tuning for specific device widths. Expect fluid layouts between these points, with component resizing rather than fixed jumps.

5. Visual Elements

Border Radius System

They mix small radii (2–4px) for functional elements with large pill radii (36–40px) for buttons.

Shadows

Rare:

• rgba(0,0,0,0.5) 0px 0px 20px (4 occurrences)
• rgba(0,0,0,0.2) 0px 0px 18px (1 occurrence)

No heavy shadow system — they keep it flat.

Borders

Thin, solid borders in grays and cyan. Functional, not decorative.

6. Components

6.1 Buttons

Variant 1 (below-start-button class):

• Default: transparent background, white text, padding 7.25px 20px, radius 36px, border 1px solid rgb(145,147,168), font-weight 300, font-size 13px.
• Hover: white background, white text (!! unusual — likely overlay effect), opacity 0.9.
• Active: background rgb(44,100,21), white text, border rgba(162,192,169,0.5).
• Focus: background rgb(30,174,219), border 1px solid black, opacity 0.9.

Variant 2 (primary action):

• Default: background rgb(86,189,253), text rgb(11,12,27), padding 12px 10px, radius 2px, border 1px solid same color, font-weight 600, font-size 13.008px.
• Hover: opacity 0.9, white text, background rgb(30,174,219).
• Focus: white text, opacity 0.9, outline black solid 2px, background rgb(30,174,219).

6.2 Links

Five styles:

• White (#ffffff), no underline, hover to dark gray (#565656).
• Cyan (#1cbfff), no underline, hover to dark gray.
• Gray (#9193a8), no underline, hover to dark gray.
• Light gray (#d7d8df), no underline, hover to dark gray.
• Blue (#56bdfd), underline, bold — hover removes underline and changes to dark gray.

6.3 Forms

No text input styles extracted beyond one input radius (8px) and a border 1px solid rgb(94,95,115). Focus likely changes border color — not captured here.

6.4 Cards

No explicit “card” component extracted. Likely divs with 3px radius and subtle border.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-cyan: #1cbfff;
  --color-aqua: #6afff3;
  --color-light-gray: #d7d8df;

  /* Typography */
  --font-gauge-mono: gauge-mono, Montserrat, Montserrat-Fixed, Avenir, "Avenir Next LT Pro", Corbel, "URW Gothic", source-sans-pro;
  --font-montserrat: Montserrat, Montserrat-Fixed, Avenir, "Avenir Next LT Pro", Corbel, "URW Gothic", source-sans-pro;

  /* Spacing */
  --space-1_6: 1.6px;
  --space-2_8: 2.8px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6_4: 6.4px;
  --space-7_25: 7.25px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-21_6: 21.6px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-36: 36px;
  --radius-40: 40px;
  --radius-80: 80px;
  --radius-99_9862: 99.9862px;
  --radius-160: 160px;
  --radius-180: 180px;
  --radius-216: 216px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-20px-black-50: rgba(0,0,0,0.5) 0px 0px 20px 0px;
  --shadow-18px-black-20: rgba(0,0,0,0.2) 0px 0px 18px 0px;
}

8. AI Coding Assistant Prompt

# Speedtest Design System Specification

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

## Brand Context
Speedtest’s design is functional, high-contrast, and slightly futuristic. It’s built for precision and speed, with a dark mode bias and electric cyan accents. Avoid unnecessary decoration; focus on clarity.

## Color Palette
- White: #ffffff — Primary text, icons, logo
- Cyan Blue: #1cbfff — Links, CTAs, accent icons
- Aqua: #6afff3 — Occasional highlights
- Light Gray: #d7d8df — Secondary text, captions

## Typography
Font families:
- gauge-mono, Montserrat, Montserrat-Fixed, Avenir, "Avenir Next LT Pro", Corbel, "URW Gothic", source-sans-pro
- Montserrat for most UI text

Type scale:
| Level       | Size      | Weight | Line Height | Use For |
|-------------|-----------|--------|-------------|---------|
| Gauge H1    | 50px      | 400    | 1.20        | Speed readout |
| Button lg   | 40px      | 500    | 4.55        | Hero buttons |
| Heading lg  | 40px      | 500    | 4.55        | Section titles |
| Heading md  | 28.8px    | 500    | 1.60        | Subsections |
| Body lg     | 21.6px    | 400    | 1.60        | Paragraphs |
| Link lg     | 21.6px    | 500    | —           | Navigation |
| Heading sm  | 20px      | 500    | 1.60        | Labels (uppercase) |
| Body md     | 18px      | 400    | 1.60        | UI copy |
| Body sm     | 16px      | 400–700| 1.60        | Small text |
| Caption     | 14px      | 400–500| 1.60        | Notes |
| Micro       | 13px      | 300–700| 1.50–1.60   | Small labels |
| Tiny        | 12px      | 400–500| 1.60        | Microbuttons |
| Min         | 11.6667px | 400    | 1.60        | Minimal labels |
| Nano        | 10px      | 400    | 1.60        | Icon labels |

## Spacing & Grid
Base: 8px. Scale: 1.6px, 2.8px, 3px, 4px, 5px, 6.4px, 7.25px, 7.5px, 8px, 9px, 10px, 15px, 16px, 18px, 21.6px, 24px, 28px, 32px.
Map:
- Button padding: 7.25px–20px
- Card padding: 24px
- Section gaps: 28–32px

## Border Radius
- xs: 2–4px — small buttons, inputs
- sm: 8–10px — inputs, small cards
- md: 16–18px — medium buttons
- lg: 36–40px — pill buttons
- xl: 80–99.9862px — large circular elements
- full: 100% — avatars, round spans

## Shadows & Depth
Subtle shadows only:
- rgba(0,0,0,0.5) 0px 0px 20px
- rgba(0,0,0,0.2) 0px 0px 18px

## Components

### Primary Button
Default:
```css
background: rgb(86,189,253);
color: rgb(11,12,27);
padding: 12px 10px;
border-radius: 2px;
border: 1px solid rgb(86,189,253);
font-weight: 600;
font-size: 13.008px;
```
Hover:
```css
opacity: 0.9;
color: #ffffff;
background: rgb(30,174,219);
```
Focus:
```css
outline: rgb(0,0,0) solid 2px;
color: #ffffff;
opacity: 0.9;
background: rgb(30,174,219);
```

### Secondary Button
Default:
```css
background: transparent;
color: #ffffff;
padding: 7.25px 20px;
border-radius: 36px;
border: 1px solid rgb(145,147,168);
font-weight: 300;
font-size: 13px;
```
Hover:
```css
background: #ffffff;
color: #ffffff;
opacity: 0.9;
```
Active:
```css
background: rgb(44,100,21);
color: #ffffff;
border: 1px solid rgba(162,192,169,0.5);
```
Focus:
```css
background: rgb(30,174,219);
color: #ffffff;
opacity: 0.9;
border: 1px solid #000000;
```

### Navigation Links
White (#ffffff) default, no underline. Hover to #565656. Other link variants: cyan (#1cbfff), gray (#9193a8), light gray (#d7d8df), underline blue (#56bdfd).

### Input Fields
Border: 1px solid rgb(94,95,115), radius: 8px.

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 640px, 896px, 1280px.

## Interaction Rules
- Transitions: ~150ms ease for background/color changes
- Focus indicators: visible outline or border change

## DO
- Use only #1cbfff for primary accents
- Maintain 8px grid multiples
- Keep uppercase for major headings/buttons
- Use gauge-mono for numeric readouts
- Keep shadows subtle

## DON'T
- Add gradients to buttons
- Use warm colors
- Mix rounded and sharp corners in one component
- Use shadows heavier than provided
- Break spacing scale

## Code Examples

Primary button:
```css
.btn-primary {
  background: rgb(86,189,253);
  color: rgb(11,12,27);
  padding: 12px 10px;
  border-radius: 2px;
  border: 1px solid rgb(86,189,253);
  font-weight: 600;
  font-size: 13.008px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: rgb(30,174,219);
  color: #ffffff;
  opacity: 0.9;
}
```

Secondary button:
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 7.25px 20px;
  border-radius: 36px;
  border: 1px solid rgb(145,147,168);
  font-weight: 300;
  font-size: 13px;
  transition: all 150ms ease;
}
.btn-secondary:hover {
  background: #ffffff;
  color: #ffffff;
  opacity: 0.9;
}
```

Input:
```css
.input {
  border: 1px solid rgb(94,95,115);
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #1cbfff;
  outline: none;
}
```

9. Summary

TL;DR — Speedtest’s design is a precision instrument UI: dark surfaces, electric cyan accents, crisp sans-serif typography, and minimal shadow. Everything is tuned for clarity and speed.

Brand Keywords:

• performance-driven
• tech-minimalist
• dark-mode-native
• data-focused
• engineered-clean