Typography
Base Font · basier-square
Basier Square
Run AI with an API. Replicate lets you run machine learning models with a cloud API.
Regular · 400
Semibold · 600
Bold · 700
Mono Font · jetbrains-mono
JetBrains Mono
replicate.run("stability-ai/sdxl", input={"prompt": "astronaut on moon"})
Regular · 400
Medium · 500
AI
Display Hero · 96px · Bold · line-height: 96px · letter-spacing: −1.8px
Run AI.
Display · 72px · Bold · line-height: 72px · letter-spacing: −1.8px
Machine Learning
Heading XL · 48px · Bold · line-height: 48px · letter-spacing: −1.8px
Deploy models in seconds
Heading Large · 30px · Bold · line-height: 36px · letter-spacing: −0.35px
Run open-source models with a cloud API. Don't worry about infrastructure. Use it as an API or run it in your own cloud.
Body Large · 18px · Regular · line-height: 28px · letter-spacing: −0.35px
Fine-tune and deploy custom models at scale. Llama, Stable Diffusion, Whisper, and more.
Body Default · 16px · Regular · line-height: 24px
1.2B predictions served · 100k+ models · 99.9% uptime
Body Small · 14px · Regular · line-height: 20px
STABLE DIFFUSION · LLAMA · WHISPER
Caption · 12px · Semibold · line-height: 16px · uppercase label
Letter Spacing
Run AI fast.
Tight · −1.8px
--letter-spacing-tight · hero headlines, display sizes
Deploy models
Normal · −0.35px
--letter-spacing-normal · body text, headings, UI
Spacing
Spacing Scale
22 tokens — 1px → 355px
Borders
Border Radii
Replicate uses a minimal 3-token radius system: sharp 2px squares for most surfaces, a partial top-radius 4px 4px 0 0 for tabs/panels, and full 9999px pills for badges and buttons.
Border Widths
--border-width-hairline
1px · standard cards, inputs, dividers
--border-width-thin
2px · emphasis, focus rings
--border-width-base
4px · left border accent, strong indicators
The 4px --border-width-base is characteristic of Replicate's left-border accent pattern on code blocks and callouts.
Shadow / Elevation
Shadow Tokens
3 tokens
shadow-sm
Warm accent shadow
display-p3 warm yellow glow · 1px 2px — interactive elements, highlighted buttons
shadow-md
Deep drop
rgba(0,0,0,.25) 25px 50px -12px — modals, floating panels, cards at rest
shadow-lg
Green ring
display-p3 green 2px ring — success state, confirmed/active model cards
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | -10 | Deep background decorations, ambient layers |
| --z-2 | -1 | Behind content, decorative shapes |
| --z-3 | 10 | Sticky navigation, floating labels |
| --z-4 | 20 | Dropdowns, popovers, tooltips |
| --z-5 | 30 | Overlays, drawers, sidebars |
| --z-6 | 9999 | Top-level modals, command palette, alerts |
Breakpoints
📋
No breakpoints defined
Not specified
The Replicate design system does not define explicit breakpoint tokens. Responsive behavior is implemented directly in component styles without named breakpoint variables.
Opacity
Opacity Tokens
1 token defined · 0.3
--opacity-30
30% · disabled/muted states
Only one opacity token is formally defined. Additional transparency values are applied inline throughout the system.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-dark-gray-2 | --color-dark-gray | 2.75:1 | Fail |
| --color-dark-gray-2 | --color-white | 5.77:1 | AA |
| --color-dark-gray-2 | --color-black | 3.55:1 | AA Large |
| --color-dark-gray-2 | --color-white-2 | 5.92:1 | AA |
| --color-dark-gray-2 | --color-red | 1.35:1 | Fail |
| --color-dark-gray-3 | --color-dark-gray | 1.11:1 | Fail |
| --color-dark-gray-3 | --color-white | 14.3:1 | AAA |
| --color-dark-gray-3 | --color-white-2 | 14.67:1 | AAA |
| --color-dark-gray-3 | --color-red | 3.36:1 | AA Large |
| --color-light-gray | --color-dark-gray | 8.49:1 | AAA |
| --color-light-gray | --color-black | 10.94:1 | AAA |
| --color-light-gray | --color-white | 1.87:1 | Fail |
| --color-dark-blue | --color-white | 12.9:1 | AAA |
| --color-dark-blue | --color-white-2 | 13.23:1 | AAA |
| --color-red-2 | --color-dark-gray | 3.56:1 | AA Large |
| --color-red-2 | --color-black | 4.59:1 | AA |
| --color-red-2 | --color-white-2 | 4.57:1 | AA |
CSS Variables Reference
Dark Gray--color-dark-gray#202020
White--color-white#FCFCFC
Black--color-black#000000
White 2--color-white-2#FFFFFF
Brand Red--color-red#EA2804
Light Gray 2--color-light-gray-2#EFEFEF
White 3--color-white-3#F9F9F9
White 4--color-white-4#FFFCFC
Light Gray 5--color-light-gray-5#E8E8E8
White 5--color-white-5#FEFCE9
Cyan 3--color-cyan-3#2B9A66
Dark Gray 2--color-dark-gray-2#646464
Dark Gray 3--color-dark-gray-3#24292E
Light Gray--color-light-gray#BBBBBB
Dark Blue--color-dark-blue#032F62
Red 2--color-red-2#D73A49
Mid Gray--color-mid-gray#838383
Purple--color-purple#6F42C1
Orange--color-orange#E36209
Dark Yellow--color-dark-yellow#735C0F
Light Gray 4--color-light-gray-4#E0E0E0
Base Font--font-family-basebasier-square
Mono Font--font-family-2jetbrains-mono
Display Font--font-family-3rb-freigeist-neue
Regular--font-weight-regular400
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs10px
XS--font-size-xs11px
SM--font-size-sm12px
Base--font-size-base14px
LG--font-size-lg16px
XL--font-size-xl18px
2XL--font-size-2xl20px
4XL--font-size-4xl24px
5XL--font-size-5xl30px
6XL--font-size-6xl48px
Display--font-size-72px72px
Display XL--font-size-96px96px
Tight--letter-spacing-tight−1.8px
Normal--letter-spacing-normal−0.35px
Space 128--space-128166.5px
Space 160--space-160192px
Space 192--space-192214.5px
Space 256--space-256355px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base (Accent)--border-width-base4px
Medium (top)--radius-md4px 4px 0 0
Large / Pill--radius-lg9999px
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal500ms
Slow--duration-slow1s
Slower (ambient)--duration-slower10s
Linear--easing-linearlinear
Deep Background--z-1-10
Behind Content--z-2-1
Navigation--z-310
Popovers--z-420
Overlays--z-530
Top-Level Modals--z-69999
Design System Preview · Replicate (Dark) · Generated 17/04/2026 · 35 color tokens · 13 font-size · 3 font-family · 3 font-weight · 11 line-height · 2 letter-spacing · 22 spacing · 3 radius · 3 border-width · 3 shadow · 5 duration · 1 easing · 6 z-index · 1 opacity