Fast Design System Deep-Dive

1. Brand Overview

Fast.com is one of those rare single-purpose web tools that’s stripped down to the absolute essentials. No onboarding. No marketing fluff. No “sign up here to get started.” You land, and you get the speed test right away. That’s it. The design reflects that philosophy—minimal color, utilitarian typography, and layout that’s function over form.

The vibe: pragmatic, almost clinical. This isn’t trying to be a “fun” experience. It’s trying to be accurate, fast, and trustworthy. The visual language is built around stark contrasts—black, white, and shades of gray—with small hits of blue for interactivity and red for alerts. You can tell the team deliberately avoided decorative elements. There’s one shadow in the entire dataset. Border radii are modest, with the exception of a large pill-like rounding in a single div element. The typography choices lean on Helvetica and Arial, with a custom oc-webfont popping up in headings—likely a Netflix-owned icon or logo font.

Who’s this for? People who want to check their internet speed without thinking about design. The design system is invisible by intent—it’s there to support the data, not compete with it. There’s a confidence in that decision. No gradients, no illustrations, no complex component styles. This works because the brand stands on utility.

If you’re a designer or developer looking to replicate this vibe, you need to embrace restraint. Every pixel of padding, every font size, every color has a reason—usually “because it’s the simplest thing that works.” The brand’s philosophy is almost anti-branding: the UI is a tool, not a marketing surface. And that makes the few choices they do make—like the interactive blue hover states—carry more weight.

2. Color System

2.1 Primary Colors

