---
name: Replicate
description: "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"
version: alpha

colors:
  background: "#FCFCFC"
  primary: "#202020"
  secondary: "#646464"
  tertiary: "#EA2804"
  neutral: "#BBBBBB"
  bg-soft: "#F0F0F0"
  bg-quiet: "#F9F9F9"
  line: "rgba(204,204,204,0.5)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Run AI models with a simple API.

*AWS for AI models*

## Colors

High-contrast utility with expressive gradient hero accents

- **Background (`#FCFCFC`)** — uses `bg` token
- **Primary text (`#202020`)** — uses `ink` token
- **Secondary text (`#646464`)** — uses `ink-soft` token
- **Accent (`#EA2804`)** — uses `accent` token
- **Muted (`#BBBBBB`)** — uses `muted` token
- **Borders (`rgba(204,204,204,0.5)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Standard 4px grid with generous whitespace around major sections

## Elevation & Depth

- rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
- Borders: 1px solid #202020 on interactive elements, none on cards

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Solid black pill with white text and lightning bolt icon, or outlined pill for secondary actions
- **card:** Clean code blocks with syntax highlighting and tabbed interfaces for language selection
- **chip:** Tabbed language selectors (Node, Python, HTTP) with underline active state
- **input:** Search bar with rounded corners and keyboard shortcut hint
- **hero:** Large gradient background with bold typography and prominent CTA

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```