Fastly Design System Deep Dive

1. Brand Overview

Fastly isn’t here to be cute. Their design system screams utility-first with a sharp, tech-leaning aesthetic. This is a CDN and edge-computing platform, so their audience is developers, engineering leads, and tech decision-makers—not lifestyle consumers. You can feel that in the interface: crisp typography, high-contrast colors, and a no-nonsense grid.

The vibe is dark-neutral base with sudden punches of saturated functional colors—reds for errors, greens for success, blues for info, yellows for warnings. It’s an enterprise palette but more playful than AWS or Azure. The greens aren’t the dull enterprise greens—you get neon (#d0ff00, #79cc05) in some states. That’s a conscious choice. It says: “We’re modern, we’re fast, but we’re still trustworthy.”

Typography is split between ES Rebond Grotesque for personality and Inter Variable for clarity. ES Rebond Grotesque is used for headings and certain links—it’s bold and slightly quirky. Inter Variable handles body, buttons, captions—the workhorse font. This mix keeps the brand authoritative but stops it from feeling sterile.

The system is built on an 8px spacing grid, with a ton of intermediate values like 12px, 16px, and 32px showing up heavily. Breakpoints are dense—Fastly is clearly tuned for responsive scaling across a wide range of devices. They’re not just thinking mobile/desktop—they’ve got 400px, 426px, 544px, 768px, 991px, 1024px, all the way up to 1440px.

Corners are moderately rounded—8px is the most common—but they’re not afraid of extremes: 9999px for pills, 50px for big inputs. Shadows are minimal. When they do use them, it’s subtle rgba(68, 70, 57, 0.1) for depth. Most of the UI is “flat with borders.”

For a developer-focused brand, Fastly’s design language is refreshingly confident. It’s functional, but it’s got some flair. This isn’t bland enterprise blue; it’s “edge tech” with a pulse.

2. Color System

2.1 Primary Colors

Fastly’s primary brand punch is in red—not a single red, but a range from #eb1a0c to #ff282d. These reds are used in logo elements, headings, and CTA links. Psychologically, red is urgency, speed, and attention—perfect for “fast” branding.

The secondary accent is a deep black-neutral base (#25201e), which anchors everything. Combined with off-whites (#f4eeec, #ffffff), it creates strong contrast.

The functional colors are equally important:

• Green for success (#79cc05, #4aa800, #30a233)
• Blue for info (#006aff, #28a2fd, #0798c1)
• Yellow/Orange for warnings (#fca119, #e5a000, #ff8533)
• Purple for secondary accents (#d279a9, #af3354)

2.2 Complete Palette

Here’s every extracted color:

The CSS variables section gives dozens more tokens—Fastly clearly manages color at the token level for feedback states, HTTP verbs, and context hints.

Example:
--color-http-post: #bf5900 (brown-orange)
--color-feedback-success-50: #46e14a (bright green)
--color-context-important: #0346ff (blue for urgent info)

2.3 Color Relationships

Contrast is high. #25201e on #ffffff is > 12:1 (AAA). Same for white on black. The neon greens (#d0ff00) on dark backgrounds are readable but borderline for small text—fine for buttons/icons.

Dark mode isn’t a separate theme—they use the dark neutral base for large sections, and light off-white for others. It’s more of a “complementary theme” than a toggle.

2.4 Usage Guide

Works well:

• Black (#000) + neon lime (#d0ff00) for high-energy CTAs.
• Off-white (#f4eeec) surfaces + deep red (#eb1a0c) text for warnings.
• Blue (#006aff) links on white for clarity.

Avoid:

• Yellow (#ffd103) on white—low contrast.
• Pale grey (#e2d8d5) text on off-white—too subtle for body copy.
• Mixing multiple neons in one element—becomes chaotic.

3. Typography

3.1 Font Families

• ES Rebond Grotesque — No fallbacks listed. Used for headings and certain links. Personality font.
• Inter Variable (fallback: Inter) — Used for body, buttons, captions. System-friendly, highly readable.

No Google Fonts or Adobe Fonts sources detected—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The scale is tight—small jumps between sizes. This keeps the UI compact. ES Rebond Grotesque at large sizes creates impact for headings, but body stays in the 14–16px range for readability. Buttons often use 14px or 13px text—compact, efficient.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid, but they use half-steps (4px, 12px) often.

4.2 Layout

Breakpoints from 400px to 1440px—this is truly fluid. Expect container max-widths around 1200–1280px for desktop. Mobile padding likely 16px; desktop sections breathe more (32–40px gaps).

5. Visual Elements

Border Radius

Most common: 8px (buttons, cards). Other notable:

• 2px — small buttons and borders
• 6px — accent buttons
• 12px — modals, larger buttons
• 9999px — pill shapes
• 50px — large input fields

Shadows

Mostly flat. Common shadow: rgba(68, 70, 57, 0.1) 8px 8px 16px 0px for depth. Some inset shadows for focus states.

Borders

Functional. Many borders match button colors (#e7ff7a, #000). Borders are often 1px solid.

6. Components

6.1 Buttons

Variant 1 (Black background)

• Default: bg #000, text #f4eeec, padding 4px 8px, radius 8px, border 1px solid #000.
• Hover: bg #1eaedb, text #fff.
• Focus: bg #1eaedb, text #fff, opacity 0.7, border 2px solid #000.

Variant 2 (White background)

• Default: bg #fff, text #000, radius 12px, no border.
• No hover/focus states listed.

Variant 3 (Neon lime background)

• Default: bg #e7ff7a, text #25201e, padding 12px 10px, radius 6px, border 1px solid #e7ff7a.
• Hover: bg #1eaedb, text #fff.
• Focus: bg #1eaedb, text #fff, opacity 0.7, border 2px solid #000.

6.2 Links

Multiple styles:

• Black text (#000) → hover blue (#1883fd)
• Red text (#e9190c) bold → hover blue (#1883fd)
• White text (#fff) → hover blue
• Neon lime (#e7ff7a) → underline default, hover blue
• Navy (#004099) → underline default, hover blue

Underline is selectively used—often removed on hover.

6.3 Forms

No text inputs extracted—likely styled simply with 1px borders and small radius.

6.4 Cards

Likely use 8px radius, off-white backgrounds (#f4eeec), subtle grey borders. Shadows minimal.

7. Design Tokens

:root {
  /* Colors */
  --color-base-dark: #25201e;
  --color-white: #ffffff;
  --color-off-white: #f4eeec;
  --color-warm-grey: #c4b9b3;
  --color-pale-grey: #e2d8d5;
  --color-neon-lime: #e7ff7a;
  --color-mid-grey: #a8a09b;
  --color-charcoal-grey: #555555;
  --color-deep-purple: #4d1935;
  --color-dusty-grey: #8e8681;
  --color-electric-lime: #d0ff00;
  --color-pale-lime: #f7ffcc;
  --color-soft-lime: #f5ffc2;
  --color-forest-green: #427100;
  --color-acid-lime: #d4ff13;
  --color-olive-green: #283506;
  --color-bright-lime: #d5ff19;
  /* Typography */
  --font-heading: "ES Rebond Grotesque";
  --font-body: "Inter Variable", Inter;
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  /* Radius */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  /* Shadows */
  --shadow-soft: rgba(68,70,57,0.1) 8px 8px 16px 0px;
}

8. AI Coding Assistant Prompt

# Fastly Design System Specification

System Prompt: You are a Fastly design expert. Build UIs matching their visual language exactly.

## Brand Context
Fastly’s design system is developer-first with high-contrast neutrals, bold functional colors, and crisp typography. Corners are moderately rounded, shadows are minimal, and spacing follows an 8px grid. The look balances enterprise clarity with modern energy.

## Color Palette
- Base Neutral Dark: #25201e — Page backgrounds, dark text
- Pure White: #ffffff — Text on dark, backgrounds
- Off White: #f4eeec — Light UI surfaces
- Warm Grey: #c4b9b3 — Secondary text
- Pale Grey: #e2d8d5 — Header backgrounds
- Neon Lime: #e7ff7a — Buttons, highlights
- Mid Grey: #a8a09b — Secondary surfaces
- Charcoal Grey: #555555 — Secondary text
- Deep Purple: #4d1935 — Rare accents
- Dusty Grey: #8e8681 — Secondary text
- Electric Lime: #d0ff00 — Hover/focus states
- Pale Lime: #f7ffcc — Hover/focus states
- Soft Lime: #f5ffc2 — Hover/focus states
- Forest Green: #427100 — Hover/focus states
- Acid Lime: #d4ff13 — Hover/focus states
- Olive Green: #283506 — Hover/focus states
- Bright Lime: #d5ff19 — Hover/focus states

## Typography
- Headings: "ES Rebond Grotesque"
- Body: "Inter Variable", Inter

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 500 | 1.25 | Page titles |
| H1 | 40px | 500 | 1.25 | Section headings |
| H1 | 36px | 300 | 1.25 | Subheadings |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Button | 14px | 400 | 1.50 | Button labels |
| Caption | 13px | 400 | 1.50 | Secondary text |

## Spacing & Grid
Base: 8px. Scale: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px.

## Border Radius
- none: 0px — tables
- sm: 2px — small buttons
- md: 8px — cards, buttons
- lg: 12px — modals
- full: 9999px — pill buttons

## Shadows & Depth
Minimal shadows. Use rgba(68,70,57,0.1) 8px 8px 16px 0px for depth.

## Components

### Primary Button (Black)
```css
.btn-primary {
  background: #000;
  color: #f4eeec;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #000;
}
.btn-primary:hover { background: #1eaedb; color: #fff; }
.btn-primary:focus {
  background: #1eaedb;
  color: #fff;
  opacity: 0.7;
  border: 2px solid #000;
}

Secondary Button (Neon Lime)

.btn-secondary {
  background: #e7ff7a;
  color: #25201e;
  padding: 12px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid #e7ff7a;
}
.btn-secondary:hover { background: #1eaedb; color: #fff; }
.btn-secondary:focus {
  background: #1eaedb;
  color: #fff;
  opacity: 0.7;
  border: 2px solid #000;
}

Navigation Link (Black)

.nav-link {
  color: #000;
  text-decoration: none;
}
.nav-link:hover { color: #1883fd; }

Layout & Responsive Rules

• Max content width: 1280px
• Page padding: 16px mobile / 32px desktop
• Breakpoints: 400px, 426px, 544px, 768px, 991px, 1024px, 1280px, 1440px

Interaction Rules

• Transition: 150ms ease for state changes
• Focus indicators: 2px solid border in dark color
• Loading states: dimmed opacity

DO List

• Use only palette colors
• Maintain 8px grid
• Use ES Rebond Grotesque for headings
• Keep shadows minimal
• Use consistent corner radius per component type

DON'T List

• Don’t mix neons arbitrarily
• Don’t use yellow on white for text
• Don’t add heavy drop shadows
• Don’t exceed max content width

---

## 9. Summary

**TL;DR** — Fastly’s design system is developer-focused, high-contrast, and confident. Neutrals anchor bold functional colors, typography blends personality with clarity, and the 8px grid keeps layouts tight. Shadows are minimal, corners are consistent, and color tokens are precise.

**Brand Keywords**  
- high-contrast-tech  
- neon-functional  
- developer-confident  
- minimal-depth  
- structured-fluid