Fireworks AI

---
name: Fireworks AI
tagline: Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome.
author: webdesignhot
source_url: https://fireworks.ai
spec: design.md/v1.5
quality: curated
featured: false
categories: [ai, dev-tools]
tags: [light, orange, purple, sans, mono, fast, kinetic]
preview_swatch: ['#ffffff', '#6720ff', '#fa6927']
related: [anthropic, modal, mistral]
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'                  # canvas — pure white
  bg-soft: '#fafafa'              # softly tinted alternating band
  bg-deep: '#0a0a14'              # signature deep-purple-tinted dark band
  surface-soft: '#f4f4f7'         # softer section tint
  surface: '#ffffff'              # default content card
  surface-elevated: '#ffffff'
  surface-purple: '#f1ebff'        # tinted purple info surface
  surface-orange: '#fff2e8'        # tinted orange info surface
  surface-dark: '#0a0a14'         # dark CTA band / footer (deep-purple-tinted, not pure black)
  surface-dark-card: '#15152a'    # nested card on dark band
  text: '#0a0a14'                 # primary headlines — deep-purple-graphite
  text-body: '#3a3a4f'            # default running-text
  text-strong: '#15152a'          # emphasised paragraphs
  text-muted: '#6b6b85'           # captions, breadcrumbs
  text-faint: '#9c9cb3'           # tertiary fine-print
  text-on-dark: '#ffffff'
  text-on-dark-muted: '#c7c7d4'
  brand: '#6720ff'                # signature Fireworks purple — primary brand voltage
  brand-hover: '#5418d4'          # press / hover-darker variant
  brand-active: '#3f10a3'         # deep purple for active state
  brand-soft: '#f1ebff'            # tinted purple surface for badges
  brand-deep: '#2a0a78'            # darkest purple for type on brand-soft surface
  brand-orange: '#fa6927'          # secondary brand — kinetic spark accent
  brand-orange-hover: '#e25510'    # press / hover-darker for orange CTAs
  brand-orange-soft: '#fff2e8'    # tinted orange surface
  brand-orange-deep: '#a83905'    # deep orange for type on orange-soft surface
  on-brand: '#ffffff'             # white text on purple CTAs
  on-brand-orange: '#ffffff'      # white text on orange CTAs (just barely AA at large)
  on-light: '#0a0a14'
  link: '#6720ff'                 # inline links match brand purple
  link-hover: '#5418d4'
  border: '#e4e4eb'               # 1px hairline on cards
  border-strong: '#c4c4d1'        # divider on inputs
  border-soft: '#f4f4f7'          # subtle separator
  border-purple: '#6720ff'        # focus border
  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)'   # rare ambient purple glow
  shadow-glow-orange: 'rgba(250, 105, 39, 0.15)'   # rare ambient orange glow
  accent-emerald: '#10b981'       # success
  accent-rose: '#ef4444'          # error
  accent-amber: '#f59e0b'         # warning
  accent-cyan: '#06b6d4'          # rare info accent
  success: '#10b981'
  warning: '#f59e0b'
  danger: '#ef4444'
  info: '#06b6d4'
  code-keyword: '#6720ff'
  code-string: '#10b981'
  code-comment: '#9c9cb3'
  code-number: '#fa6927'

