--- version: alpha name: "RunPod" description: "RunPod's marketing surface reads like an accessible GPU cloud workshop — a deep slate `#0e1a2b` canvas, Inter at weight 600 carrying every display headline, and a signature `#673ab7` Material-purple that handles primary CTAs, link state, and the GPU-pricing-grid chrome that RunPod turns into its primary marketing artifact. Embedded GPU pricing tables (RTX 4090, A100, H100, MI300X with hourly rates) and code blocks (Python, Docker) establish the GPU-cloud credibility; the purple operates as friendly brand voltage in a category dominated by enterprise cyans and corporate blues. Where AWS and GCP lean toward enterprise sterility, RunPod commits to a more approachable purple-on-slate register — accessible, friendly, and unmistakably GPU-pricing-driven." colors: bg: "#0e1a2b" bg-deep: "#080f1a" surface-soft: "#142133" surface: "#1a293d" surface-elevated: "#243349" surface-purple-soft: "#2d1d4a" surface-light: "#f8fafc" text: "#ffffff" text-body: "#cbd5e1" text-strong: "#f1f5f9" text-muted: "#94a3b8" text-faint: "#64748b" text-on-light: "#0e1a2b" brand: "#673ab7" brand-hover: "#5e35b1" brand-active: "#512da8" brand-soft: "#3d2768" brand-soft-light: "#ede7f6" brand-deep: "#311b92" brand-light: "#9575cd" on-brand: "#ffffff" on-dark: "#ffffff" link: "#9575cd" link-hover: "#b39ddb" border: "#243349" border-strong: "#334155" border-soft: "#1a293d" border-purple: "#673ab7" shadow-color: "rgba(8, 15, 26, 0.50)" shadow-color-md: "rgba(8, 15, 26, 0.60)" shadow-glow-purple: "rgba(103, 58, 183, 0.20)" accent-emerald: "#22c55e" accent-rose: "#ef4444" accent-amber: "#f59e0b" accent-cyan: "#06b6d4" success: "#22c55e" warning: "#f59e0b" danger: "#ef4444" info: "#06b6d4" code-keyword: "#9575cd" code-string: "#86efac" code-comment: "#64748b" code-number: "#fbbf24" gpu-tier-low: "#22c55e" gpu-tier-mid: "#f59e0b" gpu-tier-high: "#ef4444" 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 RunPod's marketing surface reads like an accessible GPU cloud workshop — a deep slate `#0e1a2b` canvas (NOT pure black, NOT pure navy) carrying confident white type, with one signature purple `#673ab7` (Material-deep-purple) that handles every primary CTA, every link, every focus ring. The slate canvas is RunPod's distinctive surface choice: softer than Linear's near-black, less corporate than enterprise navy, sitting in the "developer-friendly dark" register that signals "this is a tool you can actually use, not a hyperscaler procurement portal." The defining visual artifact is the **dense GPU pricing table**. RunPod lists every available GPU — RTX 4090, A100 80GB, H100, MI300X, A6000, L40S, etc. — with VRAM, hourly rate, region availability, and tier (community/spot, on-demand, reserved) in a JetBrains Mono-rendered table. The table IS the brand's primary marketing chrome. Where Pinecone shows vector-grids and Fireworks shows benchmark charts, RunPod shows the actual GPU price catalog — because RunPod's value proposition is transparent GPU access, the marketing makes that transparency visible. Color stripes mark GPU tiers: a thin (2px) left-side stripe color-codes each row by tier — green `#22c55e` for community/spot (cheapest), amber `#f59e0b` for standard on-demand, red `#ef4444` for high-end (H100, MI300X). The stripe is informational, not decorative — it lets users scan the pricing table for their tier preference at a glance. Type voice runs Inter at weight 600 for display headlines (700 only at the largest hero size), with negative tracking (`-0.6px` to `-2px`). Body type runs Inter at 400 with 1.60 line-height. JetBrains Mono carries every code surface and every GPU price callout — `$0.34/hr` reads more credibly in mono than in Inter. The page rhythm is monolithic dark canvas top to bottom — RunPod ships only a dark marketing theme. Section padding stays at 96px; card padding at 32px for feature cards and 24px for code-window cards. **Key Characteristics:** - Deep slate `#0e1a2b` canvas (NOT pure black, NOT navy) with white type. Marketing is dark-only. - Signature `#673ab7` Material-deep-purple for primary CTAs, links, focus rings, featured-tier border. - Inter at weight 600 (display) with negative tracking on every headline. - JetBrains Mono on every code surface AND every GPU price callout. - Dense GPU pricing table as the brand's signature visual artifact. - Tier color stripes (green/amber/red) indicate GPU tier at a glance in the pricing table. - 1px `#243349` hairline borders on cards. - 8px radius on CTAs, 12px on cards, 9999px reserved for badges. - Pre-footer CTA stays on the same dark canvas — no contrast band needed since the page is already dark. - Lighter purple `#9575cd` for inline body links (legibility on dark canvas). ## Colors ### Primary - **Bg / Canvas** (`#0e1a2b`): Deep slate-blue, sits between near-black and navy. The brand's distinctive dark surface. - **Text** (`#ffffff`): Pure white — all headlines and primary type. - **Brand / Primary CTA** (`#673ab7`): The RunPod Material-deep-purple — every primary CTA, every brand-critical accent. ### Brand & Dark - **Brand** (`#673ab7`): Reserved for primary CTAs, focus rings, featured-tier border. - **Brand Hover** (`#5e35b1`): Press / hover-darker variant. - **Brand Active** (`#512da8`): Deep purple for pressed/active state. - **Brand Deep** (`#311b92`): Darkest purple. - **Brand Light** (`#9575cd`): Lighter purple for inline body links and accents on dark canvas. - **Brand Soft** (`#3d2768`): Tinted purple surface for badges (dark-mode tinted). - **Bg Deep** (`#080f1a`): Near-black footer band — slightly deeper than canvas. ### Accent RunPod's accent system is constrained to GPU-tier color stripes and product-status indicators. - **GPU Tier Low** (`#22c55e`): Green stripe on community/spot GPU rows. - **GPU Tier Mid** (`#f59e0b`): Amber stripe on standard on-demand rows. - **GPU Tier High** (`#ef4444`): Red stripe on high-end (H100, MI300X) rows. - **Accent Emerald** (`#22c55e`): "Available" GPU status indicator. - **Accent Rose** (`#ef4444`): "Unavailable" status indicator. - **Accent Amber** (`#f59e0b`): "Scarce" warning. - **Accent Cyan** (`#06b6d4`): Rare info accent. ### Interactive - **Link** (`#9575cd`): Inline body links use lightened purple for legibility on dark — 6.8 contrast on bg. Underlined. - **Link Hover** (`#b39ddb`): Hover lightens further. - **Selected** (`rgba(103, 58, 183, 0.20)`): Selected text background — purple tint. - **Disabled** (`#64748b`): Disabled labels and tertiary text. ### Neutral Scale - **Text** (`#ffffff`): Headlines, primary type. - **Text Strong** (`#f1f5f9`): Emphasised paragraphs. - **Text Body** (`#cbd5e1`): Default running-text on dark. - **Text Muted** (`#94a3b8`): Captions, breadcrumbs, table secondary cells. - **Text Faint** (`#64748b`): Tertiary fine-print. ### Surface & Borders - **Surface Soft** (`#142133`): Section dividers, very-soft band tints. - **Surface** (`#1a293d`): Default content card. - **Surface Elevated** (`#243349`): Nested cards, hover states. - **Surface Purple Soft** (`#2d1d4a`): Tinted purple surface for featured rows in pricing tables. - **Surface Light** (`#f8fafc`): Rare light surface for testimonial sections (used 0–1 times per page). - **Border** (`#243349`): 1px hairline on cards. - **Border Strong** (`#334155`): Divider on input underlines, table rows. - **Border Purple** (`#673ab7`): Focus border on inputs and 2px featured-tier border. ### Shadow Colors RunPod uses deep slate-tinted shadows at moderate alpha — appropriate for the dark canvas. Shadows are essential here because the dark surface needs lifting cues that color-stepping alone can't provide. - **Shadow Color** (`rgba(8, 15, 26, 0.50)`): Ambient shadow for subtle elevation. - **Shadow Color Md** (`rgba(8, 15, 26, 0.60)`): Standard card shadow. - **Shadow Glow Purple** (`rgba(103, 58, 183, 0.20)`): Rare ambient glow on hero CTA card or featured pricing tier. ### Semantic - **Success** (`#22c55e`): Confirmation toasts, "active pod" indicators. - **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, GPU price callouts, model identifiers, terminal output. - **OpenType features**: `'cv11'` and `'ss01'` toggled at display sizes. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-xl | Inter | 64 | 700 | 1.05 | -2px | ss01 | Homepage h1 ("GPU cloud built for AI") | | display-lg | Inter | 52 | 700 | 1.10 | -1.5px | — | Section heads on top of major bands | | display-md | Inter | 40 | 600 | 1.15 | -1px | — | 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, GPU tile headlines | | 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 | | gpu-price | Inter | 24 | 700 | 1.0 | -0.4px | — | GPU hourly price in pricing table — paired with /hr suffix | | gpu-price-unit | Inter | 13 | 500 | 1.0 | 0 | — | "/hr" suffix to gpu-price | | code-md | JetBrains Mono | 14 | 400 | 1.60 | 0 | — | Code blocks (Python, Docker, curl) | | code-sm | JetBrains Mono | 12 | 400 | 1.50 | 0 | — | Inline code, GPU price values inline | | 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 or price values appear.** GPU prices ($0.34/hr, $1.89/hr, $4.69/hr) use mono inline for credibility. - **GPU-price typography (24px / 700 / -0.4px) is reserved for pricing tables.** Pairs with "/hr" unit at 13px / 500. - **Caption-uppercase carries section structure.** 11px uppercase eyebrow at 1.5px tracking — "GPU PRICING", "INSTANT DEPLOY", "REGIONS", "PRICING". - **White headlines on slate.** The white-on-slate combination provides strongest hierarchy. ## 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 an 8/4 split (h1 + GPU pricing preview right). Feature card grids run 3-up at desktop. GPU-tile grids run 4-up at desktop, 2-up at tablet, 1-up at mobile. The full GPU pricing table spans the full content width. ### Whitespace Philosophy RunPod uses moderately dense whitespace appropriate for a GPU-cloud brand with technical users. The page is informationally dense (every GPU price is shown), but the rhythm provides enough breathing room for scanning. ### Section Cadence Dark hero band (with GPU price preview) → GPU pricing table (the marketing centerpiece) → feature card grid → softly-tinted band with stat callouts → product mockup band (RunPod console) → customer-logo strip → pricing tiers (subscription) → pre-footer CTA band → dark footer. ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Hamburger nav; hero h1 64→36px; GPU table horizontal-scroll; GPU tiles 1-up; pricing 1-up | | Tablet | 640–1024px | Top nav tightens; feature cards 2-up; GPU tiles 2-up; hero h1 52px | | Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 4-up GPU tiles; full GPU pricing table; hero h1 64px | | Wide | > 1440px | Same as desktop with more breathing room; max content 1280px | ### Touch Targets Primary CTA min 40 × 40px. GPU-row touch height 56px (extends row vertical hit area for mobile thumb access). Input height 40px. ### Collapsing Strategy Top nav collapses to hamburger at < 768px. Hero 8/4 grid collapses to single-column. GPU pricing table retains font-size; horizontal scroll on mobile with sticky first column (GPU name). ### 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, table cells | | 1 — Soft hairline | 1px `#243349` border | Standard feature cards, GPU rows, pricing tiers | | 2 — Surface | `#1a293d` background | Feature cards, GPU tiles | | 3 — Elevated | `#243349` background | Nested cards, hover states | | 4 — Brand glow | 1px purple border + glow-purple | Featured pricing tier (rare) | | 5 — Modal | Standard shadow + backdrop dim 80% | Dialogs, dropdowns | ### Shadow Philosophy RunPod uses slate-tinted shadows at moderate alpha. Shadows are essential on the dark canvas because tonal stepping alone provides limited depth cues. Hover lifts are subtle (translateY(-2px) + shadow up one tier). The brand glow shadow is reserved for the featured pricing tier — used scarcely (one card per page). ## 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, GPU tiles, pricing tiers | | Featured | xl | 16px | Hero shells (rare) | | Pill | pill | 9999px | Badges, avatars, tier-stripe terminations | ## Components ### Buttons (4 variants) **`button-primary`** — The signature purple CTA. Background `#673ab7`, text `#ffffff`, Inter 14px / 600, padding 12px × 22px, height 40px, radius 8px. Hover: `#5e35b1` over 120ms; subtle 1px lift. **`button-secondary`** — Dark surface card button. Background `#1a293d`, text `#ffffff`, 1px solid `#334155` border, same padding/radius as primary. Hover: surface lightens to `#243349`. **`button-ghost`** — Transparent text-with-arrow CTA. No background, text `#ffffff`, padding 10px × 16px. **`button-text-link`** — Pure text link in `#9575cd` (lightened purple for legibility on dark) with hover-lighten to `#b39ddb`. ### Cards **`card-feature`** — Standard dark feature card. Background `#1a293d`, text `#ffffff`, radius 12px, padding 32px, 1px solid `#243349` border. **`card-gpu-row`** — Single GPU row in the dense pricing table. Background `#1a293d`, padding 14px × 20px, 1px bottom border `#243349`, 2px left-side tier color stripe (green/amber/red). GPU name in Inter 16px / 600 / white, VRAM in Inter 14px / 400 / `#cbd5e1`, price in `gpu-price` typography (24px / 700 / white) with "/hr" suffix, region/availability in 12px Inter `#94a3b8`. Hover: surface lightens to `#243349`; tier stripe widens to 3px. **`card-gpu-tile`** — Larger GPU featured tile (used for H100, MI300X, latest releases). Background `#1a293d`, radius 12px, padding 24px, 1px solid `#243349` border. Top: GPU name in title-lg, VRAM badge. Center: gpu-price (24px / 700 white) + /hr suffix. Bottom: feature bullets, primary CTA "Deploy now." **`card-product`** — Card showing actual RunPod console UI (pod list, GPU selector, terminal output). Background `#142133`, radius 12px, padding 24px. **`card-code-window`** — Dark card showing a Python, Docker, or curl code block. Background `#1a293d` (slightly lighter than canvas for definition), code in JetBrains Mono with syntax highlighting (keywords purple-shifted to `#9575cd`, strings `#86efac`, comments `#64748b`, numbers `#fbbf24`), radius 12px, padding 24px. Top-left "Python" / "Dockerfile" / "curl" tab indicator. **`card-pricing-tier`** — Standard pricing tier card. Background `#1a293d`, radius 12px, padding 32px, 1px solid `#243349` border. **`card-pricing-tier-featured`** — Featured tier marked by 2px solid `#673ab7` border, slightly elevated surface `#243349` (vs standard `#1a293d`), and `shadow-glow-purple` ambient glow. The cluster of signals — color, surface, glow — marks the featured tier unmistakably. ### Badges & Pills **`badge-pill`** — Small dark pill label. Background `#1a293d`, text `#ffffff`, caption typography, radius 9999, padding 4px × 12px, 1px solid `#334155` border. **`badge-purple`** — Purple tinted pill for "FEATURED" or product callouts. Background `#3d2768`, text `#9575cd`, caption-uppercase typography, radius 9999. **`badge-spot`** — "SPOT" tag on community-tier GPU rows. Background `rgba(34, 197, 94, 0.15)` (green tint), text `#22c55e`, caption-uppercase typography, radius 9999. Signals "this is a community/spot tier — cheapest pricing." ### Inputs / Forms **`text-input`** — Dark text input. Background `#1a293d`, text `#ffffff`, radius 8px, padding 10px × 14px, height 40px, 1px solid `#334155` border. **`text-input-focused`** — 3px `rgba(103, 58, 183, 0.40)` ring with 1px solid `#673ab7` core. ### Navigation **`top-nav`** — Dark slate nav bar pinned to top, 64px tall, background `#0e1a2b`, 1px solid `#243349` bottom border. Logo + "RunPod" wordmark left, primary horizontal menu (GPU Cloud, Serverless, Pricing, Resources, Customers) center, right-side: "Sign in" + purple `button-primary` ("Get started"). ### Decorative **`gpu-pricing-table`** — The brand's primary marketing chrome. Each row is a `card-gpu-row`. Header row uses Inter 12px / 600 / uppercase / `#94a3b8` (columns: GPU, VRAM, $/hr, Region). Body rows use the gpu-price typography for prices and JetBrains Mono for technical identifiers. Tier stripes color-code rows. Sortable by clicking column headers (sort indicator in muted `#94a3b8`). **`stat-callout`** — Inline white or purple stat numbers ("500k+ GPU hours", "20+ regions", "10+ GPU types"). Display-sm typography (30px / 600). **`cta-band`** — Pre-footer "Get the GPUs you need" CTA band. `#1a293d` surface, 12px radius, 64px padding, 1px solid `#243349` border. h2 in display-md white, body subhead in `#cbd5e1`, primary `#673ab7` purple CTA + secondary dark-surface CTA. **`customer-logo-strip`** — Horizontal monochrome customer-logo strip. Background `#0e1a2b`, logos in `#94a3b8`, 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. ### Duration Buckets - **Fast (120ms)**: Color and opacity transitions. - **Standard (200ms)**: Card hover lifts, dropdown opens, table row hovers. - **Slow (320ms)**: Modal entrance, scroll reveals. ### Per-Component Micro-States - **Button hover**: Purple CTAs darken `#673ab7` → `#5e35b1` over 120ms; 1px lift. - **GPU-row hover**: Background lightens to `#243349` over 120ms; tier color stripe widens from 2px → 3px; price text gets a slight glow. - **Card hover**: TranslateY(-2px) over 200ms; shadow intensifies one tier. - **Code-window hover**: No state change. - **Link hover**: Color lightens `#9575cd` → `#b39ddb`; underline thickens 1px → 2px. - **Input focus**: 3px purple ring expands. - **Pricing-table sort header click**: Sort indicator rotates 180° over 200ms with emphasized ease. ### Page Transitions Standard browser navigation. Section-on-scroll reveals are 320ms fade-in-up. ### Reduced Motion Honored — all transforms removed, transitions reduced to 100ms opacity-only, sort-indicator rotation skipped (instant flip instead). ### Contrast Pairs - **Text on bg**: `#ffffff` on `#0e1a2b` = **16.8** — AAA at every size. - **Body on bg**: `#cbd5e1` on `#0e1a2b` = **11.2** — AAA. - **Muted on bg**: `#94a3b8` on `#0e1a2b` = **5.7** — AA at body sizes. - **On-brand on brand**: `#ffffff` on `#673ab7` = **5.4** — AA at body / AAA at large. - **Link on bg**: `#9575cd` on `#0e1a2b` = **6.8** — AAA. - **Body on surface**: `#cbd5e1` on `#1a293d` = **9.8** — AAA. ### Focus Indicators 3px `rgba(103, 58, 183, 0.40)` ring with 1px solid `#673ab7` core. Higher alpha than typical because the dark canvas needs stronger ring to register. ### ARIA Patterns - **Buttons**: Native `