---
version: alpha
name: "Fireworks AI"
description: "Fireworks AI's marketing surface reads like a lab benchmark for LLM inference speed — a pure white canvas, Inter at weight 600 carrying every display headline, and a signature dual-spark palette of purple `#6720ff` (primary brand) and orange `#fa6927` (kinetic accent) that handle CTAs, latency-callout numbers, and the speed-of-inference benchmark chrome that IS the brand's marketing voltage. Embedded benchmark charts (ms latency, tokens/sec, P95 distributions) and code blocks (Python, curl) embed inside softly-elevated white cards; the dual-spark accents do the kinetic work that competitors hand to gradient halos. Where Pinecone leans clinical-cyan and Weaviate commits to community-green, Fireworks commits to a high-energy speed register — fast, kinetic, and unmistakably benchmark-driven."
colors:
  bg: "#ffffff"
  bg-soft: "#fafafa"
  bg-deep: "#0a0a14"
  surface-soft: "#f4f4f7"
  surface: "#ffffff"
  surface-elevated: "#ffffff"
  surface-purple: "#f1ebff"
  surface-orange: "#fff2e8"
  surface-dark: "#0a0a14"
  surface-dark-card: "#15152a"
  text: "#0a0a14"
  text-body: "#3a3a4f"
  text-strong: "#15152a"
  text-muted: "#6b6b85"
  text-faint: "#9c9cb3"
  text-on-dark: "#ffffff"
  text-on-dark-muted: "#c7c7d4"
  brand: "#6720ff"
  brand-hover: "#5418d4"
  brand-active: "#3f10a3"
  brand-soft: "#f1ebff"
  brand-deep: "#2a0a78"
  brand-orange: "#fa6927"
  brand-orange-hover: "#e25510"
  brand-orange-soft: "#fff2e8"
  brand-orange-deep: "#a83905"
  on-brand: "#ffffff"
  on-brand-orange: "#ffffff"
  on-light: "#0a0a14"
  link: "#6720ff"
  link-hover: "#5418d4"
  border: "#e4e4eb"
  border-strong: "#c4c4d1"
  border-soft: "#f4f4f7"
  border-purple: "#6720ff"
  shadow-color: "rgba(10, 10, 20, 0.04)"
  shadow-color-md: "rgba(10, 10, 20, 0.08)"
  shadow-color-lg: "rgba(10, 10, 20, 0.12)"
  shadow-glow-purple: "rgba(103, 32, 255, 0.15)"
  shadow-glow-orange: "rgba(250, 105, 39, 0.15)"
  accent-emerald: "#10b981"
  accent-rose: "#ef4444"
  accent-amber: "#f59e0b"
  accent-cyan: "#06b6d4"
  success: "#10b981"
  warning: "#f59e0b"
  danger: "#ef4444"
  info: "#06b6d4"
  code-keyword: "#6720ff"
  code-string: "#10b981"
  code-comment: "#9c9cb3"
  code-number: "#fa6927"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "48px"
  xl: "96px"
---

## Overview

## Overview

Fireworks AI's marketing surface reads like a lab benchmark for LLM inference speed — a pure white `#ffffff` canvas carrying confident graphite type, with a dual-spark accent palette (purple `#6720ff` for primary brand voltage, orange `#fa6927` for kinetic emphasis) that handles every CTA, every latency callout, every speed-of-inference benchmark moment. The dual-spark approach is unusual in AI infra — most competitors commit to a single brand color — but Fireworks needs both: purple for calm authority, orange for the kinetic spark of fast inference.

The defining visual artifact is the **benchmark chart card**. Fireworks shows actual inference latency (ms), tokens-per-second throughput, P50/P95 distributions, and side-by-side comparisons against competitors. Where Pinecone shows vector grids and LangChain shows architecture diagrams, Fireworks shows the actual benchmarks — because the brand value proposition is measured speed, the marketing chrome IS the measurement. Latency callouts use the orange brand color (`#fa6927`) at 64px / 700 to read as kinetic credibility moments.

The orange operates as the brand's "spark." It appears on latency callout numbers ("12ms", "180 tok/s"), on "FASTEST" badges, on tokens-per-second axis labels in benchmark charts, and as the secondary CTA when paired with the primary purple. The orange is scarce: it never carries body text, never appears as a background fill larger than a badge or a small chart segment. The scarcity at the element level + concentration on speed-callouts is what makes the orange feel like kinetic punctuation.

