Prefect Design System

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

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.