## 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
Sign in with GitHub
button-sm14 · 600 · 1.0
Try a model
caption12 · 400 · 1.33
© Replicate 2026 — design system catalogue.
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.

Email
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