typography:
  display:
    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [400, 500, 600, 700]
    opentype-features: "'cv11', 'ss01'"
  body:
    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'JetBrains Mono, ui-monospace, SF Mono, Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-xl:        { size: 72, weight: 700, lineHeight: 1.05, tracking: '-2.5px',  family: display, opentype: "'ss01'" }
    display-lg:        { size: 56, weight: 700, lineHeight: 1.10, tracking: '-2px',    family: display }
    display-md:        { size: 40, weight: 600, lineHeight: 1.15, tracking: '-1.2px',  family: display }
    display-sm:        { size: 30, weight: 600, lineHeight: 1.20, tracking: '-0.6px',  family: display }
    title-lg:          { size: 24, weight: 600, lineHeight: 1.30, tracking: '-0.2px',  family: display }
    title-md:          { size: 20, weight: 600, lineHeight: 1.35, tracking: 0,         family: body }
    title-sm:          { size: 16, weight: 600, lineHeight: 1.40, tracking: 0,         family: body }
    body-lg:           { size: 18, weight: 400, lineHeight: 1.60, tracking: 0,         family: body }
    body-md:           { size: 16, weight: 400, lineHeight: 1.60, tracking: 0,         family: body }
    body-sm:           { size: 14, weight: 400, lineHeight: 1.55, tracking: 0,         family: body }
    caption:           { size: 13, weight: 500, lineHeight: 1.40, tracking: 0,         family: body }
    caption-uppercase: { size: 11, weight: 600, lineHeight: 1.40, tracking: '1.5px',   family: body, transform: uppercase }
    code-md:           { size: 14, weight: 400, lineHeight: 1.60, tracking: 0,         family: mono }
    code-sm:           { size: 12, weight: 400, lineHeight: 1.50, tracking: 0,         family: mono }
    button:            { size: 14, weight: 600, lineHeight: 1.0,  tracking: 0,         family: body }
    nav-link:          { size: 14, weight: 500, lineHeight: 1.40, tracking: 0,         family: body }
    stat-display:      { size: 64, weight: 700, lineHeight: 1.0,  tracking: '-2px',    family: display, notes: 'always orange or purple — kinetic latency callouts' }
    stat-unit:         { size: 16, weight: 500, lineHeight: 1.0,  tracking: 0,         family: body, notes: 'unit suffix to stat-display (ms, tok/s, ×)' }

radius:
  micro: 2
  xs: 4
  sm: 6
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  xxs: 4
  xs: 8
  sm: 12
  md: 16
  lg: 24
  xl: 32
  xxl: 48
  section: 96
  scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:
    backgroundColor: brand
    textColor: on-brand
    rounded: md
    padding: '12px 22px'
    height: 40
    use: 'every primary CTA — Try Fireworks, Get started — purple with white text'
  button-orange:
    backgroundColor: brand-orange
    textColor: on-brand-orange
    rounded: md
    padding: '12px 22px'
    height: 40
    use: 'kinetic-emphasis CTA paired with primary purple — used for benchmark-flavored CTAs ("See speeds")'
  button-secondary:
    backgroundColor: surface
    textColor: text
    rounded: md
    padding: '12px 22px'
    height: 40
    border: '1px solid #e4e4eb'
    use: 'paired secondary action'
  button-dark:
    backgroundColor: bg-deep
    textColor: text-on-dark
    rounded: md
    padding: '12px 22px'
    use: '"Talk to sales" or "View on GitHub" — dark authority CTA'
  button-text-link:
    backgroundColor: transparent
    textColor: link
  card-feature:
    backgroundColor: surface
    textColor: text
    rounded: lg
    padding: 32
    border: '1px solid #e4e4eb'
    use: 'standard feature card on white canvas'
  card-benchmark:
    backgroundColor: surface
    textColor: text
    rounded: lg
    padding: 32
    border: '1px solid #e4e4eb'
    use: 'benchmark chart card showing latency / tokens-per-sec — the brand''s signature visual'
  card-product:
    backgroundColor: surface-soft
    textColor: text
    rounded: lg
    padding: 24
    use: 'shows Fireworks playground / dashboard product chrome'
  card-code-window:
    backgroundColor: surface-dark
    textColor: text-on-dark
    rounded: lg
    padding: 24
    use: 'embeds Python / curl snippets — dark card on light canvas'
  card-pricing-tier:
    backgroundColor: surface
    rounded: lg
    padding: 32
    border: '1px solid #e4e4eb'
  card-pricing-tier-featured:
    backgroundColor: surface
    rounded: lg
    padding: 32
    border: '2px solid #6720ff'
    use: 'featured tier marked by 2px purple border'
  badge-pill:
    backgroundColor: surface-soft
    textColor: text
    rounded: pill
    padding: '4px 12px'
  badge-purple:
    backgroundColor: brand-soft
    textColor: brand-deep
    rounded: pill
    padding: '4px 12px'
    transform: uppercase
  badge-orange:
    backgroundColor: brand-orange-soft
    textColor: brand-orange-deep
    rounded: pill
    padding: '4px 12px'
    transform: uppercase
    use: 'speed/latency callouts — "FASTEST", "P95 12MS"'
  text-input:
    backgroundColor: surface
    textColor: text
    rounded: md
    padding: '10px 14px'
    height: 40
    border: '1px solid #e4e4eb'
  cta-band-dark:
    backgroundColor: surface-dark
    textColor: text-on-dark
    rounded: lg
    padding: 64
    use: 'pre-footer "Try Fireworks today" CTA — deep-purple-tinted dark band'
  top-nav:
    backgroundColor: bg
    textColor: text
    height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
  duration-fast: 100
  duration-standard: 180
  duration-slow: 280
  reduced-motion: 'respects prefers-reduced-motion: reduce — counter animations skipped, transforms removed'

