What is Replicate's primary brand color?

Replicate's brand color is a hot orange — #ea2804 — paired with a deeper pressed variant at #c01f00 and a lighter atmospheric mid-stop at #ff6a3d for the hero radial mesh. The token is reserved for three roles only: the primary CTA background, the home-page hero band, and inline link color. Treat it as a stamp — one orange element per viewport at most. Body copy, large surfaces, and decorative shapes never carry orange.

Does Replicate's design system have a dark mode?

The public marketing site is light-only, but it uses dark inversion strategically. The default canvas is cream (#f9f7f3) with deep ink text (#202020), and selected components flip to the dark surface (#202020) inside the cream layout: every code well, the featured center pricing tier, and the 'How it works' walkthrough band. The global footer goes deeper to #000000. Dark mode at the page level is not part of the captured spec — only these inset dark moments are documented.

What typography does Replicate use, and what should I use if the proprietary families are unavailable?

Replicate runs three families with strict lanes: rb-freigeist-neue for all display sizes (30px and up, scaling to 128px in hero bands), basier-square for body and UI labels at 14–18px, and JetBrains Mono for every code well and inline command. When the proprietary families cannot be licensed, Bricolage Grotesque or Migra are credible substitutes for rb-freigeist-neue, and Geist or Inter can stand in for basier-square. Clamp display lineHeight to 1.0 explicitly and apply -3% letter-spacing on display-xxl / display-xl to match the original tightness — substitutes typically render with looser tracking by default.

Why is every interactive surface fully rounded?

Replicate uses rounded:full (9999px) on every interactive element — buttons, inputs, badges, avatars, sub-nav pills — while content cards step down to rounded:md (10px) for model cards and rounded:lg (16px) for pricing tiers. The split is structural: anything you tap is a pill, anything that holds content is a soft rectangle. The result reads as 'friendly precision' — there are no sharp corners anywhere except the full-bleed hero band and footer (rounded:none), and the contrast between fully-rounded pills inside softly-rounded cards gives the page its signature rhythm.

Can I use this DESIGN.md to build my own React AI platform?

Yes — the file is built to be fed to Claude, Cursor, or any AI agent that reads structured design tokens. The agent will reproduce Replicate's discipline (cream canvas, scarce orange, three-family typography stack, code-as-pull-quote dark wells) rather than a generic dark AI console theme. Every color, type style, radius, and spacing value is quoted as a literal hex or px number you can paste into Tailwind config, CSS variables, or a shadcn/ui registry.

What's missing from this DESIGN.md spec?

A few things, documented in the Known Gaps section: active and pressed visual states are extracted only for button-primary-pressed — other components rely on the focus ring (#3b82f6 at 50% opacity) for interactive feedback, which is not broken out as a per-component variant. The logged-in model-playground surfaces, the dashboard, and the billing / API-key management screens live behind authentication and are out of scope. The home hero illustration (the 'tinkerer at the workbench' black-ink artwork inside the orange band) is treated as decorative artwork, not a system component — replicating it requires bespoke illustration rather than tokens.

Replicate Design System

Replicate's design system as a DESIGN.md file.

About Replicate DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source replicate.com

AI & LLM Platforms
Developer Tools & IDEs

Replicate is a developer-tools platform built around running AI models in the cloud, and its marketing surfaces look nothing like the typical AI infrastructure site. The canvas is a warm cream (#f9f7f3) rather than pure white. The brand accent is a hot, almost-stamped orange (#ea2804) reserved for one CTA per viewport. Display headlines run at 128px in rb-freigeist-neue, a heavy condensed grotesque with -3px letter-spacing that lets multi-line titles pack into geometric typographic blocks. The overall personality reads less like a SaaS console and more like an art-zine: editorial-magazine restraint with a single hot accent doing all the brand work.

This page packages the full system as a single DESIGN.md file written to the Google Labs spec. Inside: 26 color tokens grouped into brand, surface, text, and semantic families; 17 type styles across three families (rb-freigeist-neue for display, basier-square for UI, jetbrains-mono for every literal command); 10 spacing values from 2px through a 160px hero band; 6 corner radii from 0px to a fully rounded 9999px; and 22 components covering buttons, model cards, pricing tiers, dark-inverted code wells, contributor avatars, and the global footer. Every value is quoted as a hex, a px number, or a named token so an agent can read and reproduce it without guessing.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will produce React components that match Replicate's discipline rather than a generic dark-mode AI theme — cream canvas, scarce orange, fully-rounded interactive surfaces, code-as-print pull-quotes. Or use it as a reference for your own audit: this system is worth studying because it solves a specific problem (how does a developer platform feel warm and editorial without abandoning monospace code?), and the answer lives in a small set of strict rules about where orange, dark inversion, and 128px display type are allowed to appear.

What makes it distinct

Cream canvas #f9f7f3never pure white, the warm temperature carries every page above the fold
Hot orange #ea2804 used as a stampone orange element per viewport, never decorative
rb-freigeist-neue at 128px / lineHeight 1.0 / -3px trackingdisplay headlines pack into geometric blocks
Three-family stack: rb-freigeist-neue for display, basier-square for UI, jetbrains-mono for every code well
Every interactive surface is fully rounded (9999px)buttons, inputs, badges, avatars — while cards step to 10px

Live at replicate.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

replicate.com

Explore Replicate

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Replicate design system FAQ

Common questions about Replicate's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Replicate in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→