Type voice runs Inter at weight 600 for display headlines (700 only at the largest hero size), with negative tracking (`-0.6px` to `-2.5px`). Body type runs Inter at 400 with 1.60 line-height. JetBrains Mono carries every code surface; Python and curl snippets show how to call the inference API.

The page rhythm alternates light cards with the occasional deep-purple-tinted `#0a0a14` band (NOT pure black — every dark surface stays brand-aligned). The pre-footer CTA is the dramatic dark moment.

**Key Characteristics:**
- Pure white `#ffffff` canvas with deep-purple-graphite `#0a0a14` type. Marketing is light-default.
- Dual-spark palette: purple `#6720ff` (primary brand) + orange `#fa6927` (kinetic accent).
- Orange used scarcely on elements but concentrated on latency callouts and "FASTEST" badges.
- Inter at weight 600 (display) with negative tracking on every headline.
- Stat-display sizes (64px / 700) carry latency credibility moments — "12ms P50", "180 tok/s".
- JetBrains Mono on every code surface; code-window cards on deep-purple-tinted `#0a0a14`.
- Benchmark chart cards as the brand's signature visual artifact.
- Deep-purple-tinted `#0a0a14` (NOT pure black) for every dark surface.
- 1px `#e4e4eb` hairline borders; rare ambient purple/orange glow shadows.
- 8px radius on CTAs, 12px on cards, 9999px reserved for badges.
- Pre-footer CTA flips to deep-purple-tinted dark for kinetic contrast.

## Colors

### Primary
- **Bg / Canvas** (`#ffffff`): Pure white — runs every marketing page.
- **Text** (`#0a0a14`): Deep-purple-graphite — adds slight warmth and ties to the dark brand surface.
- **Brand / Primary CTA** (`#6720ff`): The Fireworks purple — every primary CTA, every link, every brand-critical purple moment.

### Brand & Dark
- **Brand** (`#6720ff`): Reserved for primary CTAs, link state, focus rings, featured-tier border.
- **Brand Hover** (`#5418d4`): Press / hover-darker variant.
- **Brand Active** (`#3f10a3`): Deep purple for pressed state.
- **Brand Deep** (`#2a0a78`): Darkest purple for type on `brand-soft` surface.
- **Brand Orange** (`#fa6927`): Secondary brand — kinetic spark accent. Used on latency callouts, "FASTEST" badges, tokens/sec benchmark labels.
- **Brand Orange Hover** (`#e25510`): Press / hover-darker for orange CTAs.
- **Brand Orange Deep** (`#a83905`): Deep orange for type on `brand-orange-soft` surface.
- **Bg Deep** (`#0a0a14`): Deep-purple-tinted near-black — dark CTA band, footer, code-window background. NOT pure black.

### Accent
The accent system is constrained. The only "accents" are the dual-spark purple + orange; everything below is in-product status only.
- **Accent Emerald** (`#10b981`): "Online" indicators inside benchmark dashboards.
- **Accent Rose** (`#ef4444`): "Down" / error indicators.
- **Accent Amber** (`#f59e0b`): Warning indicators.
- **Accent Cyan** (`#06b6d4`): Rare info accent inside docs callouts.

### Interactive
- **Link** (`#6720ff`): Inline body links match brand purple. Underlined.
- **Link Hover** (`#5418d4`): Hover darkens link.
- **Selected** (`rgba(103, 32, 255, 0.15)`): Selected text background — purple tint.
- **Disabled** (`#9c9cb3`): Disabled labels and tertiary text.

### Neutral Scale
- **Text** (`#0a0a14`): Headlines, primary type — deep-purple-graphite.
- **Text Strong** (`#15152a`): Emphasised paragraphs.
- **Text Body** (`#3a3a4f`): Default running-text.
- **Text Muted** (`#6b6b85`): Captions, breadcrumbs.
- **Text Faint** (`#9c9cb3`): Tertiary fine-print.
- **Text on Dark** (`#ffffff`): Headlines on dark CTA band.
- **Text on Dark Muted** (`#c7c7d4`): Body text on dark band.

