DESIGN.md inspired by fal

---
name: fal
tagline: 'Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale.'
updated_at: 2026-05-28T23:11:22.117Z
published_at: 2026-05-28T23:11:22.117Z
author: webdesignhot
source_url: https://fal.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, dev-tools]
tags: [light, minimal, mono, ai, inference]
preview_swatch: ['#ffffff', '#252527', '#000000']
related: [baseten, modal, replicate]
description: 'fal''s marketing surface runs like a fast, technical broadsheet for generative-AI inference — a pure white #ffffff canvas, pure-black #000000 type set in the focal display face at editorial sizes (a 120px / 500 hero h1), publicSansRounded carrying every line of body copy, and near-black #252527 primary CTAs cut to a sharp 4px radius. Where Baseten dresses ML deployment in warm purple and Modal commits to lime-green optimism, fal strips chrome to the bone: black on white, huge type, square-ish corners, and a register that reads fast, technical, and benchmark-driven. The contrast comes from scale and weight rather than color — the display face does the talking, and the inference platform''s speed claims (latency, throughput, model count) are the marketing voltage.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
colors:
  bg: '#ffffff'                  # canvas — pure white
  bg-soft: '#fafafa'             # softly tinted alternating band / "Explore" CTA fill
  surface: '#ffffff'             # default content card
  surface-elevated: '#ffffff'
  surface-dark: '#0a0a0a'        # rare dark band / code-window background
  surface-soft: '#f5f5f5'        # softer section tint
  text: '#000000'                # primary type — pure black
  text-body: '#1b1b1d'           # near-black running-text (Explore CTA label color)
  text-muted: '#6b7280'          # captions, secondary labels
  text-faint: '#9ca3af'          # tertiary fine-print
  text-on-dark: '#fafafa'        # type on dark CTAs / dark bands
  brand: '#252527'               # near-black primary CTA — the fal "Get started" button
  brand-hover: '#0a0a0a'         # darker press / hover variant
  on-brand: '#fafafa'            # off-white label on near-black CTA
  border: '#e5e7eb'              # 1px hairline on cards
  border-strong: '#d1d5db'       # divider on inputs / heavier separators
  border-soft: '#f0f0f0'         # subtle separator
  success: '#16a34a'             # success state (product UI)
  warning: '#d97706'             # warning state (product UI)
  danger: '#dc2626'              # error / destructive (product UI)
  info: '#2563eb'                # informational notice (product UI)