There’s no single “brand primary” in the traditional sense. If you force a classification, black (#000000) and dark gray (#4a4a4a) are the workhorses. Blue (#0000ee, #0092e1, #005fcc) is reserved for interactive states—links, hovers, focus. Red (#ff0000) is for error or alert conditions. White (#ffffff) is the background or text color in high-contrast areas.

This works because the functional colors (blue for interactive, red for error) are consistent. There’s no random green or orange creeping in. Compared to competitors like Ookla’s Speedtest, which uses a richer palette and gradients, Fast.com is intentionally monochrome with sparse accents.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high almost everywhere. Black on white, white on black, dark gray on white—no low-contrast body text here. The blue hover states (#0092e1, #005fcc) are bright enough to stand out against white backgrounds, but they’re not jarring. The light gray (#d2d2d2) hover is subtle and would fail WCAG contrast for small text, so it’s likely used only for non-critical UI or disabled states.

Dark mode isn’t present. The palette is already high-contrast and minimal, so flipping it wouldn’t add much.

2.4 Usage Guide

Works well:

• Dark gray text (#4a4a4a) on white background—easy to read, neutral.
• Blue hover (#0092e1) on black text—clear interactive cue.
• Red border (#ff0000) on white—instant error recognition.

Avoid:

• Using #d2d2d2 for body text—contrast is too low.
• Mixing multiple blues in the same interface; stick to one for links/hover.
• Overusing red—it’s a functional color, not decorative.

3. Typography

3.1 Font Families

Two main fonts: Helvetica (with arial fallback) and a custom oc-webfont. Arial appears as a fallback in some contexts, and pure Arial is used in some smaller headings and buttons. No Google Fonts, no Adobe Fonts—this is system-safe typography plus one custom face.

Custom font note: oc-webfont is likely a proprietary Netflix font, used for branding or specific glyphs.

3.2 Type Scale

3.3 Hierarchy

The typography hierarchy is sharp: huge headings for the main metric (speed), mid-sized headings for supporting info, and small, unobtrusive links. The large sizes (64.8px, 75.6px) give the speed number dominance, which is exactly what the user came to see. The use of a non-bold oc-webfont for large numbers creates a visual distinction from the bold Helvetica headings—probably to separate data from labels.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is an 8px system, with some odd fractional values due to rem conversions.

4.2 Layout

No breakpoints in the dataset—likely handled in external CSS. But the spacing scale suggests they keep to multiples of 8px for layout rhythm. Containers and sections probably use 16px or 32px padding.

5. Visual Elements

• Border radius: Mostly small—5px for buttons, 5.33333px for tables, 10.8px for some anchors. One huge 172.8px radius for a pill-shaped element.
• Shadow system: One shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px. Likely for a modal or floating card. Everything else is flat.
• Borders: A few styles:
  • 2px inset #767676 for inputs
  • 1px solid #7b7b7b for buttons
  • 4px solid #ff0000 for error div
  • Subtle 1px solid #d5d4d1 for tables

6. Components

6.1 Buttons

No explicit button background colors in the dataset—likely plain white or gray with borders. Border radius is 5px, border 1px solid #7b7b7b. Text is Helvetica or Arial, size 18.9px or 16.2px.

States:

• Default: gray border, dark text
• Hover: likely border color shift or shadow (not in dataset)
• Focus: possibly 2px inset #767676 outline
• Disabled: reduced opacity

6.2 Links

Four link styles:

1. Default: #221f1f, no underline. Hover: #55acee
2. Default: #797777, no underline. Hover: #0092e1
3. Default: #4a4a4a, no underline. Hover: #55acee
4. Default: #d2d2d2, no underline. Hover: #55acee

They rely on color change for hover indication—no underline toggling.

6.3 Forms

Inputs: 2px inset #767676 border. Likely plain background. No hover/focus colors extracted except general hover blues.

6.4 Cards

No explicit card component in data, but the single shadow could be for a card. Flat design otherwise.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #4a4a4a;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-warm-gray: #d5d4d1;
  --color-medium-gray: #797777;
  --color-link-blue: #0000ee;
  --color-alert-red: #ff0000;
  --color-bright-blue-hover: #0092e1;
  --color-light-gray-hover: #d2d2d2;
  --color-deep-blue-hover: #005fcc;

  /* Typography */
  --font-helvetica: "Helvetica", arial;
  --font-arial: "Arial";
  --font-oc: "oc-webfont";

  --font-size-xxl: 75.6px;
  --font-size-xl: 64.8px;
  --font-size-lg: 27px;
  --font-size-md: 21.6px;
  --font-size-sm: 18.9px;
  --font-size-xs: 16.2px;
  --font-size-xxs: 16px;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-5: 5px;
  --space-5_4: 5.4px;
  --space-8: 8px;
  --space-8_1: 8.1px;
  --space-10_8: 10.8px;
  --space-16: 16px;
  --space-21_6: 21.6px;
  --space-32_4: 32.4px;
  --space-75_6: 75.6px;

  /* Radius */
  --radius-sm: 5px;
  --radius-sm-alt: 5.33333px;
  --radius-md: 10.8px;
  --radius-pill: 172.8px;

  /* Borders */
  --border-input: 2px inset #767676;
  --border-button: 1px solid #7b7b7b;
  --border-error: 4px solid #ff0000;
  --border-table: 1px solid #d5d4d1;

  /* Shadow */
  --shadow-default: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
}

8. AI Coding Assistant Prompt

# Fast Design System Specification

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

## Brand Context
Fast.com values speed, clarity, and utility. The design avoids decoration, focusing on high contrast and minimal components. Typography is functional; color is sparse and purposeful.

## Color Palette
- Dark Gray: #4a4a4a — Primary text and headers
- Black: #000000 — Core text, logo areas
- White: #ffffff — Backgrounds, inverse text
- Light Warm Gray: #d5d4d1 — Dividers and subtle borders
- Medium Gray: #797777 — Secondary text, less important links
- Link Blue: #0000ee — Default link color
- Alert Red: #ff0000 — Error borders and alerts
- Bright Blue Hover: #0092e1 — Link hover/focus
- Light Gray Hover: #d2d2d2 — Hover on light backgrounds
- Deep Blue Hover: #005fcc — Link hover/focus alternative

## Typography
Fonts:
- Helvetica, arial fallback — headings, body, UI labels
- oc-webfont — large numbers and certain headings
- Arial — some headings and buttons

Sizes:
| Level | Font       | Size   | Weight | Line Height | Use For |
|-------|------------|--------|--------|-------------|---------|
| H1    | Helvetica  | 75.6px | 700    | —           | Page title |
| H1    | oc-webfont | 64.8px | 400    | 1.33        | Large data |
| Link  | Helvetica  | 64.8px | 400    | —           | Large link |
| Link  | Helvetica  | 27px   | 400    | —           | Secondary link |
| Link  | Helvetica  | 21.6px | 400    | —           | Small link |
| H1    | oc-webfont | 21.6px | 400    | 1.00        | Small data |
| H1    | Helvetica  | 21.6px | 400    | —           | Subheading |
| H1    | Helvetica  | 18.9px | 400    | —           | Minor heading |
| H1    | Helvetica  | 18.9px | 700    | —           | Minor heading bold |
| H1    | Arial      | 18.9px | 400    | —           | Minor heading |
| Btn   | Helvetica  | 18.9px | 400    | —           | Button label |
| Link  | Helvetica  | 16.2px | 400    | —           | Small link |
| Btn   | Arial      | 16.2px | 400    | —           | Small button |
| H1    | oc-webfont | 16.2px | 400    | 1.00        | Small data |
| H1    | Helvetica  | 16px   | 400    | —           | Smallest heading |
| Link  | Helvetica  | 16px   | 400    | —           | Smallest link |

## Spacing & Grid
Base: 8px grid with fractional rem conversions.
Scale: 1px, 3px, 5px, 5.4px, 8px, 8.1px, 10.8px, 16px, 21.6px, 32.4px, 75.6px
Use: 16px for medium gaps, 32.4px for section spacing, 8px for tight UI elements.

## Border Radius
- sm: 5px — buttons
- sm-alt: 5.33333px — tables
- md: 10.8px — anchors
- pill: 172.8px — large pill elements

## Shadows & Depth
- Default shadow: rgba(0,0,0,0.2) 0px 8px 16px 0px — modals/cards

## Component Specifications
### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #4a4a4a;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  font-family: var(--font-helvetica);
  font-weight: 400;
  font-size: var(--font-size-sm);
  border: var(--border-button);
  transition: all 150ms ease;
}
.btn-primary:hover { border-color: #0092e1; }
.btn-primary:focus { outline: var(--border-input); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
.nav-link {
  color: #221f1f;
  text-decoration: none;
  font-weight: 400;
}
.nav-link:hover { color: #55acee; }
```

### Input Fields
```css
.input {
  border: var(--border-input);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  font-size: var(--font-size-xs);
}
.input:focus { border-color: #0092e1; outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--space-16);
  box-shadow: var(--shadow-default);
}
```

## Layout & Responsive Rules
- Max content width: fluid
- Page padding: 16px (mobile), 32px (desktop)
- Grid gap: multiples of 8px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: inset border or outline
- Loading: no animation, instant state change

## DO
- Use only palette colors
- Maintain 8px spacing multiples
- Reserve red for errors
- Use Helvetica for headings and body
- Keep hover states color-only, no underline changes

## DON'T
- Add extra shadows
- Mix corner styles
- Use unapproved colors
- Use gradients
- Animate core metrics

## Code Examples
### Button
```css
<button class="btn-primary">Run Test</button>
```

### Card
```css
<div class="card">Speed result</div>
```

### Input
```css
<input class="input" placeholder="Enter value">
```

9. Summary

TL;DR — Fast.com’s design system is minimal to the point of invisibility. Black, white, gray, with blue for interaction and red for errors. Helvetica and Arial carry the text, with a custom font for numbers. Spacing is tight and based on 8px multiples. Components are barebones, functional, and fast-loading.

Brand Keywords:

• utilitarian-minimalist
• high-contrast
• interaction-sparse
• function-over-form