### Surface & Borders
- **Surface Soft** (`#f4f4f7`): Section dividers, very-soft band tints.
- **Bg Soft** (`#fafafa`): Slightly tinted band for editorial alternation.
- **Surface** (`#ffffff`): Default content card.
- **Surface Purple** (`#f1ebff`): Tinted purple surface for info callouts.
- **Surface Orange** (`#fff2e8`): Tinted orange surface for speed callouts.
- **Surface Dark** (`#0a0a14`): Code-window background, dark CTA band, footer.
- **Surface Dark Card** (`#15152a`): Nested card on dark band.
- **Border** (`#e4e4eb`): 1px hairline on cards.
- **Border Strong** (`#c4c4d1`): Divider on input underlines.
- **Border Purple** (`#6720ff`): Focus border on inputs and 2px featured-tier border.

### Shadow Colors
Fireworks uses purple-tinted shadows at low alpha for general elevation, plus rare ambient purple/orange glow shadows on hero cards.
- **Shadow Color** (`rgba(10, 10, 20, 0.04)`): Ambient shadow.
- **Shadow Color Md** (`rgba(10, 10, 20, 0.08)`): Standard card shadow.
- **Shadow Color Lg** (`rgba(10, 10, 20, 0.12)`): Hover / modal entrance.
- **Shadow Glow Purple** (`rgba(103, 32, 255, 0.15)`): Rare ambient glow on hero hero CTA card.
- **Shadow Glow Orange** (`rgba(250, 105, 39, 0.15)`): Rare ambient glow on benchmark callout card.

### Semantic
- **Success** (`#10b981`): Confirmation toasts.
- **Warning** (`#f59e0b`): Caution states.
- **Danger** (`#ef4444`): Destructive actions.
- **Info** (`#06b6d4`): Informational notices.

## Typography

### Font Family
- **Primary**: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. Inter handles every text role.
- **Mono**: `JetBrains Mono, ui-monospace, SF Mono, Menlo, monospace`. Code blocks, latency labels, tokens/sec values inside benchmark charts.
- **OpenType features**: `'cv11'` and `'ss01'` toggled at display sizes.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-xl | Inter | 72 | 700 | 1.05 | -2.5px | ss01 | Homepage h1 ("The fastest LLM inference platform") |
| display-lg | Inter | 56 | 700 | 1.10 | -2px | — | Section heads on top of major bands |
| display-md | Inter | 40 | 600 | 1.15 | -1.2px | — | Sub-section heads, CTA-band headlines |
| display-sm | Inter | 30 | 600 | 1.20 | -0.6px | — | Card titles, pricing tier prices |
| title-lg | Inter | 24 | 600 | 1.30 | -0.2px | — | Pricing plan names |
| title-md | Inter | 20 | 600 | 1.35 | 0 | — | Card titles |
| title-sm | Inter | 16 | 600 | 1.40 | 0 | — | Small card titles, list labels |
| body-lg | Inter | 18 | 400 | 1.60 | 0 | — | Hero subhead |
| body-md | Inter | 16 | 400 | 1.60 | 0 | — | Default running-text |
| body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Footer body, fine-print |
| caption | Inter | 13 | 500 | 1.40 | 0 | — | Badge labels, captions |
| caption-uppercase | Inter | 11 | 600 | 1.40 | 1.5px | — | Section labels, eyebrows |
| stat-display | Inter | 64 | 700 | 1.0 | -2px | — | Latency callouts ("12ms", "180 tok/s") — orange or purple |
| stat-unit | Inter | 16 | 500 | 1.0 | 0 | — | Unit suffix to stat-display ("ms", "tok/s", "×") |
| code-md | JetBrains Mono | 14 | 400 | 1.60 | 0 | — | Code blocks |
| code-sm | JetBrains Mono | 12 | 400 | 1.50 | 0 | — | Inline code |
| button | Inter | 14 | 600 | 1.00 | 0 | — | Standard button labels |
| nav-link | Inter | 14 | 500 | 1.40 | 0 | — | Top-nav menu items |

