Replicate Design System

Overview

Replicate is a developer-tools platform with the soul of an art zine. The public marketing surfaces sit on a warm cream canvas ({colors.canvas} — #f9f7f3) rather than the white-or-near-black default of typical AI infrastructure sites, and that single decision colors everything else: photography reads as editorial, code wells read as printed pull-quotes, and the brand orange ({colors.primary} — #ea2804) feels like a stamp rather than a notification.

The typography is the load-bearing decoration. rb-freigeist-neue — a heavy, slightly condensed grotesque — appears at sizes up to 128px in hero bands, with a tight lineHeight: 1.0 and negative letter-spacing that lets multi-line headlines pack into geometric blocks. The companion family, basier-square, takes care of body, button labels, and metadata in the 14–18px range. JetBrains Mono carries every code well, command, and example. Three families, three jobs, no overlap.

Page rhythm cycles between a default cream canvas, a bold full-bleed orange hero band, and a {colors.surface-dark} (#202020) section that hosts the code stories — the "how it works" walkthrough. Curves are intentional and soft: every interactive surface (buttons, inputs, tags, avatars) uses {rounded.full} (9999px), while content cards and code wells step up to {rounded.md} (10px) or {rounded.lg} (16px). There are no sharp corners on Replicate; the system reads as friendly precision.

Key Characteristics:

• A warm cream canvas ({colors.canvas} — #f9f7f3) replaces the typical white background, paired with {colors.surface-bone} (#f3f0e8) for inset cards.
• Hot orange ({colors.primary} — #ea2804) is reserved for the primary CTA, the hero band, and inline link color. Never decorative.
• Display headlines run massive — {typography.display-xxl} at 128px in hero bands and {typography.display-xl} at 72px on section openers — with tight lineHeight: 1.0 and negative letter-spacing down to -3px.
• Three-family typography stack: rb-freigeist-neue for display, basier-square for UI/body, jetbrains-mono for code.
• Every interactive element is fully rounded ({rounded.full} 9999px) — buttons, inputs, badges, avatars — while content cards step to {rounded.md} 10px.
• Dark code wells ({colors.surface-dark} #202020 background) sit inside the cream canvas as full-bleed reading surfaces, mimicking print pull-quotes.
• Section rhythm: cream → orange hero → cream → dark code-story band → cream → black footer (#000000).

Known Gaps

• Active/pressed visual states are documented for button-primary-pressed only; other components rely on the focus ring ({colors.ring-focus} — rgba(59,130,246,0.5)) for interactive feedback, which is not extracted as a per-component variant.
• The model playground / try-this-model interactive surfaces (logged-in feature) are out of scope; only the public marketing canvas is documented.
• Dashboard / billing / API key management surfaces are not extracted — those live behind authentication.
• The home hero illustration ("the tinkerer at the workbench") is treated as decorative artwork, not a system component; replicating it requires bespoke illustration rather than tokens.