Prefect Design System

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.