### Principles
- **Display weights stay at 600–700.** 700 reserved for the homepage h1; 600 below.
- **Negative tracking is essential** for display sizes.
- **Body and labels stay at 400 / 500 / 600.**
- **Body line-height stays at 1.60.** Documentation-tall.
- **Mono everywhere code appears.** Latency values inside benchmark charts also use mono — "12.3ms" reads more credibly than "12.3ms" in Inter.
- **Stat-display sizes (64px / 700) carry kinetic credibility.** "12ms P50", "180 tok/s", "5× faster" — always orange or purple, never another color.
- **Stat-unit pairs with stat-display.** "12" in 64px / 700 + "ms" in 16px / 500 — the unit stays smaller and lighter than the number.
- **Caption-uppercase carries section structure.** 11px uppercase eyebrow at 1.5px tracking on every band — "INFERENCE", "MODELS", "BENCHMARKS", "PRICING".

## Layout

### Spacing System
Base unit **4px**. Tokens: `xxs:4 · xs:8 · sm:12 · md:16 · lg:24 · xl:32 · xxl:48 · section:96`. 96px section padding, 32px feature card padding, 24px code-window padding.

### Grid & Container
Max content width **1280px** centered. Editorial body uses a 12-column grid; hero often uses a 6/6 split (h1 + subhead left, benchmark card or code-window right). Feature card grids run 3-up at desktop. Pricing 3-up.

### Whitespace Philosophy
Fireworks uses balanced, slightly energetic whitespace. The page never feels cramped, but the rhythm has a slight forward-lean that matches the speed-of-inference brand voice.

### Section Cadence
White hero band (with benchmark callouts) → benchmark chart card → light feature card grid → softly-tinted band with stat callouts → product mockup band → customer-logo strip → pricing → light feature card → deep-purple-tinted `#0a0a14` pre-footer CTA → dark footer.

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hamburger nav; hero h1 72→40px; benchmark card stacks below; feature grids 1-up; pricing 1-up |
| Tablet | 640–1024px | Top nav tightens; feature cards 2-up; pricing 2-up; hero h1 56px |
| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-up pricing; hero h1 72px |
| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |

### Touch Targets
Primary CTA min 40 × 40px. Icon-only button 36 × 36 with adequate hit area. Input height 40px.

### Collapsing Strategy
Top nav collapses to hamburger at < 768px. Hero 6/6 grid collapses to single-column. Benchmark charts retain proportions; legend wraps below.

### Image Behavior
Code blocks stay at fixed font-size; horizontal scroll on mobile. Customer logos retain native widths.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow, no border | Body sections, top nav, hero text |
| 1 — Soft hairline | 1px `#e4e4eb` border | Standard feature cards, pricing tiers |
| 2 — Soft shadow | 1px border + ambient shadow | Cards on hover |
| 3 — Standard shadow | 1px border + standard shadow | Featured cards, modal entrance |
| 4 — Brand glow | 1px border + glow-purple shadow | Hero CTA card, featured benchmark card |
| 5 — Featured | 2px solid `#6720ff` border | Featured pricing tier |
| 6 — Modal | Standard shadow + backdrop dim 60% | Dialogs, dropdowns |

### Shadow Philosophy
Fireworks uses graphite-tinted shadows at low alpha for general elevation, plus rare ambient brand-tinted glows (`shadow-glow-purple`, `shadow-glow-orange`) on hero or benchmark callout cards. The brand glow is the kinetic "spark" of the brand: used scarcely (one or two cards per page), it suggests speed without being theatrical.

## Shapes

| Tier | Token | Value | Use |
|---|---|---|---|
| Micro | micro | 2px | Reserved |
| XS | xs | 4px | Badge accents, syntax-highlight chips |
| Standard | sm | 6px | Small inline buttons, tight inputs |
| Comfortable | md | 8px | Standard CTA buttons, text inputs |
| Large | lg | 12px | Content cards, code-window cards, pricing tiers |
| Featured | xl | 16px | Hero shells |
| Pill | pill | 9999px | Badges, avatars |

## Components

### Buttons (5 variants)

**`button-primary`** — The signature purple CTA. Background `#6720ff`, text `#ffffff`, Inter 14px / 600, padding 12px × 22px, height 40px, radius 8px. Hover: `#5418d4` over 100ms; subtle 1px lift via translateY(-1px).

