---
version: alpha
name: Replicate
website: "https://replicate.com"
description: |
  Replicate's marketing surfaces pair the warm-cream developer-tools aesthetic
  of an indie ML playground with a confident hot-orange brand accent and a
  signature display typeface (rb-freigeist-neue) sized aggressively large at
  72px+. The system reads as "AI lab notebook crossed with print magazine":
  cream and bone surfaces, dark ink type, monospace code wells, irregular
  hand-drawn-feeling diagrams, and a rich orange used scarcely on the most
  consequential CTA. Photography of contributors and example outputs is
  square-ish with mid-radius corners; everything else is borderless or hairline.

seo:
  title: "Replicate Design System for React — Orange #ea2804, rb-freigeist-neue, 22 components"
  metaDescription: "Replicate's design system as a DESIGN.md file. Hot orange #ea2804, rb-freigeist-neue at 128px, 22 components. For React, Next.js, and AI tools."
  highlights:
    - "Cream canvas #f9f7f3 — never pure white, the warm temperature carries every page above the fold"
    - "Hot orange #ea2804 used as a stamp — one orange element per viewport, never decorative"
    - "rb-freigeist-neue at 128px / lineHeight 1.0 / -3px tracking — display 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"
  tags:
    - "AI & LLM Platforms"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - 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."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Replicate's primary brand color?"
      answer: "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."
    - id: "dark-mode"
      title: "Does Replicate's design system have a dark mode?"
      answer: "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."
    - id: "typography"
      title: "What typography does Replicate use, and what should I use if the proprietary families are unavailable?"
      answer: "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."
    - id: "shape-language"
      title: "Why is every interactive surface fully rounded?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React AI platform?"
      answer: "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."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  primary: "#ea2804"
  primary-deep: "#c01f00"
  on-primary: "#ffffff"
  ink: "#202020"
  body: "#3a3a3a"
  charcoal: "#575757"
  mute: "#646464"
  ash: "#8d8d8d"
  stone: "#bbbbbb"
  on-dark: "#fcfcfc"
  on-dark-mute: "rgba(252,252,252,0.72)"
  canvas: "#f9f7f3"
  surface-bone: "#f3f0e8"
  surface-card: "#ffffff"
  surface-dark: "#202020"
  surface-deep: "#000000"
  hairline: "rgba(32,32,32,0.12)"
  hairline-strong: "#202020"
  divider-dark: "rgba(255,255,255,0.2)"
  hero-warm: "#ea2804"
  hero-glow: "#ff6a3d"
  hero-pink: "#f4a8a0"
  badge-success: "#2b9a66"
  link: "#ea2804"
  ring-focus: "rgba(59,130,246,0.5)"
  github-dark: "#24292e"

typography:
  display-xxl:
    fontFamily: rb-freigeist-neue
    fontSize: 128px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -3px
  display-xl:
    fontFamily: rb-freigeist-neue
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.8px
  display-lg:
    fontFamily: rb-freigeist-neue
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1px
  display-md:
    fontFamily: rb-freigeist-neue
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-lg:
    fontFamily: basier-square
    fontSize: 38.4px
    fontWeight: 600
    lineHeight: 0.83
    letterSpacing: -0.5px
  heading-md:
    fontFamily: basier-square
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.35px
  heading-sm:
    fontFamily: basier-square
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.3px
  subtitle:
    fontFamily: rb-freigeist-neue
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.56
    letterSpacing: 0
  body-lg:
    fontFamily: basier-square
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0
  body-md:
    fontFamily: basier-square
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: basier-square
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  button-md:
    fontFamily: basier-square
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0
  button-sm:
    fontFamily: basier-square
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0
  caption:
    fontFamily: basier-square
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0
  caption-tight:
    fontFamily: basier-square
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: -0.35px
  code-md:
    fontFamily: jetbrains-mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  code-sm:
    fontFamily: jetbrains-mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 16px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  xxxl: 48px
  section: 96px
  band: 160px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 44px
  button-primary-pressed:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
  button-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 44px
  button-outline:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 11px 23px
    height: 44px
  button-ghost:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 36px
  button-icon:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    size: 36px
  text-input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 12px 20px
    height: 44px
  hero-band:
    backgroundColor: "{colors.hero-warm}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: 96px 32px
  model-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 16px
  collection-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.md}"
    padding: 24px
  pricing-tier:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  pricing-tier-featured:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  code-block:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.code-md}"
    rounded: "{rounded.md}"
    padding: 24px
  code-tab:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.on-dark-mute}"
    typography: "{typography.code-sm}"
    rounded: "{rounded.xs}"
    padding: 6px 12px
  badge-status:
    backgroundColor: "{colors.badge-success}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 4px 10px
  badge-tag:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.none}"
    height: 60px
  sub-nav-pill:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.full}"
    padding: 6px 14px
  contributor-avatar:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    size: 40px
  footer:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 64px 32px
---

## 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.