breakpoints:
  mobile: 640
  tablet: 768
  desktop: 1024
  wide: 1440

shadows:
  ambient: 'rgba(10, 10, 20, 0.04) 0 1px 2px'
  standard: 'rgba(10, 10, 20, 0.08) 0 4px 12px'
  elevated: 'rgba(10, 10, 20, 0.12) 0 12px 32px -8px'
  deep: 'rgba(10, 10, 20, 0.16) 0 24px 48px -12px'
  glow-purple: 'rgba(103, 32, 255, 0.15) 0 12px 48px -8px'
  glow-orange: 'rgba(250, 105, 39, 0.15) 0 12px 48px -8px'
  ring: '0 0 0 3px rgba(103, 32, 255, 0.30)'

accessibility:
  contrast-text-on-bg: 18.4              # AAA — #0a0a14 on #ffffff
  contrast-text-on-brand: 6.6            # AAA — #ffffff on #6720ff
  contrast-text-on-brand-orange: 3.5     # AA at large only — #ffffff on #fa6927; pair with size ≥18px or weight ≥600 for AA
  contrast-body-on-bg: 9.4               # AAA — #3a3a4f on #ffffff
  contrast-muted-on-bg: 4.6              # AA — #6b6b85 on #ffffff
  focus-ring: '3px rgba(103, 32, 255, 0.30) ring with 1px solid #6720ff core'
  reduced-motion-honored: true

dark-mode: 'optional — Fireworks marketing is light-default; the in-product playground offers a dark theme on a deep-purple-tinted `#0a0a14` canvas'

lineage:
  summary: |
    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 `#6720ff` + orange `#fa6927`) 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 specifically signals
    "speed" — appearing on latency callout numbers, "FASTEST" badges,
    and tokens-per-second benchmark callouts. The deep-purple-tinted
    dark surface (`#0a0a14`, NOT pure black) keeps every dark surface
    brand-aligned. Where competitors lean clinical (Pinecone) or
    community (Weaviate) or pragmatic (OpenRouter), Fireworks commits
    to high-energy speed register — fast, kinetic, benchmark-driven.
  influences:
    - name: Vercel
      role: Single-accent dev-tool light-aesthetic baseline; dark-CTA-band-on-light pattern.
      url: https://vercel.com
    - name: Stripe
      role: Inter + negative-tracking display discipline; trust-via-restraint chromatic strategy (which Fireworks softens with the orange spark).
      url: https://stripe.com
    - name: Linear
      role: The deep-purple-tinted-not-pure-black dark surface treatment.
      url: https://linear.app
    - name: NVIDIA
      role: The "speed-of-inference benchmark" marketing register; latency callout chrome.
      url: https://www.nvidia.com
---

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### 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.

## 3. Typography Rules

### 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".

## 4. Component Stylings

### 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.

## 5. Layout Principles

### 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.

## 6. Shapes & Radius Scale

| 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 |

## 7. Depth & Elevation

| 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.

## 8. Interaction & Motion

### 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.

## 9. Accessibility & A11y

### 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.

## 10. Responsive Behavior

### 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.

## 11. Content & Voice

### 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.

## 12. Dark Mode & Theming

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.

## 13. Lineage & Influences

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

## 14. 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.

## 15. Agent Prompt Guide

### 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.