typography:
  display:
    family: 'focal, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  body:
    family: 'publicSansRounded, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 120, weight: 500, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 80,  weight: 500, lineHeight: 1.02, tracking: '-0.025em', family: display }
    display-md:      { size: 56,  weight: 500, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40,  weight: 600, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32,  weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24,  weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20,  weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13,  weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12,  weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    code:            { size: 14,  weight: 400, lineHeight: 1.55, tracking: '0',        family: mono }
    code-sm:         { size: 12,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

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

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

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

components:
  button-primary: { bg: brand, text: on-brand, padding: '10px 16px', radius: 4 }
  button-secondary: { bg: bg-soft, text: text-body, border: border, padding: '10px 16px', radius: 4 }
  button-ghost:   { bg: transparent, text: text, border: border, padding: '10px 16px', radius: 4 }
  card:           { bg: surface, border: border, radius: 8, padding: 24 }
  input:          { bg: bg, border: border, text: text, radius: 4, padding: '8px 12px' }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 120
  duration-standard: 200
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: 'rgba(0, 0, 0, 0.04) 0 1px 2px'
  standard: 'rgba(0, 0, 0, 0.06) 0 4px 12px'
  elevated: 'rgba(0, 0, 0, 0.10) 0 12px 32px -8px'
  deep: 'rgba(0, 0, 0, 0.14) 0 24px 48px -12px'
  ring: '0 0 0 3px rgba(0, 0, 0, 0.18)'

accessibility:
  contrast-text-on-bg: 21.0             # AAA — #000000 on #ffffff
  contrast-text-body-on-bg: 17.2        # AAA — #1b1b1d on #ffffff
  contrast-on-brand: 14.7               # AAA — #fafafa on #252527
  contrast-muted-on-bg: 4.83            # AA — #6b7280 on #ffffff
  focus-ring: '3px rgba(0, 0, 0, 0.18) ring with 1px solid #000000 core'
  reduced-motion-honored: true

dark-mode: 'light-default — fal marketing runs on a pure-white canvas; dark surfaces are rare and reserved for code-windows / occasional bands'

lineage:
  summary: |
    fal's marketing aesthetic descends from the **minimal black-on-white
    developer-platform** lineage — the same broadsheet austerity that
    Vercel and Replicate trade in, pushed to an editorial extreme. The
    defining move is scale: the focal display face runs at a 120px / 500
    hero, so contrast comes from type size and weight rather than color.
    The palette is monochrome — pure white #ffffff, pure black #000000,
    and a near-black #252527 that fills the primary CTA. Corners are
    sharp (4px on CTAs, 0px on type and bands), which reads fast and
    technical rather than friendly and rounded. Where Baseten leans warm
    purple and Modal leans lime-green optimism, fal strips chrome to the
    bone and lets the generative-AI output — image, video, 3D, audio
    samples — supply the only color on the page.
  influences:
    - name: Vercel
      role: Black-on-white developer-platform austerity; sharp-cornered near-black CTAs on a pure-white canvas.
      url: https://vercel.com
    - name: Replicate
      role: Minimal monochrome generative-AI marketing register where the model output is the only color.
      url: https://replicate.com
    - name: Linear
      role: Negative-tracking display discipline and near-black-not-pure-black surface treatment.
      url: https://linear.app
    - name: Stripe
      role: Editorial display scale and tight letter-spacing on oversized marketing headlines.
      url: https://stripe.com
---

## 1. Visual Theme & Atmosphere

fal's marketing surface reads like a fast, technical broadsheet for generative-AI inference — a pure white `#ffffff` canvas carrying pure-black `#000000` type, with the focal display face pushed to editorial scale. The hero h1 runs at **120px / 500** in focal, so the entire page draws its energy from type size and weight rather than from color. fal is an inference platform that runs image, video, 3D, and audio models, and the brand's voice is benchmark-driven: fast, capable, unadorned.

The palette is deliberately monochrome. White, black, and a near-black `#252527` that fills the primary CTA ("Get started") are the entire chromatic vocabulary of the chrome. There is no brand hue, no accent voltage, no gradient — the only color on the page comes from the generative-AI output itself (sampled images, video frames, 3D renders). This is a confident, almost severe choice: it says the platform is the substrate and the models are the show.

Corners are sharp. CTAs cut to a **4px radius**, type and full-bleed bands sit at 0px. The combination of huge type, square-ish corners, and zero decorative color reads fast and technical — closer to a terminal or a benchmark dashboard than to a friendly SaaS marketing page. Where Baseten dresses ML deployment in warm purple workshop chrome and Modal commits to lime-green developer optimism, fal commits to austerity.

Type voice runs the focal display face at weight 500 for the largest hero sizes (600 below, on smaller headings), with negative tracking (`-0.018em` to `-0.03em`). Body copy runs publicSansRounded at 400 / 16px with a 1.55 line-height — a subtly rounded grotesque that softens the otherwise hard-edged page just enough to stay readable. Mono carries any latency numbers, model identifiers, and code snippets.

The page rhythm is overwhelmingly light. White hero → model-gallery grid → light feature cards → stat strip → occasional rare dark band or code-window → light pricing → footer. The near-black `#252527` CTA is the single recurring dark accent, and the only consistent piece of brand chrome on an otherwise white field.

**Key Characteristics:**
- Pure white `#ffffff` canvas with pure-black `#000000` type. Marketing is light-default.
- focal display face pushed to editorial scale — a **120px / 500** hero h1 is the brand's signature move.
- Contrast comes from type size and weight, not color. The chrome is strictly monochrome.
- Near-black `#252527` primary CTA ("Get started") with off-white `#fafafa` label — the only recurring dark accent.
- Off-white `#fafafa` "Explore" secondary CTA with near-black `#1b1b1d` label and a hairline border.
- publicSansRounded body at 400 / 16px / 1.55 — a softly rounded grotesque that keeps dense copy legible.
- Sharp 4px radius on CTAs; 0px on type and full-bleed bands — fast, technical, not friendly-rounded.
- The only color on the page is the generative-AI model output (image / video / 3D / audio samples).
- 1px `#e5e7eb` hairline borders; near-shadowless, near-flat depth model.
- Single-CTA discipline — near-black primary + off-white outlined secondary, no third color.

## 2. Color Palette & Roles

### Primary
- **Bg / Canvas** (`#ffffff`): Pure white — runs every marketing page.
- **Text** (`#000000`): Pure black — headlines and primary type. No softening; maximum contrast.
- **Brand / Primary CTA** (`#252527`): Near-black — fills the "Get started" CTA. The brand's only recurring dark accent.

### Brand & Dark
- **Brand** (`#252527`): Near-black, reserved for the primary CTA fill.
- **Brand Hover** (`#0a0a0a`): Darker press / hover variant — deepens toward true black.
- **On-Brand** (`#fafafa`): Off-white label on the near-black CTA (not pure white — matches the live token).
- **Surface Dark** (`#0a0a0a`): Rare dark band / code-window background.

### Accent
fal has no chromatic brand accent. The only color on the page is generative model output (sampled images, video, 3D, audio waveforms). Treat the model output thumbnails themselves as the de facto accent surface — never invent a synthetic brand hue.

### Interactive
- **Text Body** (`#1b1b1d`): Near-black running-text and the "Explore" secondary CTA label color.
- **Focus Ring** (`rgba(0, 0, 0, 0.18)`): Soft black ring around focused controls.
- **Disabled** (`#9ca3af`): Disabled labels and tertiary text.

### Neutral Scale
- **Text** (`#000000`): Headlines, primary type — pure black.
- **Text Body** (`#1b1b1d`): Default running-text — near-black.
- **Text Muted** (`#6b7280`): Captions, secondary labels.
- **Text Faint** (`#9ca3af`): Tertiary fine-print, placeholders.
- **Text on Dark** (`#fafafa`): Off-white type on dark CTAs / dark bands.

### Surface & Borders
- **Bg Soft** (`#fafafa`): Slightly tinted alternating band; also the "Explore" secondary CTA fill.
- **Surface Soft** (`#f5f5f5`): Softer section tint.
- **Surface** (`#ffffff`): Default content card.
- **Surface Dark** (`#0a0a0a`): Code-window background, rare dark band.
- **Border** (`#e5e7eb`): 1px hairline on cards and outlined CTAs.
- **Border Strong** (`#d1d5db`): Divider on inputs, heavier separators.
- **Border Soft** (`#f0f0f0`): Subtle separator between dense rows.

### Shadow Colors
fal's depth model is near-flat — shadows are pure-black at very low alpha, used sparingly. Most separation comes from 1px hairline borders.
- **Ambient** (`rgba(0, 0, 0, 0.04)`): Faint card lift.
- **Standard** (`rgba(0, 0, 0, 0.06)`): Standard card / dropdown.
- **Elevated** (`rgba(0, 0, 0, 0.10)`): Hover / modal entrance.

### Semantic
Semantic colors appear only inside product UI (dashboard, logs), never as marketing chrome.
- **Success** (`#16a34a`): "Running" / "deployed" indicators.
- **Warning** (`#d97706`): "Queued" / "scaling" indicators.
- **Danger** (`#dc2626`): "Failed" / error indicators.
- **Info** (`#2563eb`): Informational notices.

## 3. Typography Rules

### Font Family
- **Display**: `focal, system-ui, -apple-system, sans-serif`. focal carries every headline; at hero scale it runs 120px / 500.
- **Body**: `publicSansRounded, system-ui, -apple-system, sans-serif`. A softly rounded grotesque; handles every line of running copy at 400.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`. Latency numbers, model identifiers, code snippets, API examples.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | focal | 120 | 500 | 1.0 | -0.03em | Homepage h1 — the brand's signature editorial-scale headline |
| display-lg | focal | 80 | 500 | 1.02 | -0.025em | Major band heads |
| display-md | focal | 56 | 500 | 1.05 | -0.02em | Section heads |
| h1 | focal | 40 | 600 | 1.1 | -0.018em | Sub-page titles |
| h2 | focal | 32 | 600 | 1.2 | -0.012em | Section sub-heads |
| h3 | focal | 24 | 600 | 1.25 | -0.005em | Card titles, feature heads |
| h4 | publicSansRounded | 20 | 600 | 1.3 | 0 | Small card titles, list labels |
| body-lg | publicSansRounded | 18 | 400 | 1.55 | 0 | Hero subhead |
| body | publicSansRounded | 16 | 400 | 1.55 | 0 | Default running-text |
| body-sm | publicSansRounded | 14 | 400 | 1.5 | 0 | Footer body, fine-print |
| label | publicSansRounded | 13 | 500 | 1.4 | 0 | Button labels, form labels |
| caption | publicSansRounded | 12 | 500 | 1.4 | 0.02em | Captions, eyebrows, meta |
| code | mono | 14 | 400 | 1.55 | 0 | Code blocks, API examples |
| code-sm | mono | 12 | 400 | 1.5 | 0 | Inline code, latency readouts |

### Principles
- **The hero headline is the brand.** focal at 120px / 500 is the single most distinctive token — set it large, let it dominate, and don't compete with it chromatically.
- **Display weight stays at 500 at the largest sizes; 600 below.** focal at 500 reads editorial; pushing to 700 would coarsen it.
- **Negative tracking is essential** for display sizes (`-0.018em` to `-0.03em`). The bigger the headline, the tighter the tracking.
- **Body stays publicSansRounded at 400 / 1.55.** The slight roundness softens the hard-edged page; don't swap it for a harder grotesque.
- **Mono carries every number that signals speed.** Latency ("120ms"), throughput, model count — set in mono for technical credibility.
- **Contrast through scale, never through color.** Distinguish hierarchy by size, weight, and tracking — the page stays monochrome.
- **Caption / eyebrow at 12px / 500 / 0.02em** carries section structure ("IMAGE", "VIDEO", "3D", "AUDIO", "PRICING").
- **Pure-black headlines, near-black body.** `#000000` for headlines, `#1b1b1d` for running text — the tiny step keeps long copy from vibrating.

## 4. Component Stylings

### Buttons (4 variants)

**`button-primary`** — The near-black CTA. Background `#252527`, label `#fafafa`, publicSansRounded 13px / 500, padding 10px × 16px, **radius 4px**. The "Get started" button. Hover: deepens to `#0a0a0a` over 120ms.

**`button-secondary`** — The "Explore" outlined CTA. Background `#fafafa`, label `#1b1b1d`, 1px solid `#e5e7eb` border, same padding and 4px radius. Reads as the lighter-weight paired action.

**`button-ghost`** — Transparent fill, `#000000` label, 1px solid `#e5e7eb` border, 4px radius. Tertiary actions in dense UI.

**`button-text-link`** — Pure text link in `#000000`, underline on hover. Inline / footer use.

All four share the sharp 4px radius — fal never uses pill-shaped primary CTAs.

### Cards

**`card`** — Standard white content card. Background `#ffffff`, 1px solid `#e5e7eb` border, **radius 8px**, padding 24px. Near-flat (no shadow at rest; faint ambient on hover).

**`card-model`** — Model-gallery tile. Background `#ffffff`, 1px `#e5e7eb` border, 8px radius. The generative output (image / video frame / 3D render) fills the top of the tile edge-to-edge — this is where the page's only color lives — with the model name (focal h4) and a mono latency / metadata line below.

**`card-code-window`** — Dark code card showing an API call (Python / curl / TypeScript). Background `#0a0a0a`, code in mono with restrained syntax highlighting, 8px radius, 24px padding. Top-left "python" / "curl" tab indicator.

**`card-stat`** — Borderless stat callout. Display-md number in focal `#000000`, mono unit below, no border or shadow. Used for "120ms latency", "60+ models", throughput figures.

### Badges & Pills

**`badge`** — Small square-ish chip. Background `#f5f5f5`, label `#1b1b1d`, caption typography, **4px radius** (not pill — fal keeps even badges square-ish to match the sharp register). Used for model category ("IMAGE", "VIDEO") and "NEW".

**`badge-outline`** — Transparent fill, 1px `#e5e7eb` border, `#6b7280` label, 4px radius. Status / metadata chips.

### Inputs / Forms

**`text-input`** — White input. Background `#ffffff`, 1px solid `#e5e7eb` border, **radius 4px**, padding 8px × 12px, `#000000` text, `#9ca3af` placeholder.

**`text-input-focused`** — 3px `rgba(0, 0, 0, 0.18)` ring with 1px solid `#000000` core. Monochrome focus, no colored ring.

### Navigation

**`top-nav`** — White nav bar pinned to top, 64px tall, background `#ffffff`, 1px `#e5e7eb` bottom hairline. fal wordmark left (lowercase, focal), horizontal menu center (Models, Pricing, Docs, Blog), right-side: "Explore" `button-secondary` + near-black "Get started" `button-primary`.

## 5. Layout Principles

### Spacing System
Base unit **4px**. Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96`. 96px section padding, 24px card padding, 16px intra-card rhythm. Generous around the hero so the 120px headline can breathe.

### Grid & Container
Max content width **1280px** centered. Hero is typically a single full-width column so the oversized headline runs edge-to-edge; below it, the model gallery runs a 3-up or 4-up grid at desktop, 2-up at tablet, 1-up at mobile. Editorial body sits in a 720px prose column.

### Whitespace Philosophy
fal uses confident, expansive whitespace around the hero — the 120px headline demands clearance — then tightens to a dense, grid-packed model gallery below. The contrast between the airy hero and the dense gallery is intentional: it says "marketing is bold, the product is efficient."

### Section Cadence
White hero (oversized headline) → model-gallery grid (the colorful part) → light feature cards → borderless stat strip → code-window band → light pricing grid → footer. Dark moments are rare and reserved for code-windows.

## 6. Shapes & Radius Scale

| Tier | Token | Value | Use |
|---|---|---|---|
| Micro | micro | 2px | Reserved / tiny inline chips |
| Standard | sm | 4px | CTAs, inputs, badges — the brand's default corner |
| Comfortable | md | 8px | Content cards, model tiles, code-windows |
| Large | lg | 12px | Larger feature shells |
| Featured | xl | 16px | Hero / promo shells (rare) |
| Pill | pill | 9999px | Avatars only — never primary CTAs |

The 4px CTA radius is the signature sharp corner. fal deliberately avoids pill-shaped buttons; even badges stay at 4px to keep the fast, technical register consistent.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow, no border | Body sections, top nav, hero, stat strips |
| 1 — Soft hairline | 1px `#e5e7eb` border | Standard cards, model tiles, pricing tiers |
| 2 — Ambient | 1px border + `rgba(0,0,0,0.04)` shadow | Card on hover |
| 3 — Standard | 1px border + `rgba(0,0,0,0.06)` shadow | Dropdowns, popovers |
| 4 — Elevated | `rgba(0,0,0,0.10)` shadow | Modal entrance |
| 5 — Modal | Standard shadow + backdrop dim 60% | Dialogs |

### Shadow Philosophy
fal's depth model is near-flat. Separation comes overwhelmingly from 1px `#e5e7eb` hairline borders, not from shadow. When shadows do appear they are pure-black at very low alpha (`rgba(0, 0, 0, 0.04)`–`0.10`) — no colored or tinted shadows, consistent with the monochrome palette. Hover lifts are minimal (translateY(-1px) + a step up in ambient shadow).

## 8. Interaction & Motion

### Easing Curves
- **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for color / opacity.
- **Emphasized ease**: `cubic-bezier(0.2, 0, 0, 1)` — CTA hover, modal entrance.

### Duration Buckets
- **Fast (120ms)**: Color and opacity transitions, button hover.
- **Standard (200ms)**: Card hover lifts, dropdown opens.
- **Slow (320ms)**: Modal entrance, scroll reveals.

### Per-Component Micro-States
- **Button hover**: Near-black CTA deepens `#252527` → `#0a0a0a` over 120ms; 1px lift.
- **Card / model tile hover**: TranslateY(-1px) over 200ms; ambient shadow appears; for video model tiles, the preview clip begins playing on hover.
- **Code-window**: A "copy" affordance fades in on hover; no other state change.
- **Link hover**: Underline appears (text links) or color holds (already black).
- **Input focus**: 3px soft-black ring expands.

### Page Transitions
Standard browser navigation. Section-on-scroll reveals are 320ms fade-in-up. The hero headline may stagger-reveal by line on first paint.

### Reduced Motion
Honored — autoplaying model-preview clips pause and show a static frame; scroll reveals and transforms are removed; only opacity transitions remain.

## 9. Accessibility & A11y

### Contrast Pairs
- **Text on bg**: `#000000` on `#ffffff` = **21.0** — AAA (maximum).
- **Body on bg**: `#1b1b1d` on `#ffffff` = **17.2** — AAA.
- **On-brand on brand**: `#fafafa` on `#252527` = **14.7** — AAA.
- **Muted on bg**: `#6b7280` on `#ffffff` = **4.83** — AA (body), AAA (large).
- **Brand on bg**: `#252527` on `#ffffff` = **15.3** — AAA.

The monochrome palette is an accessibility asset: every meaningful text pair clears AAA except `text-muted`, which clears AA. There is no color-only signal to fail color-blind users — status is carried by icon + label inside product UI.

### Focus Indicators
3px `rgba(0, 0, 0, 0.18)` ring with a 1px solid `#000000` core. Monochrome, never colored.

### ARIA Patterns
- **Buttons**: Native `<button>`; icon-only carry `aria-label`.
- **Model tiles**: `<a>` wrapping the tile with an `aria-label` naming the model and modality.
- **Code blocks**: `<pre><code>` with `aria-label` (e.g. "fal Python client example").
- **Navigation**: `<nav aria-label="Primary">`.
- **Dialog**: `role="dialog"` + `aria-labelledby`.

### Keyboard Navigation
Tab order follows reading order. Skip-link to `<main>`. Modal traps focus + Escape closes. Model-gallery tiles are reachable and activatable by keyboard.

### Screen Reader Hints
Autoplaying preview clips are decorative and `aria-hidden`; the model name carries the meaning. Latency / throughput stats use `aria-label` for full unit readout ("120 milliseconds latency").

### Reduced Motion Handling
Honored — model-preview autoplay disabled (static frame), scroll reveals and transforms removed.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hamburger nav; hero headline 120→44px; model gallery 1-up; stats stack |
| Tablet | 640–1024px | Top nav tightens; gallery 2-up; hero headline ~72px |
| Desktop | 1024–1280px | Full top-nav; gallery 3–4-up; hero headline scales toward 120px |
| Wide | > 1280px | Same as desktop; max content 1280px; more clearance around hero |

### Touch Targets
Primary CTA min 40 × 40px. Icon-only button 36 × 36 with adequate hit area. Input height ~38px. Model tiles are large, full-width tap targets on mobile.

### Collapsing Strategy
Top nav collapses to hamburger at < 768px. The oversized hero headline scales down aggressively (clamp from ~44px mobile to 120px desktop) so it never overflows. Model gallery collapses 4-up → 2-up → 1-up.

### Image / Media Behavior
Model-output media (image / video / 3D) is the page's only color and scales fluidly inside tiles, cropped to a consistent aspect ratio. Code blocks keep a fixed font-size with horizontal scroll on mobile.

## 11. Content & Voice

### Tone
**Fast, technical, benchmark-driven.** fal writes for ML engineers and builders who run generative models in production and care about latency and cost. The tone is terse and capability-forward — headlines state what the platform does ("Run image, video, 3D and audio models"), body copy backs it with numbers (latency, throughput, model count). No whimsy, no hand-holding; closer to a benchmark sheet than a brochure.

### Microcopy Patterns
- **CTA verbs**: "Get started", "Explore", "Read the docs", "View models". Direct, no fluff.
- **Section labels**: Uppercase / small-caps eyebrow — "IMAGE", "VIDEO", "3D", "AUDIO", "PRICING".
- **Stat numbers**: Followed by a unit — "120ms latency", "60+ models", "$X / 1M tokens". Set in mono.
- **Feature copy**: Verb-first ("Run any model", "Scale instantly", "Pay per second").

### Empty States
Dashboard product UI: "No deployments yet — run your first model with `fal run`" with a black link to docs. Instructive, terse.

### Error Messages
**Pattern**: `<icon-x in #dc2626> + "What went wrong" + "What to try next"`. Example: "Request failed — check your API key and model id."

### Success Confirmations
Toast in `#000000` text over `#ffffff` surface with a thin success stripe. "Model running — endpoint live." Auto-dismiss 4s.

## 12. Dark Mode & Theming

fal marketing is **light-default** — a pure-white canvas is the brand. Dark surfaces are rare and reserved for code-window cards (`#0a0a0a`) and the occasional dramatic band. There is no full dark-theme marketing variant. If a dark product theme is needed, map `bg: #0a0a0a`, `surface: #1b1b1d`, `border: #2a2a2a`, `text: #fafafa`, `text-muted: #9ca3af`, with the near-black CTA inverting to an off-white `#fafafa` fill with `#000000` label. Code-window cards keep their `#0a0a0a` background in both themes.

## 13. Lineage & Influences

fal's marketing aesthetic descends from the **minimal black-on-white developer-platform** lineage that runs through Vercel and Replicate — the broadsheet austerity of a pure-white canvas, black type, and a single near-black CTA. fal pushes that lineage to an editorial extreme: the focal display face at a 120px / 500 hero makes scale, not color, the primary contrast mechanism. The palette is strictly monochrome, which lets the generative-AI output — the sampled images, video frames, and 3D renders in the model gallery — supply the only color on the page.

The **sharp 4px corner** and the near-flat, hairline-bordered depth model are the fast, technical signature: square-ish where most SaaS brands round off, monochrome where most accent. The near-black `#252527` (not pure black) on the primary CTA borrows Linear's discipline of stepping just off pure black for surfaces, and the tight negative tracking on oversized headlines tracks the Stripe / Linear editorial-display tradition. What fal rejects is decorative color, gradients, pill buttons, and friendly roundness — everything that would slow the page's fast, benchmark-driven register.

- **Vercel** — Black-on-white developer-platform austerity; sharp near-black CTA on a pure-white canvas. https://vercel.com
- **Replicate** — Minimal monochrome generative-AI marketing where model output is the only color. https://replicate.com
- **Linear** — Negative-tracking display discipline; near-black-not-pure-black surface treatment. https://linear.app
- **Stripe** — Editorial display scale and tight letter-spacing on oversized marketing headlines. https://stripe.com

## 14. Do's and Don'ts

### Do
- Anchor every page on the pure white `#ffffff` canvas. Marketing is light-default.
- Set the hero headline huge — focal at 120px / 500 is the brand's signature move.
- Drive contrast through type size, weight, and tracking, not through color.
- Keep the chrome strictly monochrome — white, black, near-black `#252527` only.
- Let the generative-AI model output be the only color on the page.
- Use the near-black `#252527` fill (off-white `#fafafa` label) for the primary CTA.
- Pair it with the off-white `#fafafa` outlined "Explore" secondary CTA.
- Keep corners sharp — 4px on CTAs, inputs, and badges.
- Set latency, throughput, and model-count numbers in mono.
- Separate surfaces with 1px `#e5e7eb` hairlines, not heavy shadows.

### Don't
- Don't introduce a brand accent hue. fal is monochrome by design; color comes from model output only.
- Don't use pure black `#000000` for the CTA fill — the brand CTA is near-black `#252527`.
- Don't round CTAs into pills. The signature corner is a sharp 4px.
- Don't push the focal display weight past 600 — at hero scale it stays at 500.
- Don't shrink the hero headline to "safe" SaaS sizes; the oversized scale is the point.
- Don't add gradients, glows, or tinted shadows. Shadows are pure-black at low alpha.
- Don't swap publicSansRounded for a hard grotesque — its slight roundness softens the page.
- Don't drop body text below the `#1b1b1d` near-black; legibility and the monochrome contrast story depend on it.
- Don't add a second CTA color. Near-black primary + outlined secondary is the whole system.
- Don't fill the page with dark bands. Dark is rare and reserved for code-windows.

## 15. Agent Prompt Guide

### Quick Color Reference
```
Bg / Canvas:     #ffffff (pure white)
Bg Soft:         #fafafa (alternating band / "Explore" CTA fill)
Surface Soft:    #f5f5f5 (section tint)
Border:          #e5e7eb (1px hairline)
Text:            #000000 (pure black — headlines)
Text Body:       #1b1b1d (near-black running-text)
Text Muted:      #6b7280 (captions, secondary labels)
Brand / CTA:     #252527 (near-black "Get started" fill)
Brand Hover:     #0a0a0a (deepens toward black)
On-Brand:        #fafafa (off-white CTA label)
Surface Dark:    #0a0a0a (code-window background, rare dark band)
```

### Example Component Prompts

1. "Create a fal hero band on a pure-white `#ffffff` canvas with an oversized focal headline at 120px / weight 500 / -0.03em tracking in pure black `#000000` ('Generative AI — run image, video, 3D and audio models'), an 18px / 400 publicSansRounded `#1b1b1d` subhead, and two CTAs: a near-black `#252527` primary ('Get started', off-white `#fafafa` label, 4px radius) paired with an off-white `#fafafa` outlined secondary ('Explore', `#1b1b1d` label, 1px `#e5e7eb` border, 4px radius)."

2. "Design a generative-model gallery grid on `#ffffff`, 4 columns. Each tile: `#ffffff` background, 1px solid `#e5e7eb` border, 8px radius; the model output image fills the top edge-to-edge (the only color on the page), with the model name in focal 20px / 600 `#000000` and a mono `#6b7280` latency line ('120ms') below."

3. "Build a borderless stat strip on `#ffffff` with three callouts ('120ms', '60+', '99.9%') in focal 56px / 500 `#000000`, each with a mono `#6b7280` 12px uppercase label below ('LATENCY', 'MODELS', 'UPTIME'). 96px vertical padding, no borders, no shadows."

4. "Create a dark code-window card showing a fal Python client snippet: `#0a0a0a` background, mono 14px code with restrained syntax highlighting, 8px radius, 24px padding, a small 'python' tab indicator top-left, and a copy affordance that fades in on hover."

5. "Compose a pricing grid with 3 tiers on `#ffffff`. Plain `#ffffff` cards, 1px solid `#e5e7eb` border, 8px radius, 24px padding; tier names in focal 24px / 600 `#000000`, per-unit prices in mono, and a near-black `#252527` 4px-radius CTA ('Get started') in each. No accent color — distinguish the recommended tier with a heavier 2px `#000000` border, not a hue."

6. "Design a fal top-nav: 64px white `#ffffff` bar with a 1px `#e5e7eb` bottom hairline, lowercase focal wordmark left, a center menu (Models, Pricing, Docs, Blog), and right-side actions: an outlined `#fafafa` 'Explore' button + a near-black `#252527` 'Get started' button, both at 4px radius."

### Iteration Guide
1. Start with the white canvas and set the headline far larger than feels comfortable — 120px is the target at desktop.
2. Keep the chrome strictly monochrome. If you reach for a brand hue, stop — the only color is model output.
3. Tighten the headline tracking as you scale it up (`-0.018em` at 40px down to `-0.03em` at 120px).
4. Use the near-black `#252527` CTA (not pure black) and pair it with the off-white outlined secondary.
5. Keep every corner sharp — 4px on CTAs and inputs, 8px on cards. Never pill the primary CTA.
6. Set every speed/scale number in mono; it's where the technical credibility lives.
7. Separate surfaces with 1px `#e5e7eb` hairlines before reaching for any shadow.
8. Let the generative-output thumbnails carry all the color — the more monochrome the chrome, the more they pop.

---

*Theme-toggle audit: score=2, signals=[tailwind-dark-class]*