---
version: alpha
name: "Baseten"
description: "Baseten's marketing surface reads like an approachable ML deployment workshop — a pure white canvas, Inter at weight 600 carrying every display headline, and a signature `#6c5ce7` purple that handles primary CTAs, link state, and the model-deployment pipeline chrome (model → Truss → endpoint) that Baseten turns into its primary marketing artifact. Embedded code blocks (Python, Truss config YAML) and product UI mockups (deployment dashboard, autoscaling graphs) establish the deploy-ML-fast credibility; the purple operates as a friendly brand voltage rather than enterprise severity. Where Modal commits to lime-green developer optimism and Replicate leans toward minimal black-and-white, Baseten commits to a warmer, more approachable purple register — friendly, capable, and unmistakably ML-focused."
colors:
  bg: "#ffffff"
  bg-soft: "#fafaff"
  bg-deep: "#1a1830"
  surface-soft: "#f5f5fa"
  surface: "#ffffff"
  surface-elevated: "#ffffff"
  surface-purple: "#ede9fe"
  surface-dark: "#1a1830"
  surface-dark-card: "#28254a"
  text: "#1a1830"
  text-body: "#3d3a5c"
  text-strong: "#28254a"
  text-muted: "#6b6889"
  text-faint: "#9c98b6"
  text-on-dark: "#ffffff"
  text-on-dark-muted: "#c8c5dd"
  brand: "#6c5ce7"
  brand-hover: "#5a48d3"
  brand-active: "#4938b3"
  brand-soft: "#ede9fe"
  brand-deep: "#352a8a"
  on-brand: "#ffffff"
  on-light: "#1a1830"
  link: "#6c5ce7"
  link-hover: "#5a48d3"
  border: "#e4e4ec"
  border-strong: "#c8c5d8"
  border-soft: "#f0eff7"
  border-purple: "#6c5ce7"
  shadow-color: "rgba(26, 24, 48, 0.04)"
  shadow-color-md: "rgba(26, 24, 48, 0.08)"
  shadow-color-lg: "rgba(26, 24, 48, 0.12)"
  shadow-glow-purple: "rgba(108, 92, 231, 0.15)"
  accent-emerald: "#10b981"
  accent-rose: "#ef4444"
  accent-amber: "#f59e0b"
  accent-cyan: "#06b6d4"
  accent-pink: "#ec4899"
  success: "#10b981"
  warning: "#f59e0b"
  danger: "#ef4444"
  info: "#06b6d4"
  code-keyword: "#6c5ce7"
  code-string: "#10b981"
  code-comment: "#9c98b6"
  code-number: "#f59e0b"
  truss-yaml-key: "#6c5ce7"
  truss-yaml-string: "#10b981"
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

Baseten's marketing surface reads like an approachable ML deployment workshop — a pure white `#ffffff` canvas carrying confident deep-purple-graphite type, with one signature purple `#6c5ce7` that handles every primary CTA, every link, every focus ring. The purple is calibrated to read warm and approachable: closer to Stripe's inviting violet than to Linear's cool indigo or to enterprise-stern dark blues. Baseten's brand voice is "ML deployment doesn't have to be hard" — and the purple's friendly register supports that voice.

The defining visual artifact is the **model-to-endpoint pipeline diagram**. Baseten shows the deployment flow: model file → Truss config → containerized service → autoscaling endpoint. This pipeline is the brand's value proposition rendered as marketing chrome. Where Pinecone shows vector-grids, LangChain shows agent-architecture diagrams, and Fireworks shows benchmark charts, Baseten shows the deployment pipeline.

The second signature visual element is the **Truss YAML code window**. Truss is Baseten's open-source model-packaging framework, and the brand frequently shows the actual Truss `config.yaml` inside dark code-window cards. The YAML syntax (model name, requirements, env vars, autoscaling settings) is the brand's marketing voltage — a few lines of YAML is what stands between an ML model and a production endpoint.

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. Stat-callout numbers ("99.95% SLA", "10ms cold-start", "1000+ models deployed") use display-stat sizing (56px / 700) in purple or graphite.

