# Design System
Inspired by 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