---
version: alpha
name: "Prefect"
website: "https://www.prefect.io"
description: >-
  A workflow-orchestration platform whose marketing hero opens on a cosmic-black band (`--horizon-dark` #06000e) sliced by a diagonal "Horizon" gradient that walks cobalt #2084ab through cyan #47b6e3, sky #8adeff, tan #facd96, peach #feb255, sunset orange #fe9655 and finally hot pink #ff4bbd — a single continuous color stripe that fills the right half of the hero like a sunset captured in vector. Below the fold the page resets to a white canvas with dark `#0d1117` code cards lifted on faint shadows, and Articulat CF runs the display tier at 64px weight 600 while Geist and Aeonik Mono share the body and uppercase-label work. The page is the only data-orchestration brand that signs itself with a custom multi-stop gradient rather than a single accent.

seo:
  title: "Prefect Design System for React — Horizon gradient hero, Articulat CF, 17 components"
  metaDescription: "Prefect's marketing system pairs a cosmic-black hero with the Horizon multi-stop gradient (cobalt to sunset pink) and a white body canvas with #0d1117 code cards. Articulat CF display, Geist body, Aeonik Mono labels. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Horizon gradient — eight-stop diagonal from #06000e cosmic-black through cobalt, cyan, sky, tan, peach, sunset orange to pink, filling the entire right edge of the hero"
    - "Two-canvas page — dark hero #06000e cuts to a white below-fold body, the two surfaces meeting at the logo wall with no atmospheric blend"
    - "Three-family typographic split — Articulat CF for the 64px display, Geist for body, Aeonik Mono for uppercase 12px small-caps labels with 2.4px tracking"
    - "Cosmic-black canvas — `--horizon-dark` #06000e is darker than pure #000000 in OKLCH (10% lightness with violet undertone), reserved exclusively for the hero band"
    - "GitHub-dark code cards — #0d1117 code blocks with #30363d borders match the GitHub-dark editor palette; not a Prefect token, an industry-standard borrowed for readability"
  tags:
    - "Workflow & No-code"
    - "Backend, Database & DevOps"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Prefect's marketing site signs itself with a single design move no peer in the data-orchestration category attempts: an eight-stop diagonal gradient called Horizon that fills the right half of the hero. The stripe walks from cosmic-black at the top-left through cobalt blue, cyan, sky-blue, tan, peach, sunset orange and finally hot pink at the bottom-right — a continuous color trace that resembles a sunset compressed into a diagonal vector rather than the photographic-gradient mesh Stripe or Linear lean on. The headline "Automation for the context era" sits in white Articulat CF 64px weight 600 against the dark left half, and the gradient hangs to the right as the only chromatic statement above the fold.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 21 color tokens — the eight Horizon gradient stops wired as `--horizon-*` CSS variables, a "Sunset Stripe" extension palette of seven darker browns and steels (`--sunset-stripe-*`), the GitHub-dark code-card tier (#0d1117 body, #30363d border, #e6edf3 text), and the structural ink-on-white tones for the below-fold body. The typography group declares 13 tokens across three families — Articulat CF for the 64px display tier, Geist for body and nav, Aeonik Mono for uppercase 12px section labels with 2.4px tracking. 17 component definitions cover the dark-hero CTA, the white below-fold card, the dark code block, the testimonial tile, the stat-number cell, and the category-label strip.

    Feed this file to Claude, Cursor, or another AI coding tool and it reproduces Prefect's specific moves: the two-canvas page split (dark hero, white body) rather than a single-canvas dark or light system, the Horizon gradient as the brand voltage instead of a single accent hex, the GitHub-dark code-card treatment used as-is (an industry-standard borrowed for readability rather than re-themed), and the Aeonik-Mono uppercase small-caps label tier that does the section-marking work most brands hand to a sans label. The one move worth borrowing only if your product story is genuinely multi-stage is the gradient itself — on a single-product surface it reads as decorative.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.prefect.io"
      title: "Prefect — official site"
      description: "Prefect's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Prefect's primary brand color?"
      answer: "Prefect doesn't have a single brand voltage in the conventional sense — it has the Horizon gradient. The signature is an eight-stop diagonal that walks `--horizon-dark` #06000e (cosmic-black) through `--horizon-blue-dark` #2084ab, `--horizon-blue-mid` #47b6e3, `--horizon-blue-light` #8adeff, `--horizon-tan` #facd96, `--horizon-orange` #feb255, `--horizon-orange-dark` #fe9655 and ends at `--horizon-pink` #ff4bbd. The full gradient is declared as a CSS variable `--horizon-gradient` so it can be applied as a single token. The cobalt stop #2084ab is the closest thing to a single brand voltage if you need to pick one — it's the load-bearing center of the gradient and appears in product chrome elsewhere as Prefect Cloud's primary."
    - id: "typography"
      title: "What typefaces does Prefect use, and what should I substitute?"
      answer: "Prefect runs three families with a strict split. Articulat CF carries the 64px hero h1 at weight 600 with -1.408px tracking — the editorial-magazine register, wired as `--font-sans`. Geist carries every body paragraph, nav link, and h3 below the fold at weights 400-600, in sizes 12-24px. Aeonik Mono carries the small-caps section labels at 10-12px weight 400 with 2.4px tracking and uppercase transform, wired as `--font-mono`. The closest open substitute for Articulat CF is Inter at the same display sizes; for Aeonik Mono, JetBrains Mono or IBM Plex Mono transfer cleanly. Geist is already open-source — Vercel ships it free."
    - id: "horizon-gradient"
      title: "How does Prefect use the Horizon gradient on the page?"
      answer: "The Horizon gradient appears in exactly one rendered position on the captured page — the right half of the hero band, where it functions as the background of a hero-side illustration block. The gradient walks cobalt at the top through cyan, sky, tan, peach, sunset, and ends in hot pink at the bottom — a sunset compressed into a vector. The eight stops are individually wired as `--horizon-*` CSS variables so they can be sampled for individual product accents (Prefect Cloud chrome borrows the cobalt #2084ab; Horizon AI infrastructure borrows the pink #ff4bbd). Below the fold the gradient is absent and the page is monochromatic — the chromatic budget is spent in one hero moment."
    - id: "code-cards"
      title: "Why does Prefect use the GitHub-dark color palette for code blocks?"
      answer: "Prefect's code-block tier uses #0d1117 body, #30363d border, #e6edf3 text, #6e7681 line numbers, and #161b22 header — the standard GitHub-dark editor palette, borrowed as-is rather than re-themed. The choice is pragmatic: developers reading Prefect's Python flow examples mentally pre-translate them against GitHub-dark, and re-theming the snippet (to a Prefect-purple or a custom dark palette) would force the reader to recalibrate. The CSS variables are declared as `--code-bg`, `--code-border`, `--code-text`, `--code-line-number`, `--code-header` — all using the GitHub hex values verbatim."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own orchestration marketing site?"
      answer: "Yes — the file is designed for Claude, Cursor, Copilot, or any AI tool that reads structured design tokens. The agent will reproduce Prefect's specific moves: the two-canvas page split (dark hero #06000e, white body #ffffff) instead of a single-canvas system, the eight-stop Horizon gradient as the brand voltage, the GitHub-dark code-card treatment borrowed verbatim, and the Aeonik Mono uppercase small-caps label tier. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or a `:root` block. The one move worth borrowing only if your product genuinely spans multiple stages is the gradient — on a single-stage surface it reads as decorative chrome rather than as a visual map of the product."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  horizon-dark: "#06000e"
  horizon-blue-dark: "#2084ab"
  horizon-blue-mid: "#47b6e3"
  horizon-blue-light: "#8adeff"
  horizon-tan: "#facd96"
  horizon-orange: "#feb255"
  horizon-orange-dark: "#fe9655"
  horizon-pink: "#ff4bbd"
  sunset-yellow: "#fbbf24"
  sunset-burnt-orange: "#c46007"
  canvas: "#ffffff"
  ink: "#000000"
  code-bg: "#0d1117"
  code-header: "#161b22"
  code-border: "#30363d"
  code-text: "#e6edf3"
  code-line-number: "#5b7c88"

typography:
  display-xl:
    fontFamily: "\"Articulat CF\", system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 67.84px
    letterSpacing: "-1.408px"
  display-mega:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 72px
    letterSpacing: "-3.6px"
  display-lg:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: "-1.2px"
  heading-md:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: 0
  heading-sm:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Articulat CF\", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27.2px
    letterSpacing: 0
  body-md:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0
  body-sm:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  button-md:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  nav-link:
    fontFamily: "Geist, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  mono-caps:
    fontFamily: "\"Aeonik Mono\", ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "2.4px"
  mono-caps-sm:
    fontFamily: "\"Aeonik Mono\", ui-monospace, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: "0.5px"

rounded:
  none: "0px"
  sm: "4px"
  md: "6px"
  lg: "8px"
  xl: "16px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "6px"
  base: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "64px"
  4xl: "128px"

components:
  hero-section:
    backgroundColor: "{colors.horizon-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "128px 24px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
  hero-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  stat-number:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-mega}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  mono-caption:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.mono-caps}"
  button-primary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.horizon-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "40px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.canvas}"
  top-nav:
    backgroundColor: "{colors.horizon-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "6px 12px"
  card-dark:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "24px"
    borderColor: "{colors.code-border}"
  card-platform:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "32px"
    borderColor: "{colors.code-border}"
  code-block:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.code-text}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "16px"
    borderColor: "{colors.code-border}"
  testimonial-card:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "24px"
    borderColor: "{colors.code-border}"
  stat-cell:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "24px"
    borderColor: "{colors.code-border}"
  footer:
    backgroundColor: "{colors.horizon-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "64px 24px"