The page rhythm alternates light cards with the occasional deep-purple-tinted `#1a1830` 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 `#1a1830` type. Marketing is light-default.
- Signature `#6c5ce7` purple for primary CTAs, links, focus rings, and pipeline-diagram accents.
- Inter at weight 600 (display) with negative tracking on every headline.
- JetBrains Mono on every code surface; Truss YAML config is the brand's distinctive code artifact.
- Model-to-endpoint pipeline diagrams as the brand's signature visual chrome.
- Deep-purple-tinted `#1a1830` (NOT pure black) for every dark surface.
- 1px `#e4e4ec` hairline borders; rare ambient purple glow on hero cards.
- 8px radius on CTAs, 12px on cards, 9999px reserved for badges.
- Pre-footer CTA flips to deep-purple-tinted dark for warm contrast.
- Single brand color discipline — purple + grayscale, no second accent in marketing.

## Colors

### Primary
- **Bg / Canvas** (`#ffffff`): Pure white — runs every marketing page.
- **Text** (`#1a1830`): Deep-purple-graphite, not pure black — adds warmth and ties to brand.
- **Brand / Primary CTA** (`#6c5ce7`): The Baseten purple — every primary CTA, every link, every brand-critical accent.

### Brand & Dark
- **Brand** (`#6c5ce7`): Reserved for primary CTAs, link state, focus rings, featured-tier border, pipeline-diagram accents.
- **Brand Hover** (`#5a48d3`): Press / hover-darker variant.
- **Brand Active** (`#4938b3`): Deep purple for pressed/active state.
- **Brand Deep** (`#352a8a`): Darkest purple for type on `brand-soft` surface.
- **Bg Deep** (`#1a1830`): Deep-purple-tinted dark surface — dark CTA band, footer, code-window background. NOT pure black.

### Accent
Baseten's accent system is constrained. The accents below appear only inside product UI mockups, never as marketing chrome.
- **Accent Emerald** (`#10b981`): "Deployed" / "active" indicators inside dashboard mockups.
- **Accent Rose** (`#ef4444`): "Error" / "failed" indicators.
- **Accent Amber** (`#f59e0b`): "Warning" / "scaling" indicators.
- **Accent Cyan** (`#06b6d4`): Rare info accent.
- **Accent Pink** (`#ec4899`): Rare highlight on featured model card.

### Interactive
- **Link** (`#6c5ce7`): Inline body links match brand. Underlined.
- **Link Hover** (`#5a48d3`): Hover darkens.
- **Selected** (`rgba(108, 92, 231, 0.15)`): Selected text background — purple tint.
- **Disabled** (`#9c98b6`): Disabled labels and tertiary text.

### Neutral Scale
- **Text** (`#1a1830`): Headlines, primary type — deep-purple-graphite.
- **Text Strong** (`#28254a`): Emphasised paragraphs.
- **Text Body** (`#3d3a5c`): Default running-text.
- **Text Muted** (`#6b6889`): Captions, breadcrumbs.
- **Text Faint** (`#9c98b6`): Tertiary fine-print.
- **Text on Dark** (`#ffffff`): Headlines on dark CTA band.
- **Text on Dark Muted** (`#c8c5dd`): Body on dark band.

### Surface & Borders
- **Surface Soft** (`#f5f5fa`): Section dividers, very-soft band tints.
- **Bg Soft** (`#fafaff`): Slightly purple-tinted band for editorial alternation.
- **Surface** (`#ffffff`): Default content card.
- **Surface Purple** (`#ede9fe`): Tinted purple surface for info callouts.
- **Surface Dark** (`#1a1830`): Code-window background, dark CTA band, footer.
- **Surface Dark Card** (`#28254a`): Nested card on dark band.
- **Border** (`#e4e4ec`): 1px hairline on cards.
- **Border Strong** (`#c8c5d8`): Divider on input underlines.
- **Border Purple** (`#6c5ce7`): Focus border on inputs and 2px featured-tier border.

