---
title: "Replicate design system"
variant: extended
source: https://replicate.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/replicate-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Replicate · Design System

> Bright, expressive AI tools built for practical code.

**Theme:** light · **Industry:** ai · **Source:** https://replicate.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Replicate pairs a bright, expressive gradient hero with a practical API-first interface. Clean model cards, code samples, and a dark enterprise section make a broad AI platform feel tangible to developers.

## North star

Use bold gradient framing to attract attention, then make every section quickly legible through crisp white space, real model outputs, and practical code.

## Overview

The page starts with a white navigation strip and an oversized, full-width hero washed in vivid pink, magenta, orange, and yellow gradient light. White display text and a black CTA sit over the color field, while a framed code-and-image demo grounds the spectacle in a usable developer workflow. Basier Square handles most interface text; the heavier Freigeist Neue display face gives headlines a compact, assertive character, and JetBrains Mono marks code and technical labels. The layout alternates between dense model-card grids and spacious white editorial sections, then switches to a nearly black enterprise band with restrained red-orange details. Hairline borders define cards and code panels instead of relying on rounded containers or pervasive shadows. Images and video show real model outputs, so the vivid gradient remains a brand-level frame rather than a substitute for product evidence.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, code panels, card interiors, and text on dark or gradient backgrounds. |
| Ember Button | `#dd4425` | `--color-ember-button` | accent | Accent-colored model exploration button text and border. |
| Carbon Ink | `#202020` | `--color-carbon-ink` | neutral | Primary text, inverse enterprise section, dark card outlines, and high-contrast controls. |
| Quiet Graphite | `#646464` | `--color-quiet-graphite` | semantic | Muted navigation labels and secondary interface copy. |
| Signal Vermilion | `#ea2804` | `--color-signal-vermilion` | brand | Gradient endpoint and selective red-orange headings, links, and outlines. |
| Ochre Token | `#9e6c00` | `--color-ochre-token` | semantic | Small technical badges; not a dominant page color. |
| Soft Paper | `#f9f9f9` | `--color-soft-paper` | surface | Subtle section and card surface against the white canvas. |
| Electric Orchid | `#ff6bfc` | `--color-electric-orchid` | brand | Bright starting hue in the hero and decorative section gradients. |
| Coral Haze | `#f97e82` | `--color-coral-haze` | brand | Soft gradient transition hue in colorful framing. |
| Deep Cobalt | `#032f62` | `--color-deep-cobalt` | accent | Occasional blue text accent; not a primary page surface. |
| Code Slate | `#24292e` | `--color-code-slate` | semantic | Secondary dark technical text, especially in code-oriented content. |
| True Black | `#000000` | `--color-true-black` | neutral | High-contrast CTA backgrounds and select dark link treatments. |
| Mist Gray | `#f0f0f0` | `--color-mist-gray` | surface | Minor pale card or divider detail; use sparingly. |
| Vivid Fuchsia | `#e54fe2` | `--color-vivid-fuchsia` | brand | Secondary gradient hue in decorative section bands, not a general interface fill. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#202020` (Carbon Ink) · `--color-surface-2` → `#f9f9f9` (Soft Paper) · `--color-text` → `#202020` (Carbon Ink) · `--color-text-muted` → `#646464` (Quiet Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ea2804` (Signal Vermilion) · `--color-accent` → `#dd4425` (Ember Button) · `--color-accent-2` → `#ea2804` (Signal Vermilion) · `--color-accent-3` → `#032f62` (Deep Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#f9f9f9` | 15.48:1 | AAA |
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#646464` | `#202020` | 2.75:1 | fail |
| `#646464` | `#f9f9f9` | 5.62:1 | AA |
| `#ffffff` | `#202020` | 16.29:1 | AAA |
| `#ffffff` | `#f9f9f9` | 1.05:1 | fail |
| `#dd4425` | `#ffffff` | 4.26:1 | AA-large |
| `#dd4425` | `#202020` | 3.82:1 | AA-large |
| `#dd4425` | `#f9f9f9` | 4.05:1 | AA-large |

### Gradients