**`button-orange`** — Kinetic-emphasis orange CTA. Background `#fa6927`, text `#ffffff`, same shape and padding as primary. Used for benchmark-flavored CTAs: "See speeds", "View benchmarks". Hover: `#e25510`. The orange CTA is reserved for moments where the brand wants to emphasize "speed" over "primary action."

**`button-secondary`** — White-bordered button. Background `#ffffff`, text `#0a0a14`, 1px solid `#e4e4eb` border, same padding/radius. Hover: background fades to `#f4f4f7`.

**`button-dark`** — Dark CTA on white surface. Background `#0a0a14`, text `#ffffff`. Used for "Talk to sales" or "View on GitHub" — the dark authority CTA.

**`button-text-link`** — Pure text link in `#6720ff` with hover-darken.

### Cards

**`card-feature`** — Standard white feature card. Background `#ffffff`, radius 12px, padding 32px, 1px solid `#e4e4eb` border.

**`card-benchmark`** — The brand's signature visual chrome — a benchmark chart card. Background `#ffffff`, radius 12px, padding 32px, 1px solid `#e4e4eb` border. Contains a chart (latency-over-time, tokens/sec bar chart, or P50/P95 comparison) with `#fa6927` orange data lines/bars for Fireworks performance, `#9c9cb3` gray for competitor benchmarks. Y-axis labels in mono (`#6b6b85` 12px). Title in title-md, stat-display callout for the headline metric ("180 tok/s P50") in orange. Optional `shadow-glow-orange` ambient glow on hover.

**`card-product`** — Card showing actual Fireworks playground / dashboard UI. Background `#fafafa`, radius 12px, padding 24px.

**`card-code-window`** — Dark card showing a Python or curl code block. Background `#0a0a14` (deep-purple-tinted, not black), code in JetBrains Mono with syntax highlighting (keywords purple-shifted to `#a78bfa`, strings `#86efac`, comments `#9c9cb3`, numbers orange-shifted to `#fb923c`), radius 12px, padding 24px. Top-left "Python" or "curl" tab indicator.

**`card-pricing-tier`** — Standard pricing tier card. Background `#ffffff`, radius 12px, padding 32px, 1px solid `#e4e4eb` border.

**`card-pricing-tier-featured`** — Featured tier marked by 2px solid `#6720ff` border. The thicker purple border alone is the featured signal.

### Badges & Pills

**`badge-pill`** — Small light pill label. Background `#f4f4f7`, text `#0a0a14`, caption typography, radius 9999.

**`badge-purple`** — Purple tinted pill for brand callouts. Background `#f1ebff`, text `#2a0a78`, caption-uppercase typography, radius 9999.

**`badge-orange`** — Orange tinted pill for speed/latency callouts ("FASTEST", "P95 12MS", "180 TOK/S"). Background `#fff2e8`, text `#a83905`, caption-uppercase typography, radius 9999. The orange badge is the brand's kinetic punctuation.

### Inputs / Forms

**`text-input`** — White text input. Background `#ffffff`, radius 8px, padding 10px × 14px, height 40px, 1px solid `#e4e4eb` border.

**`text-input-focused`** — 3px `rgba(103, 32, 255, 0.30)` ring with 1px solid `#6720ff` core.

### Navigation

**`top-nav`** — White nav bar pinned to top, 64px tall, background `#ffffff`. Logo + "Fireworks AI" wordmark left, primary horizontal menu (Models, Benchmarks, Pricing, Customers, Docs) center, right-side: "Sign in" + purple `button-primary` ("Try Fireworks").

### Decorative

**`stat-callout`** — Inline orange or purple stat numbers paired with units ("12ms", "180 tok/s", "5×"). `stat-display` typography (64px / 700 / -2px) for the number + `stat-unit` (16px / 500) for the unit. The unit hangs to the right of the number. Used flat in stat strips, not in cards.

**`speed-comparison`** — Side-by-side bar chart comparing Fireworks vs competitors on tokens/sec. `#fa6927` orange bars for Fireworks, `#9c9cb3` gray bars for competitors. Y-axis in mono. Used inside `card-benchmark`.

**`cta-band-dark`** — Pre-footer "Try Fireworks today" CTA band. `#0a0a14` deep-purple-tinted surface, 64px padding. h2 in display-md white, body subhead in `#c7c7d4`, primary `#6720ff` purple CTA + secondary white-bordered CTA.

