Replicate-design-analysis

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 colours 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}, while content cards and code wells step up to {rounded.md} or {rounded.lg}. 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} for inset cards.
• Hot orange ({colors.primary} — #ea2804) is reserved for the primary CTA, the hero band, and inline link colour. 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.
• 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} 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.

Colors

Brand & Accent

• Replicate Orange ({colors.primary} — #ea2804): the brand accent. Reserved for the primary CTA, hero band background, and inline link colour. Treat as a stamp — one orange element per viewport at most.
• Orange Pressed ({colors.primary-deep} — #c01f00): the active/pressed state of {colors.primary} — used on {component.button-primary-pressed}.
• Hero Glow ({colors.hero-glow} — #ff6a3d): the lighter orange that appears in the radial atmospheric mesh behind the hero copy.
• Hero Pink ({colors.hero-pink} — #f4a8a0): a warm pink wash that softens the bottom edge of the hero band before it transitions to cream.
• On-Primary ({colors.on-primary} — #ffffff): label colour on top of {colors.primary} surfaces.

Surface

• Canvas ({colors.canvas} — #f9f7f3): the default page background. Warm cream, never pure white.
• Surface Bone ({colors.surface-bone} — #f3f0e8): a half-step deeper cream used for inset card groups and feature bands.
• Surface Card ({colors.surface-card} — #ffffff): pure white for individual model cards, search inputs, and pricing tiers — the only place white appears.
• Surface Dark ({colors.surface-dark} — #202020): code wells, featured pricing tier, and the "how it works" walkthrough band.
• Surface Deep ({colors.surface-deep} — #000000): footer canvas and the inset code-tab strip inside {component.code-block}.
• Hairline ({colors.hairline} — rgba(32,32,32,0.12)): low-contrast 1px dividers on cream surfaces.
• Hairline Strong ({colors.hairline-strong} — #202020): button outlines, focused inputs, and structural separators.

Text

• Ink ({colors.ink} — #202020): primary text colour. Notably warmer than #000000, matching the cream canvas.
• Body ({colors.body} — #3a3a3a): long-form body copy where ink would feel too heavy at 18px+ line lengths.
• Charcoal ({colors.charcoal} — #575757): captions, metadata, secondary nav.
• Mute ({colors.mute} — #646464): supporting text and inactive labels.
• Ash ({colors.ash} — #8d8d8d): tertiary text, placeholder copy.
• Stone ({colors.stone} — #bbbbbb): disabled foreground, neutral icon outlines.
• On-Dark ({colors.on-dark} — #fcfcfc): primary text on {colors.surface-dark} and {colors.surface-deep}.
• On-Dark Mute ({colors.on-dark-mute} — rgba(252,252,252,0.72)): secondary text in dark regions; preserves the off-white feel without pure white pop.

Semantic

• Success ({colors.badge-success} — #2b9a66): inline success badges and "running" status pills on model cards.
• Link ({colors.link} — #ea2804): inline link colour — same as primary orange, intentionally pulling links into the brand accent.
• Focus Ring ({colors.ring-focus} — rgba(59,130,246,0.5)): the default focus ring on interactive elements.
• GitHub Dark ({colors.github-dark} — #24292e): the GitHub-branded button surface (kept off-brand-on-purpose to match GitHub's own tokens).

Typography

Font Family

Replicate ships a deliberate three-family stack:

• rb-freigeist-neue — proprietary heavy grotesque used for all display sizes (30px+). Carries the editorial-magazine personality through tight lineHeight: 1.0 and negative letter-spacing.
• basier-square — proprietary humanist sans-serif used for body, button labels, captions, and metadata.
• jetbrains-mono — open-source monospace used in every code well and inline command.

When 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. JetBrains Mono is open-source and should always be used directly.

Hierarchy

Principles

• Display sizes hold lineHeight: 1.0 (or 0.83 on {typography.heading-lg}) so multi-line stacks read as single typographic blocks.
• Negative letter-spacing scales with size — bigger types tighten more (-3px at 128px down to -0.3px at 20px). Body type stays at 0.
• Body weight sits at 400 across {typography.body-lg} and {typography.body-md} — never bumped to 500 for emphasis. Emphasis comes from family change (basier-square → rb-freigeist-neue) rather than weight.
• Code is never set in basier-square, even at small sizes — JetBrains Mono carries every literal command, every model slug, every API call.

Note on Font Substitutes

When the proprietary families are unavailable, clamp display lineHeight to 1.0 explicitly and apply a -3% letter-spacing on display-xxl / display-xl to match the original tightness. Substitutes typically render with looser tracking by default.

Layout

Spacing System

• Base unit: 4px, with the working scale on multiples of 4 / 8 / 16.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 48px · {spacing.section} 96px · {spacing.band} 160px.
• Section padding: {spacing.section} (96px) vertical between full-width bands; {spacing.band} (160px) when a band needs extra editorial breathing room (the hero, the closing "Imagine what you can build" stripe).
• Card internal padding: {spacing.lg} (16px) on {component.model-card}, {spacing.xxl} (32px) on {component.pricing-tier}.

Grid & Container

• Max content width ≈ 1280px on body sections, 1440px on hero bands which run full-bleed.
• Model grid on collections: 4 columns at desktop, 3 at tablet large, 2 at tablet, 1 at mobile.
• Pricing: 3-tier grid centred at desktop, stacking vertically below 1024px; the centre tier flips to {component.pricing-tier-featured} (dark inversion) as the recommended option.
• Code-story sections: a 2-up split — narrative copy left, code well right — collapsing to stacked at < 1024px.

Whitespace Philosophy

• Whitespace on cream is generous and editorial — sections breathe at 96px and key bands open at 160px so the typography can scale up without feeling cramped.
• Inside cards, the system tightens to 16–32px so model thumbnails, statuses, and metadata sit in a compact list-of-cards rhythm.
• Hairline {colors.hairline} dividers replace shadow on cream surfaces; on dark surfaces, {colors.divider-dark} carries the equivalent role.

Elevation & Depth

Drop shadows exist in the extracted tokens but are restrained — used sparingly to lift photography thumbnails one step off the cream canvas. The dominant elevation language is colour-blocking.

Decorative Depth

• Hero atmospheric mesh — the orange-to-pink gradient backing the home hero is a layered radial mesh: {colors.primary} core → {colors.hero-glow} mid-stop → {colors.hero-pink} outer wash. Reserved for the home hero band only.
• Code-story dark band — the "How it works" section uses {colors.surface-dark} full-bleed with a single hairline {colors.divider-dark} separating narrative copy and code well.
• Contributor mosaic — the home page features a horizontally-scrolling band of circular avatars ({component.contributor-avatar}) over a textured cream canvas; this is the only place avatars appear at the brand level.

Shapes

Border Radius Scale

Photography Geometry

• Model thumbnails: square (1:1) with {rounded.md} corners, full-bleed image to the card edge.
• Hero example outputs: 4:3 or 16:9 with {rounded.md} corners.
• Contributor avatars: circular ({rounded.full}), 40px on home, 32px in card metadata.
• The hero band uses a stylised black-ink illustration (the "tinkerer at the workbench") as its photography stand-in — kept inside the orange band rather than overlaid on cream.

Components

Buttons

button-primary — orange CTA

• Background {colors.primary}, label {colors.on-primary}, type {typography.button-md}, padding 12px 24px, rounded: {rounded.full}, height 44px.
• The single most important action on a page (e.g. "Sign in with GitHub", "Try a model").
• Pressed state lives in button-primary-pressed (background {colors.primary-deep}).

button-dark — dark CTA

• Background {colors.surface-dark}, label {colors.on-dark}, type {typography.button-md}, rounded: {rounded.full}.
• Equal-weight secondary action paired with {component.button-primary}, or the primary action on cream when orange would be too loud.

button-outline — outlined CTA

• Background {colors.surface-card}, label {colors.ink}, 1px solid {colors.hairline-strong}, type {typography.button-md}, rounded: {rounded.full}.
• Tertiary action; appears alongside primary/dark for "View docs", "Read more".

button-ghost — inline button

• Background {colors.canvas}, label {colors.ink}, no border, type {typography.button-md}, rounded: {rounded.full}, padding 8px 16px.
• Sub-actions inside cards and inline with body copy.

button-icon — icon button

• Background {colors.surface-card}, label {colors.ink}, 1px solid {colors.hairline}, rounded: {rounded.full}, 36×36px circular.
• Carousel arrows, copy-to-clipboard, GitHub link icon.

Cards & Containers

model-card — model listing card

• Background {colors.surface-card}, text {colors.ink}, type {typography.body-md}, rounded: {rounded.md}, padding {spacing.lg} (16px).
• Square thumbnail on top, model owner + name beneath in {typography.body-sm}, single-line description in {colors.charcoal}, status pill {component.badge-status} bottom-left.

collection-tile — collection-of-models tile

• Background {colors.canvas}, text {colors.ink}, type {typography.heading-md}, rounded: {rounded.md}, padding {spacing.xl} (24px).
• Cream-on-cream tile inside a {colors.surface-bone} band, used for browsing model categories.

pricing-tier — pricing tier card

• Background {colors.surface-card}, text {colors.ink}, type {typography.body-md}, rounded: {rounded.lg}, padding {spacing.xxl} (32px).
• 3-up grid; tier name in {typography.display-lg} ("Free", "Pro", "Enterprise"), price in {typography.display-md}.

pricing-tier-featured — featured pricing tier

• Background {colors.surface-dark}, text {colors.on-dark}, type {typography.body-md}, rounded: {rounded.lg}, padding {spacing.xxl}.
• Centre tier flipped to dark inversion to mark "recommended".

code-block — code well

• Background {colors.surface-dark}, text {colors.on-dark}, type {typography.code-md}, rounded: {rounded.md}, padding {spacing.xl} (24px).
• Tab strip on top using {component.code-tab} for switching between languages (Python, Node.js, cURL, HTTP).

code-tab — code tab chip

• Background {colors.surface-deep}, text {colors.on-dark-mute}, type {typography.code-sm}, rounded: {rounded.xs}, padding 6px 12px.
• Active tab swaps text colour to {colors.on-dark} and adds a 2px bottom underline in {colors.primary}.

hero-band — full-bleed hero

• Background {colors.hero-warm} with the atmospheric mesh detailed in Elevation, text {colors.on-dark}, type {typography.display-xxl} for the title.
• Used only on the home page; secondary pages open with cream + {typography.display-xl}.

Inputs & Forms

text-input — default input

• Background {colors.surface-card}, text {colors.ink}, type {typography.body-md}, 1px solid {colors.hairline}, rounded: {rounded.full}, padding 12px 20px, height 44px.
• Pill-shaped search and email fields. Focus state adds a {colors.ring-focus} 3px ring.

Navigation

nav-bar — top nav (desktop)

• Background {colors.canvas}, type {typography.button-sm}, height 60px, single hairline {colors.hairline} bottom border.
• Left: wordmark logo. Centre: top-level nav ("Explore", "Pricing", "Docs", "Blog"). Right: GitHub icon + "Sign in" link + {component.button-primary}.

nav-bar (mobile)

• Same height 60px, collapses centre nav into a hamburger icon. Logo stays left, sign-in CTA stays right.

sub-nav-pill — sub-nav chip

• Pill chips set in a horizontal row above content (e.g. "All", "Featured", "Image generation", "Audio"), {component.sub-nav-pill} styling.

Signature Components

badge-status — model status badge

• Background {colors.badge-success}, label {colors.on-dark}, type {typography.caption}, rounded: {rounded.full}, padding 4px 10px.
• Anchored on the bottom-left of model cards to indicate "running" or "deployed".

badge-tag — neutral tag

• Background {colors.canvas}, label {colors.ink}, 1px solid {colors.hairline}, type {typography.caption}, rounded: {rounded.full}, padding 4px 10px.
• Capability tags ("text-to-image", "video", "audio") on model cards.

contributor-avatar — community contributor

• Background {colors.surface-card} placeholder behind 1:1 photography, rounded: {rounded.full}, 40×40px (32px in metadata contexts).
• Used in the home-page contributor mosaic.

footer — global footer

• Background {colors.surface-deep}, text {colors.on-dark}, type {typography.body-sm}, rounded: {rounded.none}, padding 64px 32px.
• Multi-column quick-links grid above a copyright row separated by {colors.divider-dark}.

Do's and Don'ts

Do

• Use {colors.canvas} (cream) as the default page background. White ({colors.surface-card}) appears only on individual cards, inputs, and the hero illustration backdrop.
• Reserve {colors.primary} for the primary CTA, the home hero band, and inline links — three roles, nothing else.
• Set every interactive element to {rounded.full} — buttons, inputs, badges, avatars, pills.
• Step content cards up to {rounded.md} (10px) or {rounded.lg} (16px) — never sharp corners.
• Open hero bands with {typography.display-xxl} (128px) and {typography.display-xl} (72px) at lineHeight: 1.0 with negative letter-spacing.
• Use rb-freigeist-neue for all display, basier-square for UI/body, jetbrains-mono for code. Keep the lanes strict.
• Render code in {component.code-block} with a {colors.surface-dark} background — code is print, not an inline grey box.
• Pair photography with {rounded.md} corners and full-bleed crop inside cards.

Don't

• Don't replace cream with pure white at the page level. The brand temperature comes from {colors.canvas}.
• Don't introduce a secondary brand colour. Orange is the only accent; semantic green and focus blue are functional, not decorative.
• Don't loosen display lineHeight past 1.0. Tight stacking is structural.
• Don't bump body weight to 500 for emphasis — change family (basier-square → rb-freigeist-neue) instead.
• Don't apply {rounded.full} to content cards. Pill-shaped cards break the rhythm.
• Don't put code in a light grey box. Code wells are always {colors.surface-dark} or {colors.surface-deep}.
• Don't use orange on body text or large surfaces — it loses its stamp quality immediately.
• Don't add drop shadows on cream surfaces. Elevation is colour-blocking; shadows are reserved for floating thumbnails.

Responsive Behavior

Breakpoints

Touch Targets

• All buttons ship at minimum 44px tall on mobile; default {component.button-primary} is 44px tall — comfortably clearing WCAG AAA.
• {component.button-icon} (36px) is bumped to 44px on mobile via increased padding.
• {component.sub-nav-pill} stays at 36px on desktop and grows to 40px on mobile via vertical padding adjustment.

Collapsing Strategy

• Top-level nav collapses to hamburger at < 1024px; the wordmark and {component.button-primary} stay anchored.
• Hero {typography.display-xxl} clamps: 128px → 96px → 64px → 48px across the breakpoint ladder.
• Pricing 3-up grid stacks vertically at < 1024px with the featured tier remaining centre-stacked.
• Code-story splits switch from side-by-side to stacked at < 1024px, code well always second.
• Sub-nav pills convert from a wrap row to a horizontal scroll-rail at < 768px.

Image Behavior

• Model thumbnails serve at 1.5× and 2× DPR; below 768px the system swaps to a 600×600 export instead of 1200×1200.
• Hero atmospheric mesh is rendered as a CSS gradient — no asset cost, no breakpoint variation.
• Code-block contents wrap softly at < 1024px (no horizontal scroll); long lines break with a continuation marker.

Iteration Guide

1. Focus on ONE component at a time. Most interactive elements share {rounded.full} and the {colors.canvas} / {colors.surface-card} pair — only the role-specific tokens ({colors.primary}, {component.code-block}) shift between variants.
2. Reference component names and tokens directly ({colors.primary}, {component.button-primary-pressed}, {rounded.lg}) — do not paraphrase.
3. Run npx @google/design.md lint DESIGN.md after edits; orphaned-tokens warnings will catch unused entries.
4. Add new variants as separate entries (-pressed, -disabled, -featured) — do not bury them in prose.
5. Default body type to {typography.body-md}; reach for {typography.subtitle} only on hero subtitles.
6. Keep {colors.primary} scarce — if more than one orange element appears per viewport, ask whether one should drop to {colors.surface-dark} instead.

Known Gaps

• Active/pressed visual states are documented for button-primary-pressed only; other components rely on the focus-ring ({colors.ring-focus}) 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.