# Replicate · Design system migration spec

> Source: https://replicate.com  ·  Curated by OpenDesign  ·  en

> This site demonstrates excellent developer experience design with its code-first approach, clean typography, and purposeful use of color to highlight key information without overwhelming the technical content.

## 1. Identity DNA

Replicate functions as a colorful, developer-friendly API gateway for AI models, translating complex infrastructure into clean, accessible tooling. Its identity is defined by the tension between a high-chroma gradient hero and a stark, utilitarian interface below—a clear signal that serious work can happen within a vibrant, modern frame. The system is built for developers first, prioritizing clarity and function over decoration.

**One-liner:** Run AI models with a simple API.
**Keywords:** AI infrastructure · API-first · developer-focused · cloud-native
**Analogy:** AWS for AI models

## 2. Color

The color system is governed by a single, decisive contrast: a vibrant pink-to-yellow gradient for branding and emphasis, set against a vast field of clean white for the primary workspace. This separates the platform's personality from its utility, ensuring the interface recedes while key actions and branding advance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCFCFC` | main background |
| `--bg-soft` | `#F0F0F0` | card background |
| `--bg-quiet` | `#F9F9F9` | quiet area |
| `--ink` | `#202020` | body text |
| `--ink-soft` | `#646464` | secondary text |
| `--muted` | `#BBBBBB` | placeholder |
| `--accent` | `#EA2804` | single accent |
| `--line` | `rgba(204,204,204,0.5)` | divider |

**Color principle:** High-contrast utility with expressive gradient hero accents

The principle is containment—vibrancy is reserved for specific moments, never bleeding into the core functional layout.

## 3. Typography

Typography employs clean, geometric sans-serif categories for all text, establishing a tone that is professional, direct, and legible at all scales. The voice is short, punchy, and action-oriented, mirroring the concise nature of code itself.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -2px | Hero headline |
| heading | 36px | 1.1 | 700 | -0.5px | Section title |
| body | 16px | 1.5 | 400 | 0px | Paragraph |

**Type rules:**
- Headlines use tight letter-spacing and high weight for impact
- Code snippets use monospace with syntax highlighting
- Text over gradients maintains high contrast for readability

## 4. Spacing

The interface is constructed on an 8px grid, creating a consistent and predictable rhythm that underpins all spacing and alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with generous whitespace around major sections

## 5. Surfaces

Surfaces are predominantly flat, using subtle 1px borders rather than heavy shadows to define discrete zones like code blocks and cards. Depth is implied through clarity and separation, not through layered ornamentation.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
- **Borders:** 1px solid #202020 on interactive elements, none on cards

## 6. Layout

The layout skeleton begins with a full-width gradient hero containing centered headline and subtext, establishing the brand's energetic tone. Below, a compact, single-column functional layout takes over, dedicated to code examples and feature descriptions without distraction.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero with centered content, followed by grid-based feature sections

## 7. Motion & Interaction

Motion is minimal and purposeful, designed to smooth transitions between page states rather than to decorate. Durations are calibrated from micro (220ms) for immediate feedback to medium (800ms) for significant state changes, all governed by a standard, smooth easing curve.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color transitions on interactive elements
  - Opacity fades for loading states
  - Smooth hover effects on buttons and links

- **Hover:** Color shift and subtle opacity change on text links and buttons
- **Click:** Immediate visual feedback with transition
- **Transition:** 150ms ease-in-out for most interactive properties
- **Keyboard:** Full keyboard navigation support with focus indicators

## 8. Voice & Don'ts

The editorial voice is professional, direct, and strictly developer-centric, using imperative commands and avoiding marketing jargon or vague promises. It communicates with the precision expected of documentation, not the persuasion of advertising.

- **Tone:** Professional, technical, and confident
- **Headline style:** Short, imperative statements that emphasize simplicity and power
- **CTA style:** Action-oriented with clear value proposition
- **Avoid:** Marketing jargon / Overly casual language / Complex technical explanations in headlines / Vague promises without concrete examples

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows red as the only high-chroma accent
- ❌ Don't use rounded corners on code blocks — screenshot shows sharp corners on code panels
- ❌ Don't use serif fonts for headings — screenshot shows consistent use of sans-serif for all typography
- ❌ Don't add drop shadows to most UI elements — screenshot shows minimal use of shadows only on specific components
- ❌ Don't use full-width buttons — screenshot shows buttons with standard padding and pill shape
- ❌ Don't use centered text for long paragraphs — screenshot shows left-aligned body text
- ❌ Don't mix different button styles within the same section — screenshot maintains consistent button styling

The system deliberately rejects decorative flourishes, complex shadows, and clashing accents, committing instead to a functional aesthetic where clarity is the highest form of design.

## System Prompt (paste into AI tool)

```
Replicate is a developer-focused AI platform with a clean, professional interface that emphasizes simplicity and technical capability. The design uses a light background (#FCFCFC) with black (#202020) text and red (#EA2804) accents, creating high contrast for readability. Typography combines humanist-sans for body text with a grotesque-sans display font for headlines, plus monospace for code. Key colors are the gradient hero (pink to red to yellow) and the consistent use of black and white for UI elements. Critical design rules: don't use multiple accent colors, maintain sharp corners on code blocks, and keep typography consistently sans-serif throughout. The layout is spacious with a 12-column grid, generous whitespace, and clear visual hierarchy that guides developers through the technical content.
```
