a16z speedrun operates on near-zero chroma: a 1% colorfulness canvas of cool grays, warm beige washes, and pure white surfaces, interrupted by one signature gradient (mint → cyan → blue → purple) that acts as a signal flare for action. The typography does all the emotional work — messinaSans at weights 600–900 with aggressively tight tracking on display sizes, paired with messinaSansCondensed for uppercase eyebrows that breathe outward. Layout alternates between full-bleed dark photography heroes (where the mint gradient becomes the only light source) and airy white card grids at 12px radius. Components are deliberately flat: no shadows, only hairline borders, with color reserved exclusively for brand expression and the single primary action.
#a162ffSupporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color; Decorative radial gradient bloom — used as ambient atmosphere behind text, never as a functional fill
#e5e7ebPage canvas, card borders, hairline dividers, image frames — the dominant neutral that defines the surface field
#000000Primary text, filled action buttons, hero overlays, footer — the anchor that gives the minimal palette its weight
#ffffffCard surfaces, content backgrounds, button text on dark fills
#e2dfd8Soft section background, alternate surface, and quiet card fill.
#5e5d5cMuted body text, secondary links, helper text — recedes so Obsidian can lead
243px · 900 · 1 · -17.98px trackingThe quick brown fox jumps
72px · 900 · 1 · -3.6px trackingThe quick brown fox jumps
64px · 900 · 1.2 · -3.2px trackingThe quick brown fox jumps
48px · 900 · 1.2 · -1.44px trackingThe quick brown fox jumps
32px · 900 · 1.23 · -0.96px trackingThe quick brown fox jumps
20px · 900 · 1.25 · -0.2px trackingThe quick brown fox jumps
18px · 600 · 1.11The quick brown fox jumps
16px · 600 · 1.5 · -0.48px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Display, headings, body, navigation — the only voice. Weight 900 at display sizes with -0.074em tracking creates a condensed, almost stenciled confidence. The 243px hero size is anti-scale: most sites stop at 72–96px, this pushes to nearly a quarter of the viewport height for maximum editorial impact
Uppercase eyebrow labels, category tags, button text — the counter-rhythm to messinaSans. Where the display font compresses inward, this one expands outward with +0.06em tracking, creating a typographic call-and-response where labels feel like they're announcing the headline
Messina Sans — detected in extracted data but not described by AI
8px12px12px8px4px7px8px12px16px20px24px32px36px40px44px56px80px93px96pxFilled button with full mint-to-violet linear gradient (#00c6c6 → #00b5f4 → #00a1ff → #398cff → #757aff → #906dff → #a162ff), 8px border-radius, 8px vertical / 24–56px horizontal padding, messinaSansCondensed 600 at 12–16px with 0.04–0.06em letter-spacing, uppercase white text. This is the ONLY chromatic fill in the entire system — every other button is neutral.
Solid #000000 background, 8px radius, 8px×24px padding, white messinaSansCondensed 600 uppercase text at 12–16px. Used when the gradient button is already present on a page and a second action is needed.
No background, no border. Obsidian text in messinaSans 600 at 16px, underline on hover. Used for LOG IN, footer links, and inline references where visual weight must be zero.
The word 'speedrun' rendered in messinaSans 700 italic with the full multicolor gradient as fill. The forward-slash separator and 'a16z' prefix remain Obsidian. This is the most recognizable brand asset — the gradient IS the logo.
Full-bleed dark photograph (stage/speaker imagery) with a left-aligned content stack: messinaSansCondensed eyebrow in gradient fill at 12px / 0.06em, display headline in #ffffff at 48–72px / weight 900, gradient APPLY NOW button below. The photo is desaturated to near-monochrome so the gradient button becomes the only color source.
12px border-radius, #ffffff surface on #e5e7eb canvas, no shadow. Image (12px radius) at top, then 24px internal padding containing: messinaSansCondensed 600 12px uppercase category label, messinaSans 700 20–32px heading, body text at 16px. Hairline #e5e7eb border may separate from canvas if needed.
messinaSansCondensed 600 at 12px, uppercase, 0.06em letter-spacing, Obsidian or gradient fill. Always precedes a heading and acts as a typographic drumbeat announcing the content below.
messinaSans 900 at 32–48px, -0.03em letter-spacing, Obsidian. Left-aligned with a 1px #e5e7eb hairline divider running the full content width below it.
messinaSans 900 at 64–243px, tight line-height (1.0), -0.05em to -0.074em letter-spacing. At 243px the tracking compresses to -18px, making each word read as a dense block of ink rather than spaced text.
Horizontal bar, #ffffff or transparent background, 8px padding, logo on the left, nav links centered (messinaSans 600 at 16px in Obsidian, 12–24px gap), APPLY NOW gradient button + LOG IN text link on the right. No border, no shadow — the nav floats on the page.
12px border-radius, 1px #e5e7eb border to define edge against the gray canvas. Used for event photos, founder portraits, and demo imagery throughout feature cards and grids.
3-column grid at desktop, 12px column-gap, 40px row-gap. Each cell is a Feature Card. Grid sits on the #e5e7eb canvas so white cards read as elevated without needing shadow.
#e5e7ebFull-page background — cool light gray, the visual ground plane
#ffffffContent cards, feature blocks, image containers sitting on canvas
#e2dfd8Gradient origin beige — used behind the hero text gradient to add warmth
#000000Dark photography heroes, filled buttons, footer — the elevated dark surface
No shadows. Elevation is expressed purely through value contrast: white cards on gray canvas, dark hero photos with overlaid white text, gradient buttons as the only chromatic elevation. The absence of drop-shadow is deliberate — shadows would soften the editorial, almost printed broadsheet feel.
Page model: max-width 1200px centered content, but hero sections break to full-bleed. The page alternates between two visual modes: (1) dark full-bleed photography heroes with left-aligned overlaid text, and (2) airy light sections with centered 1200px content on #e5e7eb canvas. Content sections use 40px vertical gaps. Feature grids are 3-column at desktop with 12px column gaps. Section rhythm follows: dark hero → white card grid → light text section → repeat. Navigation is a single top bar (not sticky), floating on the page with no shadow. The layout reads top-to-bottom like a broadsheet: a dramatic dark cover, then white 'pages' of content, each section announcing itself with a condensed-font eyebrow above a heavy-weight heading.
Photography is the secondary visual system, deployed at two scales: full-bleed dark hero imagery (founder/builder on stage, event spaces, pitch environments) and contained event photos within feature cards (12px radius, 1px gray border). All photography is treated with heavy desaturation or near-monochrome grading so the mint gradient CTA becomes the only color source in the hero viewport. The photographic style is candid, documentary, and slightly underexposed — it captures momentum, not polish. There is no illustration, no 3D render, no abstract graphic. Images serve to show the human/textural reality of building, not to decorate. Iconography is minimal: the wordmark itself is the primary visual mark, with functional icons (arrows, close) used sparingly in 1.5px Obsidian stroke.
**Quick Color Reference** - text (primary): #000000 - text (muted): #5e5d5c - background (page): #e5e7eb - background (card): #ffffff - border (hairline): #e5e7eb - accent (gradient): linear-gradient(90deg, #00c6c6, #00b5f4, #00a1ff, #398cff, #757aff, #906dff, #a162ff) - primary action: #000000 (filled action) **3-5 Example Component Prompts** 1. Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. **Feature card grid (3-column):** Canvas #e5e7eb. Cards: #ffffff, 12px radius, 24px internal padding, 1px #e5e7eb border. Each card: image at top (12px radius, 1px #e5e7eb border), then 16px gap, then category label (messinaSansCondensed 600, 12px, uppercase, 0.06em, #000000), then heading (messinaSans 700, 24px, -0.48px, #000000), then body (messinaSans 400, 16px, 1.5 line-height, #5e5d5c). Column gap: 12px, row gap: 40px. 3. **Top navigation bar:** White or transparent background, full-width. Left: gradient wordmark ('speedrun' in messinaSans 700 italic with multicolor gradient fill, 'a16z/' prefix in #000000). Center: nav links in messinaSans 600, 16px, #000000, 12px gap, uppercase. Right: gradient APPLY NOW button (same spec as hero CTA) + LOG IN ghost text link in messinaSans 600, 16px, #000000. 4. **Display headline section:** Canvas #e5e7eb. Eyebrow: messinaSansCondensed 600, 12px, uppercase, 0.06em, #000000, margin-bottom 20px. Headline: messinaSans 900, 48px, -1.44px letter-spacing, line-height 1.2, #000000. Hairline 1px #e5e7eb divider below, full content width. 5. **Card with embedded image and body content:** #ffffff surface, 12px radius, 12px internal padding. Image: 12px radius, 1px #e5e7eb border, full card width, 24px margin-bottom. Category label: messinaSansCondensed 600, 12px, uppercase, 0.06em, #000000. Title: messinaSans 700, 32px, -0.96px, #000000. Body: messinaSans 400, 16px, line-height 1.5, #5e5d5c.
One gradient, two modes of deployment: 1. **Full spectrum (mint→cyan→blue→violet):** Used exclusively for the logo wordmark, the primary CTA button, and eyebrow labels that need to feel 'live'. This is the brand's voice — deploying it elsewhere dilutes its signal. 2. **Violet radial bloom (#a162ff fading to transparent):** Used as ambient atmosphere behind hero text or as a subtle section wash. Always positioned at 0% horizontal, 0–8% vertical anchor. Never used as a full background or panel fill. The gradient direction is always left-to-right (90deg) for the linear version. Never vertical, never diagonal — the horizontal sweep reads as a 'launch' or 'run' motion.
Same near-monochrome editorial style with a single accent color for CTAs, and similar typographic confidence using heavy sans-serif at large display sizes
Same flat card-grid layout on a light gray canvas with 12px radii, and similar use of full-bleed dark photography heroes alternating with airy content sections
Same broadsheet editorial approach — heavy condensed type, generous whitespace, photography that feels like a magazine spread rather than a SaaS dashboard
Same dark-mode photography paired with gradient-accented CTAs, and similar commitment to a near-zero-chroma interface where a single gradient carries all the brand expression
Same minimalist fund/accelerator layout pattern — dark hero, white card grids, uppercase category labels above bold headlines, single accent gradient for action
Use the design exports or connect Musterlab to your AI.