- `linear-gradient(to right bottom, rgb(255, 107, 252), rgb(234, 40, 4), rgb(249, 126, 130))`
- `linear-gradient(rgb(255, 255, 255) 5%, rgba(0, 0, 0, 0) 30%)`
- `linear-gradient(to right bottom, rgb(255, 107, 252), rgb(229, 79, 226), rgb(234, 40, 4))`
- `radial-gradient(75% 100% at 50% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| basier-square | `--font-body` | webfont | 400, 600 | Primary navigation, body copy, buttons, cards, and most interface text. | DM Sans |
| jetbrains-mono | `--font-mono` | webfont | 400 | Code panels, technical labels, and compact model or link metadata. | JetBrains Mono |
| rb-freigeist-neue | `--font-display` | webfont | 600, 400, 700 | Large display hero and prominent section headings. | Space Grotesk |

- **basier-square:** Use a clean sans-serif voice, mostly regular weight; reserve heavier weight for selected headings.
- **jetbrains-mono:** Keep code and technical details monospaced and regular; small labels may use lowercase.
- **rb-freigeist-neue:** Use bold display headlines and regular-weight primary headings; keep casing natural and tracking neutral.

### Type scale — Perfect Fifth (ratio ≈ 1.557, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 700 | 1 | 0 | — | rb-freigeist-neue | Oversized, bold hero headline. |
| h1 | 48px | 400 | 1 | 0 | — | rb-freigeist-neue | Primary hero and major section titles. |
| h2 | 30px | 600 | 1.2 | 0 | — | rb-freigeist-neue | Strong subsection headings and feature titles. |
| h3 | 29px | 400 | 1.11 | 0 | — | basier-square | Model or content-card headings. |
| h4 | 24px | 400 | 1.33 | 0 | — | basier-square | Supporting feature and instructional headings. |
| body | 14px | 400 | 1.43 | 0 | — | basier-square | Explanatory copy, descriptions, and card text. |
| caption | 12px | 400 | 1.33 | 0 | lowercase | basier-square | Small metadata and short lowercase labels. |
| button | 14px | 400 | 1.43 | 0 | — | basier-square | CTA and action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | basier-square | Top-level navigation and category controls. |
| link | 11px | 400 | 1.5 | 0 | — | jetbrains-mono | Compact technical and model links. |
| code | 14px | 400 | 1.43 | 0 | — | jetbrains-mono | Code examples and developer snippets. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 16, 24, 32, 64 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1312px.

Use a wide centered content frame, with measured page maximum width of 1312px, and let the opening gradient hero span the viewport. The hero pairs left-aligned copy and CTA with a broad code-and-output demo. White sections alternate between compact multi-column model grids and centered editorial content; the instructional section uses a bordered inset panel. The enterprise band is dark and four-column, followed by an open gallery-like feature section and a multi-column footer. Maintain compact component spacing with clear section breaks.

## Shape & elevation

- Radius: button `9999px` · media `50%` · badge `2px` · link `50%` · xs `2px` · pill `9999px`
- Shadow `hairline` (badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(228, 199, 103) 0px 1px 2px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `hairline-2` (footer): `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(196, 232, 209) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat surfaces and crisp hairline borders over layered card shadows. Model and code cards use square corners and dark outlines; the dark enterprise area separates itself through a full-width inverse surface. Keep layering purposeful: the hero demo sits above the gradient, and the instructional content is framed within a colored band. Avoid adding depth effects not present in the measured style.

## Imagery

Show real generated images, video outputs, model previews, and customer marks rather than generic illustrations. The hero demo places readable code beside a large output image in one framed panel. Model cards crop media into thumbnails while retaining titles and brief metadata. The showcase section mixes video tiles with oversized words. The gradient is atmospheric framing; keep media itself legible and varied.

## Components

### Gradient hero

Full-width multicolor backdrop with large white headline, concise support copy, black CTA, and a framed code-plus-output demo.

### Model category row

Compact category links and search controls lead into dense, horizontally broad model-card collections.

### Model card

Square-corner card with thin dark outline, model thumbnail, name, short description, and compact metadata.

### How-it-works panel

White instructional content framed by a vivid gradient band, with explanatory text alongside code examples.

### Enterprise band