**`customer-logo-strip`** — Horizontal monochrome customer-logo strip. Background `#ffffff`, logos in `#6b6b85`, padding 32px vertical.

### Easing Curves
- **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default.
- **Emphasized ease**: `cubic-bezier(0.2, 0, 0, 1)` — CTA hover, modal entrances.
- **Spring ease**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — used on stat-callout count-up animations for slight overshoot. Reserved for kinetic moments only.

### Duration Buckets
- **Fast (100ms)**: Color and opacity transitions — slightly faster than 120ms standard, befitting the speed brand.
- **Standard (180ms)**: Card hover lifts, dropdown opens.
- **Slow (280ms)**: Modal entrance, scroll reveals.

### Per-Component Micro-States
- **Button hover**: Purple CTAs darken `#6720ff` → `#5418d4` over 100ms; 1px lift.
- **Button-orange hover**: Orange CTAs darken `#fa6927` → `#e25510` over 100ms; 1px lift.
- **Card hover**: TranslateY(-2px) over 180ms; shadow intensifies one tier.
- **Benchmark-card hover**: Shadow intensifies + brand-orange glow fades in (200ms).
- **Stat-callout in view**: Numbers count up from 0 to final value over 800ms with spring ease (overshoot then settle). The kinetic count-up is the brand's signature animation.
- **Code-window hover**: No state change.
- **Link hover**: Color darkens; underline thickens.
- **Input focus**: 3px purple ring expands.

### Page Transitions
Standard browser navigation. Section-on-scroll reveals are 280ms fade-in-up.

### Reduced Motion
Honored — stat-callout count-up animations skipped (final values render immediately), all transforms removed, transitions reduced to 80ms opacity-only.

### Contrast Pairs
- **Text on bg**: `#0a0a14` on `#ffffff` = **18.4** — AAA.
- **Body on bg**: `#3a3a4f` on `#ffffff` = **9.4** — AAA.
- **Muted on bg**: `#6b6b85` on `#ffffff` = **4.6** — AA.
- **On-brand on brand**: `#ffffff` on `#6720ff` = **6.6** — AAA.
- **On-brand-orange**: `#ffffff` on `#fa6927` = **3.5** — AA at large only. Orange CTAs use 14px / 600 button label (qualifies as bold-large).
- **Brand-deep on brand-soft**: `#2a0a78` on `#f1ebff` = **11.0** — AAA.
- **Brand-orange-deep on brand-orange-soft**: `#a83905` on `#fff2e8` = **6.4** — AAA.

### Focus Indicators
3px `rgba(103, 32, 255, 0.30)` ring with 1px solid `#6720ff` core.

### ARIA Patterns
- **Buttons**: Native `<button>`; icon-only carry `aria-label`.
- **Code blocks**: `<pre><code>` with `aria-label="Python example"`.
- **Benchmark charts**: SVG with `<title>` and `<desc>` describing the data; tabular fallback provided for screen readers.
- **Stat callouts**: Use `aria-label="180 tokens per second"` so the unit reads correctly.
- **Navigation**: `<nav aria-label="Primary">`.
- **Dialog**: `role="dialog"` + `aria-labelledby`.

### Keyboard Navigation
Tab order follows reading order. Skip-link to `<main>`. Modal trap focus + Escape closes.

### Screen Reader Hints
Stat-callout count-up animations don't change announced value (final value is announced once). Benchmark charts have textual fallback ("Fireworks: 180 tok/s, Competitor A: 64 tok/s, Competitor B: 42 tok/s").

### Reduced Motion Handling
Honored — count-up skipped, all transforms removed, glow shadows static.

### Tone
**Speed-led, benchmark-driven, technically confident.** Fireworks writes for engineers who care about inference latency and throughput. Headlines state benchmarks as facts ("180 tokens/sec on Llama 3.1 70B"); body copy supports with P50/P95 distributions, comparison charts, and architecture details.

### Microcopy Patterns
- **CTA verbs**: "Try Fireworks", "Get started", "View benchmarks", "Talk to sales", "Read the docs". The "View benchmarks" is particularly Fireworks — speed as the primary value prop.
- **Section labels**: Uppercase eyebrow — "INFERENCE", "MODELS", "BENCHMARKS", "PRICING".
- **Stat numbers**: Always paired with units — "180 tok/s", "12ms P50", "5× faster", "99.99% SLA".
- **Feature copy**: Verb-first ("Serve any model fast", "Scale automatically", "Pay per token").