### Shadow Colors
Baseten uses purple-tinted shadows — graphite with a slight purple cast at low alpha. Subtle but brand-aligned.
- **Shadow Color** (`rgba(26, 24, 48, 0.04)`): Ambient.
- **Shadow Color Md** (`rgba(26, 24, 48, 0.08)`): Standard card shadow.
- **Shadow Color Lg** (`rgba(26, 24, 48, 0.12)`): Hover / modal entrance.
- **Shadow Glow Purple** (`rgba(108, 92, 231, 0.15)`): Rare ambient glow on hero CTA 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, Truss YAML config, model identifiers.
- **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 ("Deploy any ML model in production") |
| 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 |
| 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 | 56 | 700 | 1.0 | -1.5px | — | Stat callouts ("99.95% SLA") — purple or graphite |
| code-md | JetBrains Mono | 14 | 400 | 1.60 | 0 | — | Code blocks, Truss YAML |
| 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 or YAML appears.** Truss config keys ("model_name", "python_version", "min_replicas") use mono inline.
- **Stat-display sizes carry credibility moments.** "99.95% SLA", "1000+ models deployed", "10ms cold-start" — always purple or graphite.
- **Caption-uppercase carries section structure.** 11px uppercase eyebrow at 1.5px tracking — "DEPLOYMENT", "AUTOSCALING", "TRUSS", "PRICING".
- **Deep-purple-graphite headlines, not black.** The `#1a1830` adds warmth that pure black lacks.

## 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 **1200px** centered. Editorial body uses a 12-column grid; hero often uses a 6/6 split (h1 + subhead left, code-window or pipeline diagram right). Feature card grids run 3-up at desktop, 2-up at tablet, 1-up at mobile.

### Whitespace Philosophy
Baseten uses balanced, friendly whitespace appropriate for an approachable ML-tooling brand. Generous enough to feel calm, tight enough to fit dense technical information.

### Section Cadence
White hero band → pipeline diagram or code-window → light feature card grid → softly-tinted band with stat callouts → product mockup band → customer-logo strip → pricing → light feature card → deep-purple-tinted `#1a1830` pre-footer CTA → dark footer.

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hamburger nav; hero h1 64→36px; code-window stacks below; feature grids 1-up |
| Tablet | 640–1024px | Top nav tightens; feature cards 2-up; hero h1 52px |
| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; hero h1 64px |
| Wide | > 1440px | Same as desktop with more breathing room; max content 1200px |

### 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. Pipeline diagram swaps from horizontal to vertical orientation on mobile.

### 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 `#e4e4ec` 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 |
| 4 — Brand glow | 1px border + glow-purple | Hero CTA card (rare) |
| 5 — Featured | 2px solid `#6c5ce7` border | Featured pricing tier |
| 6 — Modal | Standard shadow + backdrop dim 60% | Dialogs, dropdowns |

### Shadow Philosophy
Baseten uses purple-tinted shadows at low alpha — graphite with subtle purple cast (`rgba(26, 24, 48, ...)`). Tying depth to brand subtly. Hover lifts are subtle (translateY(-2px) + shadow up one tier).

## 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, pipeline node rectangles |
| Large | lg | 12px | Content cards, code-window cards, pricing tiers |
| Featured | xl | 16px | Hero shells |
| Pill | pill | 9999px | Badges, avatars |

## Components

### Buttons (4 variants)

**`button-primary`** — The signature purple CTA. Background `#6c5ce7`, text `#ffffff`, Inter 14px / 600, padding 12px × 22px, height 40px, radius 8px. Hover: `#5a48d3` over 120ms; subtle 1px lift.

**`button-secondary`** — White-bordered button. Background `#ffffff`, text `#1a1830`, 1px solid `#e4e4ec` border, same shape and padding.

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

**`button-text-link`** — Pure text link in `#6c5ce7` with hover-darken.

### Cards

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

**`card-pipeline`** — Model-to-endpoint pipeline diagram. Background `#fafaff` (slight purple tint), radius 12px, padding 32px. Four nodes drawn as `#ffffff` 8px-radius rectangles with 1px `#e4e4ec` borders ("Model file" → "Truss config" → "Container" → "Endpoint"); connecting arrows are 1.5px `#6c5ce7` lines with arrow heads. The brand's signature visual chrome.

