Design System Inspiration of Replicate

Color Palette

Warm cream canvas, white inset cards, and a single hot-orange brand stamp. Dark code wells are the only chromatic break.

Brand & Accent

Replicate Orange

#ea2804

Primary CTA, hero band, inline links.

Orange Pressed

#c01f00

Active/pressed CTA state.

Hero Glow

#ff6a3d

Atmospheric mesh mid-stop.

Hero Pink

#f4a8a0

Atmospheric mesh outer wash.

Surface

Canvas

#f9f7f3

Default page background.

Surface Bone

#f3f0e8

Inset card groups.

Surface Card

#ffffff

Model cards, inputs, pricing tiers.

Surface Dark

#202020

Code wells, featured tier.

Text

Ink

#202020

Primary text on cream.

Body

#3a3a3a

Long-form body copy.

Charcoal

#575757

Captions, metadata.

Mute

#646464

Inactive labels.

Ash

#8d8d8d

Tertiary text.

Stone

#bbbbbb

Disabled foreground.

On-Dark

#fcfcfc

Text on dark.

On-Dark Mute

rgba(252,252,252,0.72)

Secondary text on dark.

Semantic

Success

#2b9a66

Status pills, "running" badges.

Focus Ring

rgba(59,130,246,0.5)

Default focus ring.

GitHub Dark

#24292e

GitHub-branded button.

Typography

A three-family stack: rb-freigeist-neue for display, basier-square for UI/body, JetBrains Mono for code. Bricolage Grotesque + Inter substitute when the proprietary families aren't available.

display-xxl128 · 700 · 1.0 · -3px

Run AI

display-xl72 · 700 · 1.0 · -1.8px

How it works

display-lg48 · 700 · 1.0 · -1px

Scale on Replicate

display-md30 · 600 · 1.2

Push the model live

heading-md24 · 600 · 1.33 · -0.35px

Featured collection — text-to-image

subtitle18 · 600 · 1.56

Run open-source models with a single API.

body-md16 · 400 · 1.5

Marketing prose carries the cream-page rhythm — large enough to read at editorial line-lengths, never decorative.

body-sm14 · 400 · 1.43

Captions, metadata, and the secondary text on model cards.

button-md16 · 600 · 1.0

button-sm14 · 600 · 1.0

Try a model

caption12 · 400 · 1.33

code-md14 · 400 · 1.43 · mono

replicate.run("openai/gpt-image-2", input)

code-sm11 · 400 · 1.5 · mono

PYTHON · NODE.JS · CURL · HTTP

Buttons

Every interactive element is fully rounded. Orange primary, dark CTA, outlined tertiary, and a subtle ghost button cover all needs.

Model Cards

Square 1:1 thumbnails with `rounded.md` corners, model owner + name beneath, status pill bottom-left.

openai / gpt-image-2

GPT Image 2

High-fidelity text-to-image generation.

running

stability-ai / sdxl

SDXL

Stable Diffusion XL — community favourite.

text-to-image video

meta / llama-3

Llama 3

Open-weights chat completions.

running

Pricing Tiers

3-up grid; centre tier flips to dark inversion to mark "recommended".

Free

$0 / month

Browse public models
Limited inference credits
Community support

Pro

$20 / month

Pay-as-you-go inference
Private model deployments
Priority queue access

Enterprise

Custom

Dedicated capacity
SOC 2 + SSO
Account manager

Code Block

A full-bleed dark code well with a JetBrains Mono body and a tab strip pinned to the top.

# Run any open-source model with a single call.
import replicate

output = replicate.run(
    "owner/model-name",
    input={"prompt": "placeholder prompt"},
)

print(output)

Form Elements

Pill-shaped inputs that match the rounded button vocabulary.

Search models

Notes

Spacing Scale

A 4px base, with `section: 96px` and `band: 160px` driving the editorial cream rhythm.

xxs · 2

xs · 4

sm · 8

md · 12

lg · 16

xl · 24

xxl · 32

xxxl · 48

section · 96

band · 160

Border Radius

Pill for interactive, mid-radius for content cards, sharp only for full-bleed bands.

none · 0

xs · 4

sm · 6

md · 10

lg · 16

full · pill

Elevation & Depth

Cream → bone → dark inversion. Drop shadows are reserved for floating thumbnails.

Level 0 — Cream

Level 1 — Outline

Level 2 — Bone Inset

Level 3 — Dark

Responsive Behavior

Six breakpoints from desktop XL (≥1440) to small mobile (≤425). Hero clamps from 128px down to 48px across the ladder.

Breakpoint	Width	Key Changes
Desktop XL	≥ 1440px	4-up model grid, full-bleed hero, max content 1280.
Desktop	1280–1439px	Container shrinks; xl side padding.
Tablet Large	1024–1279px	Model grid 3-up; code-story 2-up retained.
Tablet	768–1023px	Model grid 2-up; code-story stacks; pricing stacks.
Mobile Large	426–767px	Nav hamburger; hero clamps to 64px.
Mobile	≤ 425px	All grids 1-up; hero 48px; section padding 64px.

390

600

800

1024

1280

1440