### Empty States
Playground product UI: "No requests yet — try a model in the playground or generate an API key" with purple link.

### Error Messages
**Pattern**: `<icon-x in #ef4444> + "What went wrong" + "What to try next"`. Example: "Model not available — try `llama-3.1-70b-instruct` or check status page."

### Success Confirmations
Toast in `text` over `surface` with success accent stripe. "API key created — copy now." Auto-dismiss 4s.

Fireworks marketing is **light-default**. The in-product playground supports a dark theme on a deep-purple-tinted `#0a0a14` canvas. Tokens map: `bg: #0a0a14`, `surface: #15152a`, `border: #2a2a45`, `text: #ffffff`, `text-body: #c7c7d4`, `brand: #6720ff` (unchanged), `brand-orange: #fa6927` (unchanged), `link: #a78bfa` (lightened purple). Code-window cards retain `#0a0a14` background in both themes.

Fireworks AI's marketing aesthetic descends from the **kinetic benchmark** lineage — brands that compete on measurable speed and use motion + bright accents to communicate that speed visually. The dual-spark palette (purple + orange) is unusual in AI infra: most competitors commit to a single brand voltage, but Fireworks needs both — purple for primary brand identity (calm authority), orange for kinetic emphasis (the "spark" of fast inference).

The orange-as-speed-signal is borrowed from racing/automotive marketing tradition (think Porsche signal-yellow, Ferrari red) translated into AI infra. The benchmark-chart-as-marketing-chrome borrows from NVIDIA's GPU-marketing tradition. The 600-weight Inter with negative tracking tracks the modern dev-tool typographic discipline (Stripe, Vercel). The deep-purple-tinted `#0a0a14` dark surface (NOT pure black) is borrowed from Linear — keeps every dark surface brand-aligned.

The kinetic stat-callout count-up animation with spring ease is the brand's signature motion: numbers "race" to their final value. This is the brand's most distinctive contribution — the marketing chrome literally embodies the speed value proposition.

- **Vercel** — Single-accent dev-tool light-aesthetic baseline. https://vercel.com
- **Stripe** — Inter + negative-tracking display discipline. https://stripe.com
- **Linear** — Deep-purple-tinted-not-pure-black dark surface treatment. https://linear.app
- **NVIDIA** — Speed-of-inference benchmark marketing register; latency callout chrome. https://www.nvidia.com
- **Tailwind CSS** — Inter + JetBrains Mono recipe. https://tailwindcss.com

## Do's and Don'ts

### Do
- Anchor every page on the white `#ffffff` canvas. Marketing is light-default.
- Use the dual-spark palette: purple `#6720ff` for primary brand voltage, orange `#fa6927` for kinetic emphasis (latency callouts, "FASTEST" badges).
- Reserve the orange for speed-flavored moments — never as a general accent or background fill.
- Use Inter at weight 600 (display) with negative tracking on every headline.
- Show actual benchmark charts (latency, tokens/sec, P50/P95) as the primary marketing chrome.
- Use stat-callout numbers (64px / 700) paired with stat-unit suffix (16px / 500) for kinetic credibility.
- Use deep-purple-tinted `#0a0a14` (NOT pure black) for every dark surface.
- Use the kinetic count-up animation with spring ease on stat-callouts — the brand's signature motion.
- Use orange tinted badges for speed callouts ("FASTEST", "180 TOK/S", "P95 12MS").
- Use a 2px solid `#6720ff` border to mark the featured pricing tier.

### Don't
- Don't use the orange as a general accent. It's reserved for speed/kinetic moments only.
- Don't switch the marketing canvas to pure black mid-page. Use deep-purple-tinted `#0a0a14`.
- Don't introduce a third brand color. Fireworks is purple + orange + grayscale.
- Don't bold display weight beyond 700.
- Don't replace benchmark charts with abstract illustrations.
- Don't use white text on orange CTAs at small sizes — the contrast is only AA at large. Pair with size ≥18px or weight ≥600.
- Don't use rounded-pill buttons for primary CTAs. Standard radius is 8px.
- Don't add gradient halos to either spark color. Brand glow shadows are reserved for hero/benchmark cards only.
- Don't use the spring count-up animation on non-numeric content. It's reserved for stat callouts.