**`card-product`** — Card showing actual Baseten dashboard / deployment console UI (deployment list, autoscaling graph, logs panel). Background `#fafaff`, radius 12px, padding 24px.

**`card-code-window`** — Dark card showing a Python or Truss YAML code block. Background `#1a1830` (deep-purple-tinted, not black), code in JetBrains Mono with syntax highlighting (keywords purple-shifted to `#a78bfa`, strings `#86efac`, comments `#9c98b6`, numbers `#fbbf24`, YAML keys purple, YAML strings green), radius 12px, padding 24px. Top-left "Python" / "config.yaml" tab indicator.

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

**`card-pricing-tier-featured`** — Featured tier marked by 2px solid `#6c5ce7` border.

### Badges & Pills

**`badge-pill`** — Small light pill. Background `#f5f5fa`, text `#1a1830`, caption typography, radius 9999.

**`badge-purple`** — Purple tinted pill for "NEW" or product callouts. Background `#ede9fe`, text `#352a8a`, caption-uppercase typography, radius 9999.

### Inputs / Forms

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

**`text-input-focused`** — 3px `rgba(108, 92, 231, 0.30)` ring with 1px solid `#6c5ce7` core.

### Navigation

**`top-nav`** — White nav bar pinned to top, 64px tall, background `#ffffff`. Logo + "Baseten" wordmark left, primary horizontal menu (Product, Solutions, Customers, Truss, Resources, Pricing) center, right-side: "Sign in" + purple `button-primary` ("Get started").

### Decorative

**`pipeline-arrow`** — Inline arrow chrome between pipeline nodes. 1.5px `#6c5ce7` stroke, arrow head at terminus.

**`stat-callout`** — Inline purple or graphite stat numbers ("99.95% SLA", "1000+ models", "10ms cold-start"). Stat-display typography (56px / 700 / -1.5px).

**`cta-band-dark`** — Pre-footer "Deploy your model" CTA band. `#1a1830` deep-purple-tinted surface, 64px padding. h2 in display-md white, body subhead in `#c8c5dd`, primary `#6c5ce7` CTA + ghost white text-link.

**`customer-logo-strip`** — Horizontal monochrome customer-logo strip. Background `#ffffff`, logos in `#6b6889`, 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.
- **Slow (320ms)**: Modal entrance, scroll reveals.

### Per-Component Micro-States
- **Button hover**: Purple CTAs darken `#6c5ce7` → `#5a48d3` over 120ms; 1px lift.
- **Card hover**: TranslateY(-2px) over 200ms; shadow intensifies one tier.
- **Pipeline diagram**: On scroll-into-view, arrows draw progressively (stroke-dashoffset cycles) suggesting "deployment flowing." 800ms total, with 200ms stagger between arrows.
- **Code-window hover**: No state change.
- **Link hover**: Color darkens.
- **Input focus**: 3px purple ring expands.

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

### Reduced Motion
Honored — pipeline arrow draw animation skipped (arrows render statically), all transforms removed.

### Contrast Pairs
- **Text on bg**: `#1a1830` on `#ffffff` = **14.6** — AAA.
- **Body on bg**: `#3d3a5c` on `#ffffff` = **9.0** — AAA.
- **Muted on bg**: `#6b6889` on `#ffffff` = **4.6** — AA.
- **On-brand on brand**: `#ffffff` on `#6c5ce7` = **4.7** — AA at body sizes (large text AAA).
- **Brand-deep on brand-soft**: `#352a8a` on `#ede9fe` = **9.6** — AAA.

### Focus Indicators
3px `rgba(108, 92, 231, 0.30)` ring with 1px solid `#6c5ce7` core.

### ARIA Patterns
- **Buttons**: Native `<button>`; icon-only carry `aria-label`.
- **Code blocks**: `<pre><code>` with `aria-label="Truss config example"`.
- **Pipeline diagrams**: SVG with `<title>` and `<desc>`.
- **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 numbers use `aria-label` for full unit readout. Pipeline diagrams provide textual fallback ("Pipeline: model file → Truss config → container → endpoint").

