---
title: "speedrun design system"
variant: extended
source: https://speedrun.a16z.com/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/speedrun-a16z-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# speedrun · Design System

> Bold founder stories on a warm, open canvas

**Theme:** light · **Industry:** other · **Source:** https://speedrun.a16z.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

speedrun pairs a warm neutral canvas and forceful black typography with documentary-style founder photography. Spacious editorial sections give way to a vivid gradient newsletter panel and crisp white event and FAQ blocks.

## North star

Keep a warm, quiet canvas and let oversized black type and candid founder imagery carry the story, reserving saturated gradients for isolated accents.

## Overview

The visual system is anchored by a warm stone canvas (#ebe9e5), with black (#000000) headlines and white cards creating clear contrast. Most of the long page stays on the warm background; pure white is reserved for the closing event and FAQ areas. Pale gray rules separate content without adding visual weight. The accents—mint, cyan, and blue—appear sparingly in gradients, especially the newsletter panel and small CTA treatments; they are not the main page palette. Messina Sans carries nearly all the typography: heavy, tightly tracked display and heading styles make short statements feel direct, while compact uppercase labels introduce sections. A condensed Messina Sans face distinguishes uppercase navigation and buttons. The layout alternates wide text-led blocks with image cards, speaker portraits, and asymmetrical testimonial rows. Large section gaps keep this dense information page readable. Photography is candid and human, with simple rounded card edges and little reliance on shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pitch Black | `#000000` | `--color-pitch-black` | brand | Primary headings, body copy, navigation, links, and solid CTA backgrounds. |
| Warm Stone | `#ebe9e5` | `--color-warm-stone` | surface | Dominant page canvas behind the hero and most editorial, card, and testimonial sections. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Feature cards and the broad event, FAQ, and footer section backgrounds. |
| Soft Graphite | `#d3d1ce` | `--color-soft-graphite` | neutral | Fine divider and border lines separating content on the light canvas. |
| Oat Shadow | `#e2dfd8` | `--color-oat-shadow` | neutral | Secondary warm surface and gradient base tone; supports subtle tonal shifts. |
| Media Gray | `#eeeeee` | `--color-media-gray` | neutral | Minor media-area color from measured content, not a defining brand surface. |
| Footer Slate | `#5c5c5c` | `--color-footer-slate` | neutral | Muted footer copy and secondary legal text. |
| Sage Haze | `#ccdcc3` | `--color-sage-haze` | accent | Subtle green transition within decorative gradient backgrounds. |
| Mint Signal | `#a4d7bc` | `--color-mint-signal` | accent | Soft mint highlight in gradients and small CTA color treatments. |
| Pool Cyan | `#00c6c6` | `--color-pool-cyan` | accent | Bright cyan stop in decorative gradients, not a dominant text or surface color. |
| Electric Aqua | `#00b5f4` | `--color-electric-aqua` | accent | Blue-cyan gradient stop used for isolated color accents. |
| Bright Current | `#00a1ff` | `--color-bright-current` | accent | Vivid blue gradient stop in decorative color fields. |
| Azure Flash | `#398cff` | `--color-azure-flash` | accent | Blue gradient highlight, used sparingly in colorful section treatments. |
| Glacial Glow | `#56faf7` | `--color-glacial-glow` | accent | Luminous cyan detail in gradient/nav-related styling; a minor accent, not a page foundation. |

### Semantic aliases

`--color-canvas` → `#ebe9e5` (Warm Stone) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#e2dfd8` (Oat Shadow) · `--color-text` → `#000000` (Pitch Black) · `--color-border` → `#d3d1ce` (Soft Graphite) · `--color-accent` → `#a4d7bc` (Mint Signal) · `--color-accent-2` → `#00c6c6` (Pool Cyan) · `--color-accent-3` → `#00b5f4` (Electric Aqua)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ebe9e5` | 17.32:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e2dfd8` | 15.78:1 | AAA |
| `#a4d7bc` | `#ebe9e5` | 1.33:1 | fail |
| `#a4d7bc` | `#ffffff` | 1.61:1 | fail |
| `#a4d7bc` | `#e2dfd8` | 1.21:1 | fail |

### Gradients

- `linear-gradient(90deg, rgba(226, 223, 216, 0) -222.22%, rgba(226, 223, 216, 0.1) -202.89%, rgba(225, 222, 214, 0.2) -183.56%, rgba(224, 221, 209, 0.3) -161%, rgba(219, 218, 201, 0.4) -143.22%, rgba(208, 214, 187, 0.5) -1`
- `radial-gradient(90.9468% 74.1333% at 0% 87.4966%, rgb(226, 223, 216) 0%, rgb(226, 223, 216) 50%, rgba(226, 223, 216, 0) 51%, rgba(226, 223, 216, 0) 100%), radial-gradient(151.263% 119.545% at 12.5034% 2.56477%, rgb(86, 2`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 36%, rgb(255, 255, 255) 47%)`
- `radial-gradient(102.561% 97.1073% at 34.3945% 100%, rgb(226, 223, 216) 0%, rgb(226, 223, 216) 50%, rgba(226, 223, 216, 0) 51%, rgba(226, 223, 216, 0) 100%), radial-gradient(134.488% 134.488% at 0% 63.7728%, rgb(86, 250, `

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| messinaSans | `--font-body` | webfont | 600, 900, 700 | Main display, headings, body copy, links, and most page text. | DM Sans |
| messinaSansCondensed | `--font-messinasanscondensed` | webfont | 600 | Uppercase navigation, buttons, and eyebrow labels. | Barlow Condensed |

- **messinaSans:** Use heavy weights for large, tightly tracked headings; body copy is semibold with compact tracking.
- **messinaSansCondensed:** Condensed uppercase treatment keeps controls compact; measured weights are semibold.

### Type scale — Custom (ratio ≈ 1.723, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 243px | 900 | 1 | -0.074em | — | messinaSans | Oversized event or campaign words used as visual anchors. |
| h1 | 72px | 900 | 1 | -0.05em | — | messinaSans | Primary hero statement about startup investment. |
| h2 | 64px | 900 | 1 | -0.05em | — | messinaSans | Major section headings and prominent testimonial quotations. |
| h3 | 48px | 900 | 1 | -0.05em | — | messinaSans | Feature-card titles and secondary editorial headings. |
| h4 | 32px | 900 | 1 | -0.05em | — | messinaSans | Smaller subheads within feature and content areas. |
| body | 16px | 600 | 1.25 | -0.03em | — | messinaSans | Explanatory paragraphs, descriptions, and supporting copy. |
| caption | 13px | 600 | 1.23 | -0.01em | — | messinaSans | Compact speaker names, roles, and fine-print details. |
| button | 16px | 600 | 1.25 | 0 | uppercase | messinaSansCondensed | Uppercase primary CTA labels and action links. |
| nav | 18px | 600 | 1.11 | 0 | uppercase | messinaSansCondensed | Uppercase condensed labels for navigation items. |
| link | 16px | 700 | 1.25 | -0.03em | — | messinaSans | Emphasized inline links and company names. |
| eyebrow | 16px | 600 | 1.25 | 0.04em | uppercase | messinaSansCondensed | Compact uppercase section labels above key content. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 56, 80, 96 px.
- Section rhythm 96px · element gap 8px · card padding 23px · max content width 1248px.

A spacious, long-form page built around a measured 1248px maximum content width and a 4px-based spacing system. Navigation sits in a white top bar; the hero uses full-width photography with copy anchored low and left. Feature cards form a three-column row, while global-program and testimonial areas use looser split or multi-column arrangements. Large section gaps distinguish the editorial sequence. The denser speaker grid is balanced by broad margins, and the final event and FAQ blocks switch to white.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `16px` · nav `8px` · link `8px` · xs `8px` · sm `10px` · md `12px` · lg `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page is largely flat: contrast comes from warm and white section bands rather than shadows. Cards use white surfaces on the stone canvas, with softly rounded corners and little visible elevation. Fine gray hairlines divide selected content rows. Hero media layers beneath copy, and gradients add color without creating a raised-card effect.

## Imagery

Candid founder and operator photography is the primary image language: event moments, portraits, and speaker tiles are framed as clean rounded cards. Hero footage or photography fills the background, darkened enough for white overlay copy. Supporting cards mix event scenes and founder portraits. A faint world-map graphic supports the global-program section. The portfolio strip includes colorful company marks; treat their colors as image content, not brand palette.

## Components

### Top navigation

White horizontal bar with the black speedrun wordmark, compact links, and right-aligned Apply Now and Log In actions.

### Hero

Full-bleed event image with dark treatment, uppercase eyebrow, large white investment headline, and a small gradient Apply Now control.

### Feature cards

Three white, 16px-radius cards on the warm canvas; image-led content and centered capital, operator, and founder-network descriptions.

### Perks CTA

Two bold perk statements separated by fine rules, followed by a black uppercase Learn More button.

### Speaker gallery

Compact multi-column portrait grid with names and affiliations set directly below each image.

### Testimonial rows

Alternating image and large quotation layouts on the warm canvas, with compact founder attribution and supporting text.

### Gradient newsletter panel

Wide blue-to-violet gradient field with a left-aligned bold heading and supporting subscription copy alongside a white form area.

### Event and FAQ blocks

White closing sections use an oversized black Demo Day wordmark, then repeated question text, a founder image, and a compact FAQ CTA.

### Measured component styles

- **Primary button** (“LEARN MORE ABOUT THE PERKS”): background #000000 · text #ffffff · radius 8px · padding 16px 24px · 600 18px messinaSansCondensed · uppercase
- **Link** (“Sekai”): transparent background · text #000000 · radius 0px · padding 0px · 700 16px messinaSans
- **Card** (“CAPITAL Up to $1M in funding and $10M+ i”): background #ffffff · text #000000 · radius 16px · padding 0px 24px 44px 24px · 600 16px messinaSans
- **Navigation item** (“COMPANIES DEMO DAY PERKS FAQ”): transparent background · text #000000 · radius 0px · padding 0px · 600 16px messinaSans

## Do

- Use Warm Stone (#ebe9e5) as the main page canvas.
- Set headline hierarchy in bold black Messina Sans or a close substitute.
- Keep navigation and button labels uppercase and condensed.
- Use candid founder photography with restrained rounded framing.
- Reserve vivid cyan and blue gradients for isolated panels or small CTA treatments.
- Use white cards and fine gray rules to organize content without heavy shadows.

## Don't

- Do not turn the entire page into a saturated gradient.
- Do not use colored body text where black is the measured default.
- Do not add prominent drop shadows or glossy card effects.
- Do not make every section a centered, identical card grid.
- Do not use illustration colors as the site-wide brand palette.
- Do not crowd the long-form page; preserve generous section separation.

## Agent prompt

Build a new page in the speedrun visual style. Use Warm Stone (#ebe9e5) as the primary canvas, Pitch Black (#000000) for typography and solid CTAs, Gallery White (#ffffff) for cards and selected section bands, and Soft Graphite (#d3d1ce) for quiet dividers. Keep Mint Signal (#a4d7bc), Pool Cyan (#00c6c6), and blue accents such as #398cff for restrained gradient moments rather than broad surfaces. Set bold, tightly tracked sans-serif headings against compact body copy; use a condensed uppercase face for navigation, buttons, and eyebrows. Arrange content in spacious editorial sections with a clear image-and-text rhythm, rounded photo cards, and occasional asymmetry. Choose authentic founder or team photography, keep shadows minimal, and make the CTA hierarchy obvious without adding ornamental UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width photographic hero beneath the navigation, with lower-left copy and CTA. | primary application CTA | darkened full-bleed media, white headline, uppercase eyebrow |
| 2 | feature-grid | Centered section heading followed by three feature cards in a two-column measured section layout. | benefit scanning, feature comparison | white rounded cards, centered card copy, editorial imagery |
| 3 | cta | Single-column text block with stacked perk statements and action below. | secondary exploration CTA | hairline separators, bold black text, solid black button |
| 4 | feature-split | Three support columns paired with a subtle world-map visual and explanatory text. | regional support overview, international founder reassurance | light canvas, column headings, faint map graphic |
| 5 | newsletter | One-column measured section with heading and subscription invitation balanced by a form area. | newsletter signup | vivid blue-violet gradient, black bold heading, white form surface |
| 6 | gallery | Five-column portrait grid continuing into a second row beneath a section title. | people browsing, name and affiliation recognition | portrait tiles, compact captions, warm background |
| 7 | testimonials | Two-column testimonial row with founder photo and quotation text. | social proof, founder attribution | rounded photo, large bold quote, compact supporting copy |
| 8 | testimonials | Alternating two-column row with quotation copy beside founder photography. | social proof, program experience story | asymmetric image-text pairing, heavy quotation heading |
| 9 | testimonials | Two-column testimonial row with image and large quotation. | social proof, company outcome story | rounded photo, bold quote, small attribution |
| 10 | stats | Wide promotional strip with text, CTA, and scattered company marks. | portfolio exploration | soft multicolor gradient, company logos, black CTA |
| 11 | cta | White full-width section with a large typographic event title and attendance action. | event attendance CTA | oversized black display type, open white space, small gradient button |
| 12 | faq | White section with repeated question typography, founder image, and a lower-left FAQ link. | FAQ navigation | repeated bold text, image overlap, minimal CTA |
| 13 | footer | Compact white footer with legal links, social icons, and copyright. | legal navigation, social links | small muted text, simple icon row, minimal layout |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--block-gap: 5.5rem;
--color-primitive-azure-150: 4 42 57;
--color-primitive-azure-200: 3 53 73;
--color-primitive-azure-650: 1 171 228;
--color-primitive-azure-800: 128 209 254;
--color-primitive-black-alpha-100: 0,0,0,0.039;
--color-primitive-black-alpha-250: 0,0,0,0.102;
--color-primitive-black-alpha-300: 0,0,0,0.122;
--color-primitive-black-alpha-400: 0,0,0,0.161;
--color-primitive-black-alpha-600: 0,0,0,0.278;
--color-primitive-black-alpha-650: 0,0,0,0.322;
--color-primitive-black-alpha-700: 0,0,0,0.4;
--color-primitive-black-alpha-850: 0,0,0,0.639;
--color-primitive-black-100: 0 0 0;
--color-primitive-black-200: 29 27 23;
--color-primitive-black-250: 34 33 29;
--color-primitive-black-300: 39 38 35;
--color-primitive-black-400: 49 48 46;
--color-primitive-black-400-alpha-680: 49,48,46,0.68;
--color-primitive-blue-250: 1 61 119;
--color-primitive-blue-450: 1 108 204;
--color-primitive-blue-850: 198 213 253;
--color-primitive-crimson-200: 100 4 20;
--color-primitive-crimson-800: 254 179 173;
--color-primitive-cyan-150: 5 43 42;
--color-primitive-cyan-600: 3 157 209;
--color-primitive-cyan-900: 86 250 247;
--color-primitive-gold-250: 76 56 0;
--color-primitive-gold-850: 253 204 98;
--color-primitive-green-300: 0 83 0;
--color-primitive-green-900: 137 252 114;
--color-primitive-mintGreen-200: 0 57 24;
--color-primitive-mintGreen-450: 0 123 60;
--color-primitive-mintGreen-900: 102 255 153;
--color-primitive-purple-250: 65 38 106;
--color-primitive-purple-400: 112 61 192;
--color-primitive-purple-450: 128 69 223;
--color-primitive-purple-500: 145 77 255;
--color-primitive-purple-550: 161 98 255;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/speedrun-a16z-com