Design System Preview:
Replicate

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

Color Palette & Roles

Primary

Replicate Dark
#202020
Primary text, dark surfaces, borders
Replicate Red
#ea2804
Core brand, hero gradient, accent borders
Secondary Red
#dd4425
Button borders, link hover states

Secondary & Accent

Status Green
#2b9a66
Running/operational status badges
GitHub Dark
#24292e
Code block backgrounds

Surface & Background

Pure White
#ffffff
Light mode page background
Near White
#fcfcfc
Button text on dark surfaces
Hero Blaze Gradient
multi-stop
Hero section, maximum visual impact

Neutrals & Text

Medium Gray
#646464
Secondary body text
Warm Gray
#4e4e4e
Emphasized secondary text
Mid Silver
#8d8d8d
Tertiary text, footnotes
Light Silver
#bbbbbb
Dotted-underline link decoration
Pure Black
#000000
Maximum-emphasis borders
02 / Typography Scale

Typography Rules

Display Hero
Display / Hero — 72px / 700 / 1.00 / -1.8px — rb-freigeist-neue (system-ui fallback)
Section Heading
Section Heading — 48px / 400-700 / 1.00 / normal — rb-freigeist-neue (system-ui fallback)
Sub-heading Display
Sub-heading — 30px / 600 / 1.20 / normal — rb-freigeist-neue (system-ui fallback)
Sub-heading Sans
Sub-heading Sans — 38.4px / 400 / 0.83 / normal — basier-square (Inter fallback)
Feature Title
Feature Title — 18px / 600 / 1.56 / normal — basier-square (Inter fallback)
Body large text for intro paragraphs. Basier-square at 400 weight provides quiet geometric precision for all readable content.
Body Large — 20px / 400 / 1.40 / normal — basier-square (Inter fallback)
Standard body text for paragraphs, navigation, and button labels. The workhorse of the type system.
Body / Button — 16px / 400-600 / 1.50 / normal — basier-square (Inter fallback)
Caption and metadata descriptions for model cards
Caption — 14px / 400-600 / 1.43 / -0.35px — basier-square (Inter fallback)
small tag / lowercase transform
Small / Tag — 12px / 400 / 1.33 / normal / lowercase — basier-square (Inter fallback)
replicate.run("stability-ai/sdxl", input={"prompt": "..."})
Code Body — 14px / 400 / 1.43 / normal — JetBrains Mono
import replicate
Code Small — 11px / 400 / 1.50 / normal — JetBrains Mono
03 / Button Variants

Buttons

light solid pill
outlined pill
frosted glass / search
red accent pill
status badge
# Run a model with Replicate
import replicate
output = replicate.run("stability-ai/sdxl")
04 / Card Examples

Cards & Containers

standard card

Border Pill Card

Content card with 1px solid #4e4e4e border and 9999px pill radius. The default container for model galleries and feature sections.

accent highlighted

Red Accent Border

Featured or highlighted card with 1px solid Replicate Red border. Used for promoted models and primary emphasis.

deep surface

Deep Dark Card

Deeper dark background for manifesto-style sections, code examples, and high-contrast feature showcases.

05 / Spacing Scale

Spacing System

Base unit: 8px. Scale from 1px to 192px with generous section spacing.

1px
2px
4px
6px
8px
12px
16px
24px
32px
48px
64px
06 / Border Radius Scale

Border Radius

Replicate uses exclusively pill-shaped geometry. There is only ONE radius in the entire system.

9999px
Pill — the ONLY radius
9999px
Buttons
9999px
Cards
9999px
Badges
9999px
Images
07 / Elevation & Depth

Depth & Elevation

Flat
No shadow, no border. Dark body and inline text blocks.
level 0
Bordered
1px solid #4e4e4e. Cards, buttons, containers.
level 1
Accent Border
1px solid #ea2804. Featured and highlighted items.
level 2
Gradient Hero
Full-width blaze gradient for maximum visual impact.
level 3
Deep Dark
Deeper dark surface for manifesto, footer, feature sections.
level 4