### Reduced Motion Handling
Honored — pipeline arrow draw skipped, transforms removed.

### Tone
**Approachable, ML-fluent, capable.** Baseten writes for ML engineers and ML-curious developers who need to deploy models in production. The tone is warmer than corporate (closer to Modal or Hugging Face than to Snowflake) — emphasizes "we make ML deployment doable" rather than "we are an enterprise platform." Headlines state capabilities ("Deploy any ML model in production"); body copy supports with Truss config snippets, autoscaling details, and use-case examples.

### Microcopy Patterns
- **CTA verbs**: "Get started", "Deploy now", "Read the docs", "Talk to sales", "Try Baseten". Friendly without being whimsical.
- **Section labels**: Uppercase eyebrow — "DEPLOYMENT", "AUTOSCALING", "TRUSS", "GPUS", "PRICING".
- **Stat numbers**: Followed by qualifier — "1000+ models deployed", "99.95% SLA", "10ms cold-start", "20+ GPU types".
- **Feature copy**: Verb-first ("Deploy in seconds", "Scale to zero", "Choose your GPU").

### Empty States
Dashboard product UI: "No deployments yet — push your first model with `baseten deploy`" with purple link to docs. Welcoming and instructive.

### Error Messages
**Pattern**: `<icon-x in #ef4444> + "What went wrong" + "What to try next"`. Example: "Deployment failed — check your `config.yaml` for missing requirements."

### Success Confirmations
Toast in `text` over `surface` with success accent stripe. "Model deployed — endpoint live at https://..." Auto-dismiss 4s.

Baseten marketing is **light-default**. The deployment console supports a dark theme on a deep-purple `#1a1830` canvas. Tokens map: `bg: #1a1830`, `surface: #28254a`, `border: #3d3a5c`, `text: #ffffff`, `text-body: #c8c5dd`, `brand: #6c5ce7` (unchanged), `link: #a78bfa` (lightened purple). Code-window cards retain `#1a1830` background in both themes.

Baseten's marketing aesthetic descends from the **approachable ML-tooling** lineage that runs through Modal, Hugging Face, and Replicate — bright accent color, friendly type, and pipeline/diagram visual chrome. The signature `#6c5ce7` purple is calibrated to read warm and approachable rather than enterprise-stern.

The **deep-purple-tinted dark surface** (`#1a1830`, NOT pure black) is borrowed from Linear's discipline of keeping every surface brand-aligned. The **Truss YAML as code-window content** is Baseten's distinctive contribution — most dev brands show generic Python/JavaScript snippets; Baseten shows its own infrastructure (Truss is open-source, owned by Baseten). The pipeline-diagram-as-marketing-chrome borrows from Hashicorp's architecture-diagram tradition, but with a softer, more approachable rendering.

The 600-weight Inter with negative tracking tracks the modern dev-tool typographic discipline. The pre-footer dark-CTA-band-on-light pattern is Vercel's, but Baseten uses deep purple `#1a1830` instead of black.

- **Modal** — ML-deployment marketing register; pipeline-as-marketing-chrome lineage. https://modal.com
- **Vercel** — Single-accent dev-tool light-aesthetic baseline. https://vercel.com
- **Stripe** — Inter + negative-tracking display discipline; warm-purple chromatic register. https://stripe.com
- **Hugging Face** — Approachable ML community-friendly aesthetic. https://huggingface.co
- **Linear** — Deep-purple-tinted-not-pure-black dark surface treatment. https://linear.app

## Do's and Don'ts

### Do
- Anchor every page on the white `#ffffff` canvas. Marketing is light-default.
- Reserve the purple (`#6c5ce7`) for primary CTAs, links, focus rings, pipeline-diagram accents, featured-tier border.
- Use Inter at weight 600 (display) with negative tracking on every headline.
- Show actual Truss YAML config inside dark code-window cards — Truss is the brand's own framework.
- Show model-to-endpoint pipeline diagrams as primary marketing chrome.
- Use deep-purple-tinted `#1a1830` (NOT pure black) for every dark surface.
- Use stat-callout numbers (56px / 700) for SLA and deployment-count credibility.
- Anchor every band with 96px vertical rhythm.
- Use a 2px solid `#6c5ce7` border to mark the featured pricing tier.
- Use purple-tinted shadows (`rgba(26, 24, 48, ...)`).