### Quick Color Reference
```
Bg / Canvas:        #ffffff (pure white)
Surface Soft:       #f4f4f7 (section divider)
Border:             #e4e4eb (1px hairline)
Text:               #0a0a14 (deep-purple-graphite)
Text Body:          #3a3a4f (running-text)
Text Muted:         #6b6b85 (captions)
Brand:              #6720ff (Fireworks purple — primary)
Brand Orange:       #fa6927 (kinetic spark — speed callouts)
On-Brand:           #ffffff (white text on purple)
On-Brand-Orange:    #ffffff (white text on orange — pair with bold/large)
Surface Dark:       #0a0a14 (deep-purple-tinted, NOT pure black)
```

### Example Component Prompts

1. "Create a Fireworks AI hero band on `#ffffff` canvas, with an Inter 72px / 700 / -2.5px tracking `#0a0a14` headline ('The fastest LLM inference platform'), 18px / 400 `#3a3a4f` subhead, and a purple `#6720ff` primary CTA ('Try Fireworks') paired with a white-bordered secondary CTA ('View benchmarks'). Right side: a 12px-radius white benchmark card with a tokens/sec bar chart, `#fa6927` orange Fireworks bar at 180 tok/s, gray competitor bars; stat-callout '180 tok/s' in orange Inter 64px / 700 with 'P50' label."

2. "Design a benchmark chart card. `#ffffff` background, 1px solid `#e4e4eb` border, 12px radius, 32px padding. Title 'Llama 3.1 70B inference speed' in title-md. Bar chart with `#fa6927` orange bars for Fireworks (180 tok/s), `#9c9cb3` gray bars for competitors. Y-axis labels in JetBrains Mono 12px `#6b6b85`. Above the chart: a 64px / 700 orange stat-display '180 tok/s' with 16px / 500 'P50' suffix."

3. "Build a 3-column feature card grid on `#ffffff`. Each card: `#ffffff` background, 1px solid `#e4e4eb` border, 12px radius, 32px padding, `#0a0a14` 20px / 600 title, `#3a3a4f` 16px body. Each card carries a small 11px / 600 / 1.5px uppercase eyebrow ('INFERENCE', 'MODELS', 'BENCHMARKS')."

4. "Compose a stat-callout strip with three numbers in Inter 64px / 700 / `#fa6927` orange: '180' + 'tok/s' unit, '12' + 'ms' unit, '5×' + 'faster' unit. Each pair stacked above an 11px / 600 uppercase `#6b6b85` label ('THROUGHPUT', 'P50 LATENCY', 'VS COMPETITION'). 96px vertical padding."

5. "Compose a pricing grid with 3 tiers on `#ffffff`. Two standard `#ffffff` cards (12px radius, 32px padding, 1px solid `#e4e4eb` border) and one featured tier marked with a 2px solid `#6720ff` border."

6. "Design a pre-footer dark CTA band: full-bleed `#0a0a14` deep-purple-tinted background (NOT black), 64px padding. Inter 40px / 600 / -1.2px tracking `#ffffff` headline ('Try Fireworks today'), 16px / 400 `#c7c7d4` subhead, primary `#6720ff` purple CTA ('Get started') + secondary white-bordered CTA ('Talk to sales')."

### Iteration Guide
1. Start with the white canvas. Marketing is light-default.
2. Use purple as the primary brand voltage. Use orange as the kinetic spark — only for speed/latency moments.
3. Show benchmarks. The brand value prop is measured speed; the marketing chrome IS the measurement.
4. Use stat-callouts (64px / 700) with paired units (16px / 500) for kinetic credibility moments.
5. Use deep-purple-tinted `#0a0a14` for any dark surface. Pure black breaks the brand.
6. Code always lives on `#0a0a14`. Light-on-light code blocks break the idiom.
7. Use the kinetic count-up animation with spring ease on stat-callouts. It's the brand's signature motion.
8. Brand glow shadows (`shadow-glow-purple`, `shadow-glow-orange`) are reserved for hero/benchmark cards only — don't apply to every card.
9. The pre-footer CTA is the page's one dramatic dark moment.