---

## Overview

Prefect's marketing site does what no other workflow-orchestration brand attempts. **Horizon-as-signature**: the hero opens on a cosmic-black canvas (`{colors.horizon-dark}` — #06000e) sliced by a diagonal eight-stop gradient that walks cobalt #2084ab through cyan #47b6e3, sky-blue #8adeff, tan #facd96, peach #feb255, sunset orange #fe9655 and ends in hot pink #ff4bbd. The whole gradient is wired into a single CSS variable `--horizon-gradient`, applied to the right half of the hero band as the brand statement. Where Airflow signs itself with a single magenta accent and Dagster commits to a violet-and-black duotone, Prefect runs a continuous color trace that resembles a sunset compressed into a vector — the only data-orchestration site in the directory that uses a multi-stop gradient rather than a single hex as its voltage.

The page is structurally a **two-canvas split**. The hero band is cosmic-black; the entire below-fold body resets to pure white, with `{colors.code-bg}` (#0d1117) cards lifted against it. The two surfaces meet at the logo wall ("Cash App, WHOOP, Coinist, Ashby, Square, Meta, NASA, Dutch, Brave") with no atmospheric blend or gradient transition — the canvas just flips. This is the inverse of the dev-tools convention where dark canvas runs the entire page (Linear, Vercel, Railway); Prefect commits to dark hero plus light body, which lets the Horizon gradient read as a single statement rather than as ambient chrome.

The typographic move is a **three-family role split**. Articulat CF carries the 64px hero h1 at weight 600 with -1.408px tracking — wired as `--font-sans`, this is the editorial-magazine register that does the loud-display work. Geist carries every body paragraph, nav link, and h2 below the fold at weights 400-700, and Aeonik Mono (`--font-mono`) carries the small-caps section labels at 10-12px with 2.4px tracking and uppercase transform. Where most data-platform brands run a single sans family, Prefect's split gives the small-caps labels ("APPS PLATFORM", "PLATFORM", "CASE STUDIES", "TESTIMONIALS") a distinct typographic voice that signals architecture-document rather than marketing-page.

**Key Characteristics:**
- Horizon gradient as voltage — `--horizon-gradient` walks 8 stops from cosmic-black through cobalt, cyan, sky, tan, peach, sunset orange to hot pink in a single CSS variable; applied to the right half of the hero band as the brand's only chromatic statement.
- Two-canvas page split — `{colors.horizon-dark}` (#06000e) hero plus `{colors.canvas}` (#ffffff) body, with the seam at the logo wall and no atmospheric transition.
- GitHub-dark code cards — `{colors.code-bg}` (#0d1117) with `{colors.code-border}` (#30363d) and `{colors.code-text}` (#e6edf3) borrowed verbatim from the GitHub-dark editor palette.
- Three-family typographic split — Articulat CF for 64px display, Geist for body and nav (12-72px), Aeonik Mono for uppercase 12px small-caps labels.
- Editorial-mega stat numbers — homepage stats ("2x", "73%", "10x") render in Geist weight 700 at 72px with -3.6px tracking, the tightest tracking on the page.
- Custom "Sunset Stripe" extension palette — six darker browns and steels (`--sunset-stripe-blue-grey` through `--sunset-stripe-yellow-accent`) wired as CSS vars but absent from the rendered marketing surface.
- Generous radius scale — `{rounded.xl}` (16px) on every card, `{rounded.lg}` (8px) on code blocks, `{rounded.md}` (6px) on buttons; full pill exists but is reserved for tag chips.
- 8px base spacing unit; section padding sits at 128px on the hero band, 64px on below-fold bands.

## Colors

### Horizon Gradient (the brand voltage)

- **Horizon Dark** (`{colors.horizon-dark}` — #06000e): the cosmic-black floor of the gradient and the hero-band canvas. Wired as `--horizon-dark`. OKLCH 10% lightness with a violet undertone — darker and more saturated than pure black, which is why the gradient's cobalt-blue stop reads as a sunrise emerging from a night sky rather than from charcoal.
- **Horizon Blue Dark** (`{colors.horizon-blue-dark}` — #2084ab): the load-bearing cobalt center of the gradient. Wired as `--horizon-blue-dark`. The closest thing Prefect has to a single brand voltage — Prefect Cloud chrome borrows this hex as its primary in product surfaces.
- **Horizon Blue Mid** (`{colors.horizon-blue-mid}` — #47b6e3): the cyan mid-tone in the gradient stack.
- **Horizon Blue Light** (`{colors.horizon-blue-light}` — #8adeff): the sky-blue stop. Used in product diagrams as the color of "ingress" or "data-in" nodes.
- **Horizon Tan** (`{colors.horizon-tan}` — #facd96): the warm-transition stop. The gradient changes from blue to orange through this tan band.
- **Horizon Orange** (`{colors.horizon-orange}` — #feb255): the peach stop in the gradient.
- **Horizon Orange Dark** (`{colors.horizon-orange-dark}` — #fe9655): the saturated sunset-orange stop, second-from-bottom in the gradient stack.
- **Horizon Pink** (`{colors.horizon-pink}` — #ff4bbd): the hot-pink final stop. Wired as `--horizon-pink` and used in product surfaces as the Horizon AI infrastructure brand's primary.

### Sunset Stripe Extension (declared, mostly absent)

- **Sunset Yellow** (`{colors.sunset-yellow}` — #fbbf24): wired as `--sunset-stripe-yellow-accent`. Declared as a brand-tier accent in CSS but absent from the captured marketing render.
- **Sunset Burnt Orange** (`{colors.sunset-burnt-orange}` — #c46007): wired as `--sunset-stripe-burnt-orange`. Same — declared, absent on the page.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): pure white, the below-fold body floor. Wired as `--background`. Carries every section from the logo wall down to the footer.
- **Ink** (`{colors.ink}` — #000000): pure black, the dominant text tone on the white below-fold body. Wired as `--color-black`. Used for section headlines, body paragraphs, and stat numbers.

### Code Card Tier (GitHub-dark, borrowed)

- **Code Background** (`{colors.code-bg}` — #0d1117): the dark surface for every code block and feature card below the fold. Wired as `--code-bg`. Borrowed verbatim from the GitHub-dark editor palette so developers reading Prefect's Python flow examples don't need to recalibrate.
- **Code Header** (`{colors.code-header}` — #161b22): one step lighter than the code body, used as the code-block header strip. Wired as `--code-header`, also `--primary` in the shadcn convention.
- **Code Border** (`{colors.code-border}` — #30363d): the hairline outline around every dark card and code block. Wired as `--code-border`.
- **Code Text** (`{colors.code-text}` — #e6edf3): the bright text on the code-card surface. Wired as `--code-text`.
- **Code Line Number** (`{colors.code-line-number}` — #5b7c88): the muted line-number gutter color. Wired as `--code-line-number`.

## Typography

### Font Families

The system runs three voices with a strict role split. **Articulat CF** carries the 64px hero h1 — wired as `--font-sans`, the editorial-magazine register. **Geist** carries every body paragraph, nav link, h2 below the fold, and the editorial-mega stat numbers at 72px weight 700 — declared as the secondary sans. **Aeonik Mono** carries every uppercase small-caps section label at 10-12px with 2.4px tracking — wired as `--font-mono`. Fallback stacks walk `system-ui, sans-serif` for the sans tier and `ui-monospace, monospace` for mono.

The pairing is the distinguishing move. Articulat CF + Geist gives two different sans-serif voices for display and body without the homogenized feel of a single-family system, and the Aeonik Mono label tier signals "architecture document" rather than "marketing page."

### Hierarchy

| Token | Size | Weight | Family | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 600 | Articulat CF | Hero h1 ("Automation for the context era"), -1.408px tracking |
| `{typography.display-mega}` | 72px | 700 | Geist | Stat numbers ("2x", "73%", "10x"), -3.6px tracking |
| `{typography.display-lg}` | 48px | 700 | Geist | Section h2 ("The standards for Python automation", "Two platforms. One mission.") |
| `{typography.heading-md}` | 24px | 600 | Geist | h3 / card titles ("Prefect Cloud", "Prefect Horizon") |
| `{typography.heading-sm}` | 18px | 600 | Geist | Small headings, h4 |
| `{typography.body-lg}` | 18px | 400 | Articulat CF | Hero sub-paragraph |
| `{typography.body-md}` | 16px | 400 | Geist | Default running text, blockquote |
| `{typography.body-sm}` | 14px | 400 | Geist | Caption rows, secondary copy |
| `{typography.caption}` | 12px | 400 | Geist | Metadata, dates, small labels |
| `{typography.button-md}` | 14px | 500 | Geist | CTA and button labels |
| `{typography.nav-link}` | 16px | 400 | Geist | Top-nav link labels |
| `{typography.mono-caps}` | 12px | 400 | Aeonik Mono | Uppercase section labels, 2.4px tracking ("APPS PLATFORM", "TESTIMONIALS") |
| `{typography.mono-caps-sm}` | 10px | 400 | Aeonik Mono | Smaller uppercase labels, 0.5px tracking |

### Principles

The hero h1 sits at Articulat CF 64px weight 600, but the loudest typographic moment on the page is the 72px Geist weight 700 stat numbers — the "2x" / "73%" / "10x" cells in the "Trusted in production" band. Tracking tightens from -1.408px on the hero to -3.6px on the stat numbers, a deliberate move that gives the numerical claims more typographic muscle than the headline.

The Aeonik Mono small-caps tier does the section-marking work most brands hand to a sans label. Every band on the page opens with an uppercase 12px Aeonik Mono label ("APPS PLATFORM", "PLATFORMS", "CASE STUDIES", "TESTIMONIALS") with 2.4px tracking — the tracking is wide enough that the labels read as architecture diagrams' section headers rather than as copy.

### Note on Font Substitutes

Articulat CF is licensed; **Inter** at the same weights with slightly tighter tracking (-1.5%) is the closest open substitute for the 64px display tier. **Geist** is open-source — Vercel ships it free. For the Aeonik Mono tier, **JetBrains Mono** or **IBM Plex Mono** transfer cleanly at 12px with 2.4px tracking; the uppercase transform plus tracking is the dominant signal, not the specific monospace cap shape.

## Layout

### Spacing System

- **Base unit:** 8px (51 captured occurrences) — the dominant gap value.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 6px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 64px · `{spacing.4xl}` 128px.
- **Section padding (vertical):** 128px on the hero band, 64px on below-fold bands.
- **Card internal padding:** `{spacing.xl}` (24px) on `{component.card-dark}` and `{component.testimonial-card}`; `{spacing.2xl}` (32px) on the larger `{component.card-platform}`.
- **Top-nav padding:** 12px vertical, 24px horizontal.

### Grid & Container

- **Max content width:** ~1080px on the hero text block, ~1280px on the card grids and logo wall.
- **Hero:** 50/50 split — left half holds the headline + sub-paragraph + 2 CTAs, right half holds the Horizon-gradient illustration block.
- **Below-fold platform row:** 2-column 50/50 split pairing the "Prefect Cloud" card with the "Prefect Horizon" card.
- **Stats band:** 3-column ("2x" / "73%" / "10x") with each cell in a dark `{component.stat-cell}` card.
- **Testimonials band:** 2-column 2-row grid of 4 dark testimonial cards.

### Rhythm

The page alternates between **chromatic** (the hero with its Horizon gradient) and **monochromatic** (every below-fold band on white with `{colors.code-bg}` dark cards). The chromatic budget is spent entirely in the hero — below the fold the page never uses a brand-tier color again. Section transitions happen via uppercase Aeonik Mono labels rather than via background shifts; the rhythm is documentation-page rather than scrollytelling.

## Elevation

The system has essentially **no shadow tier**. The captured page shows zero shadow occurrences in the structural color set — elevation is carried entirely by surface contrast.

- **Flat (no shadow):** hero, body bands, footer — 99% of surfaces.
- **Tonal lift:** `{colors.code-bg}` (#0d1117) dark cards sit on the white `{colors.canvas}` (#ffffff) — the high lightness contrast (94 OKLCH points apart) reads as elevation without any shadow being drawn.
- **Hairline outlines:** `{colors.code-border}` (#30363d) carries the card-edge work, borrowed verbatim from GitHub-dark.

## Shapes

The radius scale is **generous + pill**:

- `{rounded.none}` 0px — only on the hero-section edge.
- `{rounded.sm}` 4px (2 occurrences) — rare, used on a couple of small UI surfaces.
- `{rounded.md}` 6px (14 occurrences) — buttons, secondary chips.
- `{rounded.lg}` 8px (4 occurrences) — code blocks.
- `{rounded.xl}` 16px (11 occurrences) — every card surface (`{component.card-dark}`, `{component.card-platform}`, `{component.testimonial-card}`, `{component.stat-cell}`).
- `{rounded.full}` 9999px (20 occurrences via the extracted `3.35544e+07px` rendering) — tag chips and the Aeonik Mono small-caps label badges.

The 16px card radius is the dominant surface tone. Generous rounding on dark cards against the white body gives the below-fold rhythm a softer, document-like feel rather than the sharp-cornered terminal-panel register that Trigger.dev or Linear lean on.

## Components

**`hero-section`** — Full-bleed `{colors.horizon-dark}` (#06000e) canvas, 128x24px padding. Houses the left-side headline stack and the right-side Horizon-gradient illustration block.

**`hero-heading`** — White `{colors.canvas}` text on the dark canvas, Articulat CF 64px / 600 / -1.408px tracking. The display tier.

**`hero-paragraph`** — White text at `{typography.body-lg}` Articulat CF 18px / 400 / 27.2px line-height. The sub-paragraph beneath the headline.

**`section-heading`** — `{colors.ink}` text on the white below-fold canvas, Geist 48px / 700 / -1.2px tracking. Used for "The standards for Python automation", "Two platforms. One mission.", "Trusted in production", "What teams are saying".

**`stat-number`** — Geist 72px / 700 / -3.6px tracking. The "2x", "73%", "10x" stat-cell values — the tightest tracking on the page.

**`body-paragraph`** — Default Geist `{typography.body-md}` (16px / 400 / 26px line-height) in `{colors.ink}`. The workhorse paragraph style.

**`mono-caption`** — Aeonik Mono `{typography.mono-caps}` (12px / 400) with uppercase transform and 2.4px tracking. Used for "APPS PLATFORM", "PLATFORMS", "CASE STUDIES", "TESTIMONIALS" section labels.

**`button-primary`** — White `{colors.canvas}` fill on the dark hero, `{colors.horizon-dark}` text, `{rounded.md}` 6px radius, 8x16 padding, 40px height. "Prefect Cloud" is the canonical instance.

**`button-secondary`** — Transparent fill, white text, 1px white border, same radius and dimensions. "Prefect Horizon" is the secondary CTA on the hero.

**`top-nav`** — `{colors.horizon-dark}` surface, 64px height, white wordmark flush left, product-nav links (Platform, Solutions, Events, Pricing, Blog, Docs, Customers) center, "Get a Demo / Sign In / Sign Up" cluster flush right.

**`nav-link`** — Transparent background, white text in `{typography.nav-link}` (16px / 400), 6x12 padding.

**`card-dark`** — `{colors.code-bg}` (#0d1117) fill, white text, `{rounded.xl}` 16px radius, 24px padding, 1px `{colors.code-border}` outline. The default content card on the white body.

**`card-platform`** — Same `{colors.code-bg}` fill, `{rounded.xl}` 16px radius, 32px padding (more generous than `card-dark`). The two big platform cards ("Prefect Cloud", "Prefect Horizon") use this variant.

**`code-block`** — `{colors.code-bg}` fill, `{colors.code-text}` (#e6edf3) text, `{rounded.lg}` 8px radius, 16px padding. Holds Python flow examples with `{colors.code-line-number}` (#5b7c88) gutter numbers and `{colors.code-header}` (#161b22) top strip.

**`testimonial-card`** — `{colors.code-bg}` fill, white text, `{rounded.xl}` 16px radius, 24px padding. Used in the 2x2 testimonial grid.

**`stat-cell`** — `{colors.code-bg}` fill, white text, `{rounded.xl}` 16px radius, 24px padding. Holds the `{component.stat-number}` 72px value plus a small caption row ("Cash App / Faster fraud prevention with enterprise security").

**`footer`** — `{colors.horizon-dark}` fill, white text, 64x24 padding. Returns to the cosmic-black canvas — the dark hero and dark footer bookend the white below-fold body.

## Do's and Don'ts

**Do** treat the Horizon gradient as a single hero moment. The system has exactly one rendered application of the eight-stop gradient — on the right half of the hero band. Repeating it across multiple sections would dilute the only chromatic statement on the page and make the gradient feel decorative rather than load-bearing.

**Do** use `{colors.code-bg}` (#0d1117) for every dark card on the white body. The GitHub-dark code-card treatment is borrowed verbatim; reskinning it to a Prefect-purple or a custom dark palette forces the reader to recalibrate when reading the Python flow examples.

**Do** keep section labels in Aeonik Mono uppercase at 12px with 2.4px tracking. The small-caps mono tier is the system's architecture-document signal — replacing it with a sans uppercase label flattens the page into a generic SaaS rhythm.

**Do** run the stat-number cells at Geist 72px / 700 with -3.6px tracking. The tighter tracking on the numerical claims is the loudest typographic moment on the page; softening it to -1px or weight 600 reads as hedging.

**Don't** use the Horizon gradient as a background fill behind a card or behind a section heading. The gradient is a chromatic statement in the hero and only the hero; using it as ambient chrome anywhere else turns the brand mark into wallpaper.

**Don't** render any below-fold card on a custom dark color other than `{colors.code-bg}` (#0d1117). The system commits to GitHub-dark as the dark-card surface; deviating to a Prefect-specific dark (e.g., a deep cobalt-tinged near-black) breaks the borrowed-readability contract with developers.

**Don't** sample individual Horizon gradient stops as standalone accents on the marketing chrome. The stops are designed to read as a sequence — using `{colors.horizon-pink}` alone as a CTA fill on a card pulls one tile out of the sunset and makes it read as a random pink rather than as the gradient's terminal point.

**Don't** mix the Articulat CF display with the Geist display in the same band. The hero h1 is Articulat CF and the below-fold section h2s are Geist — the seam is at the canvas flip. Putting an Articulat CF h2 on the white body would smudge the typographic role split that does the editorial-magazine vs. documentation register signal.

## Known Gaps

- **Sunset Stripe palette:** an extension family of seven darker brown / steel-blue hexes wired as `--sunset-stripe-blue-grey`, `--sunset-stripe-ocean-blue`, `--sunset-stripe-grey-blue`, `--sunset-stripe-golden-orange`, `--sunset-stripe-steel-blue`, `--sunset-stripe-tan`, and `--sunset-stripe-deep-blue` is declared in CSS but absent from the captured marketing render; intended use lives in product surfaces or alternate brand applications.
- **Hover and focus states:** the captured marketing surface shows resting states only. Focus rings, disabled tints, error states — all live in the Prefect Cloud product app rather than on the marketing site.
- **Form input:** the marketing site has no rendered input field; `text-input` is not captured here. The input chrome lives in the auth flow and the Prefect Cloud dashboard.
- **Light mode for code cards:** the GitHub-dark code-card treatment is the only theme exposed on the marketing surface. A light-mode code-card variant exists in the docs site (`docs.prefect.io`) but is not represented here.
- **Motion:** the Horizon gradient is static in the captured render but the page has subtle scroll-into-view animations on the platform-card row and the stat cells. Easing curves, stagger timing, and the parallax depth on the hero illustration live in the React runtime, not in the spec.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Prefect Cloud dashboard, flow-run detail view, and worker-management surfaces carry a richer token set — run-status colors, task-state badges, log-level chrome — that is not represented here.
- **Horizon AI infrastructure sub-brand:** the Horizon product (the pink-tier of the gradient) has its own sub-marketing surface at `prefect.io/horizon` with deeper pink/violet chrome; this DESIGN.md captures the top-level brand only.