### Don't
- Don't switch the marketing canvas to pure black mid-page. Use deep-purple-tinted `#1a1830`.
- Don't introduce a second brand color in marketing. Baseten is purple + grayscale.
- Don't bold display weight beyond 700.
- Don't replace pipeline diagrams with abstract illustrations.
- Don't replace Truss YAML with generic code. The YAML IS the brand's distinctive marketing artifact.
- Don't use rounded-pill buttons for primary CTAs. Standard radius is 8px.
- Don't add gradient halos to the purple. Solid only — brand glow shadow is reserved for the hero CTA card.
- Don't use the purple for body text — only for actionable / accent moments.

### Quick Color Reference
```
Bg / Canvas:     #ffffff (pure white)
Bg Soft:         #fafaff (slightly purple-tinted alternating band)
Surface Soft:    #f5f5fa (section divider)
Border:          #e4e4ec (1px hairline)
Text:            #1a1830 (deep-purple-graphite, not black)
Text Body:       #3d3a5c (running-text)
Text Muted:      #6b6889 (captions)
Brand:           #6c5ce7 (Baseten purple)
Brand Hover:     #5a48d3 (press state)
On-Brand:        #ffffff (white text on purple)
Surface Dark:    #1a1830 (deep-purple-tinted, NOT pure black)
```

### Example Component Prompts

1. "Create a Baseten hero band on `#ffffff` canvas, with an Inter 64px / 700 / -2px tracking `#1a1830` headline ('Deploy any ML model in production'), 18px / 400 `#3d3a5c` subhead, and a purple `#6c5ce7` primary CTA ('Get started') paired with a white-bordered secondary CTA ('Talk to sales'). Right side: a 12px-radius `#1a1830` deep-purple code-window card showing a Truss `config.yaml` snippet with purple keys and green strings."

2. "Design a model-to-endpoint pipeline card. `#fafaff` background, 12px radius, 32px padding. Four nodes drawn as `#ffffff` 8px-radius rectangles with 1px `#e4e4ec` borders ('Model file', 'Truss config', 'Container', 'Endpoint'); connecting arrows are 1.5px `#6c5ce7` lines with arrow heads."

3. "Build a 3-column feature card grid on `#ffffff`. Each card: `#ffffff` background, 1px solid `#e4e4ec` border, 12px radius, 32px padding, `#1a1830` 20px / 600 title, `#3d3a5c` 16px body, purple-tinted shadow. Each card carries a small 11px / 600 / 1.5px uppercase eyebrow ('DEPLOYMENT', 'AUTOSCALING', 'TRUSS')."

4. "Compose a stat-callout strip with three numbers ('1000+', '99.95%', '10ms') in Inter 56px / 700 / `#6c5ce7`, each with a `#6b6889` 11px / 600 uppercase label below ('MODELS DEPLOYED', 'SLA', 'COLD START'). 96px vertical padding."

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

6. "Design a pre-footer dark CTA band: full-bleed `#1a1830` deep-purple-tinted background (NOT black), 64px padding. Inter 40px / 600 / -1px tracking `#ffffff` headline ('Deploy your first model'), 16px / 400 `#c8c5dd` subhead, primary `#6c5ce7` CTA ('Get started') + ghost `#ffffff` text-link with arrow ('Read the docs')."

### Iteration Guide
1. Start with the white canvas. Marketing is light-default.
2. Pick one place per band where the purple appears.
3. Show the deployment pipeline as marketing chrome wherever you'd otherwise add an illustration.
4. Show Truss YAML in code-window cards. The YAML is the brand's distinctive code artifact.
5. Use deep-purple-tinted `#1a1830` for any dark surface. Pure black breaks the brand warmth.
6. Use purple-tinted shadows. Subtle but brand-aligned.
7. Use stat-callouts wherever you have a real SLA or deployment count to cite.
8. The pre-footer CTA is the page's one dramatic dark moment.