Carbon Ink (#202020) full-width section with centered introduction, customer logos, and a two-by-two feature arrangement.

### Build showcase

Open white gallery pairing oversized typography with cropped video and product examples.

### Footer

White multi-column link directory with a narrow multicolor gradient rule separating it from the content above.

### Measured component styles

- **Primary button** (“Explore models”): background #fffcfc · text #dd4425 · border 1px solid #dd4425 · radius 0px · padding 8px 12px · 400 16px basier-square
- **Secondary button** (“Generate speech”): transparent background · text #202020 · border 1px solid #202020 · radius 9999px · padding 4px 8px · 400 14px basier-square
- **Link** (“google / nano-banana-2 Google's fast ima”): transparent background · text #202020 · border 4px solid · radius 0px · padding 0px · 400 16px basier-square
- **Input**: transparent background · text #202020 · border 1px solid · radius 0px · padding 6px 56px 6px 28px · 400 14px basier-square
- **Card** (“google / nano-banana-2 Google's fast ima”): background #fcfcfc · text #202020 · border 1px solid #202020 · radius 0px · padding 0px · 400 16px basier-square
- **Badge** (“"black-fore”): background #fefce9 · text #9e6c00 · radius 2px · padding 0px · 400 14px jetbrains-mono · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(228, 199
- **Navigation item** (“ctrl+k Explore Pricing Enterprise Docs B”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px basier-square

## Do

- Keep the main canvas Gallery White (#ffffff).
- Use the gradient as a bold hero or section frame, not a page-wide wash.
- Pair technical claims with legible code or genuine model output.
- Use Carbon Ink (#202020) for core text and dark inverse sections.
- Keep model cards crisp, square-cornered, and visibly outlined.
- Reserve JetBrains Mono for code and technical metadata.

## Don't

- Do not replace the vivid hero gradient with a muted corporate palette.
- Do not use rounded, floating cards as the default container.
- Do not bury code examples under decorative effects.
- Do not turn every section into a dense card grid.
- Do not use gradient colors as ordinary body text.
- Do not invent new palette hex values or heavy shadows.

## Agent prompt

Build a new developer-facing page in Replicate’s visual style. Start with a Gallery White (#ffffff) canvas and a wide, vivid hero gradient using Electric Orchid (#ff6bfc), Signal Vermilion (#ea2804), and Coral Haze (#f97e82). Set oversized headlines in a bold geometric display sans; use a clean sans for interface copy and JetBrains Mono for code. Pair each main claim with practical evidence: code snippets, model cards, generated media, or workflow examples. Use Carbon Ink (#202020) for strong text, black CTAs, and occasional inverse sections; use Quiet Graphite (#646464) for secondary navigation. Keep cards square and outlined, layouts broad and compact, and section rhythm varied between dense model grids and open editorial space. Use gradients as framing, not as a replacement for content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width gradient hero; left-aligned headline and CTA above a code-and-media demo. | Primary free-start CTA, Tabbed code example | Vivid gradient backdrop, White display text, Black CTA, Framed code and image panel |
| 2 | category-nav | Compact category controls followed by a dense, multi-column horizontal model-card strip. | Browse by task, Search or filter models | Pill-like category controls, Outlined model cards, Thumbnail previews |
| 3 | product-grid | Centered intro between model-card rows, with community marks and broad grid strips. | Explore model catalog, Submit a model | Centered heading, Logo row, Compact media cards |
| 4 | how-it-works | Single-column section inside a gradient frame; text and code examples form inset rows. | Progressive explanation, Link to run or fine-tune | White inset panel, Thin borders, Side-by-side copy and code |
| 5 | feature-grid | Dark inverse band with centered introduction, customer logos, and a two-by-two feature grid. | Enterprise information, Feature scanning | Carbon Ink surface, Light text, Red-orange details, Technical charts |
| 6 | gallery | Open white two-column composition mixing oversized words, video tiles, and supporting copy. | Browse project examples, Start building | Oversized typography, Cropped video previews, Sparse layout |
| 7 | footer | Thin gradient divider above a white, multi-column link directory and compact service-status row. | Navigate product and company links, Check service status | Multicolumn link groups, Brand mark, Small status indicator |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/replicate-com