# Replicate — Design System
> Cloud API for running and fine-tuning open-source machine learning models.
- **Canonical:** https://uiuxskills.com/library/replicate
- **Source:** https://replicate.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:01.865Z

---

---
version: alpha
name: Replicate
description: Cloud API for running and fine-tuning open-source machine learning models.
tone: >-
  Technical, direct, and efficient. The tone is devoid of marketing fluff, prioritizing
  documentation-style clarity and functional utility.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F9F9F9"
  neutral-1: "#F4F4F4"
  neutral-2: "#E5E5E5"
  neutral-8: "#737373"
  neutral-11: "#262626"
  neutral-12: "#171717"
  error: "#DC2626"
  focus-ring: "#171717"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral-11}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.neutral-2}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.neutral-12}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.neutral-11}"
  link-hover:
    textColor: "{colors.neutral-8}"
  badge:
    backgroundColor: "{colors.neutral-1}"
    textColor: "{colors.neutral-11}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.neutral-2}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-container:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-neutral-12:
    backgroundColor: "{colors.neutral-12}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 20px 25px -5px rgba(0,0,0,0.1)
---

## Overview

Replicate provides a clean, developer-centric interface for interacting with complex AI models. The visual identity is utilitarian, high-contrast, and focused on code-first clarity, reflecting its target audience of software engineers and machine learning practitioners.

## Colors

The color strategy relies on a high-contrast, monochromatic palette that prioritizes readability and structural hierarchy.

*   Primary (`{colors.primary}`) (#000000): Used for primary call-to-action buttons and high-emphasis elements.
*   Surface (`{colors.surface}`) (#FFFFFF): The primary background color for the application.
*   Surface Container (`{colors.surface-container}`) (inferred) (#F9F9F9): A subtle background used for cards and secondary sections.
*   Neutral-11 (`{colors.neutral-11}`) (#262626): The primary text color for headings and body content.
*   Neutral-12 (`{colors.neutral-12}`) (#171717): Used for high-emphasis borders and text.
*   Neutral-8 (`{colors.neutral-8}`) (#737373): Muted color for secondary metadata and helper text.
*   Error (`{colors.error}`) (inferred) (#DC2626): Semantic color for errors and destructive actions.
*   Focus Ring (`{colors.focus-ring}`) (#171717): The color used for active focus states.

## Typography

The typography uses the Inter font family to maintain a clean, professional, and highly readable technical aesthetic across all interface levels.

*   Display LG/MD (`{typography.display-lg}`, `{typography.display-md}`) (inferred): Used for hero headlines and major section headers.
*   Headline LG/MD/SM (`{typography.headline-lg}`, `{typography.headline-md}`, `{typography.headline-sm}`) (inferred): Used for page titles, sub-headers, and card titles.
*   Body MD (`{typography.body-md}`): The standard font size for all primary descriptive text.
*   Label SM (`{typography.label-sm}`): Used for small UI labels, metadata, and button text.

## Layout

The layout follows a strict grid system optimized for documentation and model exploration. It utilizes a max-width container to ensure content readability, supported by a 4px base unit for spacing. The section order typically follows: nav, hero, code-snippet, model-grid, and footer. The hero composition features a centered headline and subhead with a clear primary CTA. Responsive behavior is mobile-first, with grid layouts collapsing to single columns on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to maintain a flat, utilitarian aesthetic, primarily distinguishing interactive cards from the background. The `elevation.lg` token is used for high-impact elements, while `elevation.sm` and `elevation.md` are used for standard UI components like cards and dropdowns. Note that the shadow values for `sm` and `md` were inferred.

## Shapes

The brand employs a functional approach to geometry, using sharp corners for structural elements like input fields and cards to maintain a technical, precise look. Fully rounded corners are reserved for badges and buttons, providing a modern UI feel that distinguishes interactive elements from static containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using `{colors.primary}` for the background and `{typography.label-sm}` for text. Use this for the main call-to-action on a page, transitioning to `{colors.neutral-11}` on hover.

### Card
A structural container using `{colors.surface}` with a `{colors.neutral-2}` border and `{rounded.md}` corners. Use this to group related model information or documentation snippets.

### Input Field
A precise form element using `{rounded.sm}` and a `{colors.neutral-12}` border. It should transition to a `{colors.focus-ring}` border color when active to provide clear feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons. | Do not use `{colors.primary}` for secondary or tertiary links. |
| Apply `{rounded.sm}` to all input fields for a consistent technical look. | Do not use rounded corners larger than `{rounded.md}` for input fields. |
| Use `{typography.body-md}` for all primary descriptive text. | Avoid using decorative fonts; stick to the system-aligned sans-serif. |
| Maintain `{spacing.md}` between card elements in grid layouts. | Avoid inconsistent padding; always use the defined `{spacing}` scale. |
| Use `{colors.neutral-12}` for high-emphasis borders. | Do not use excessive drop shadows on non-interactive elements. |
| Apply `{colors.neutral-8}` for secondary metadata text. | Never use low-contrast text colors for critical information. |
| Use `{elevation.md}` for interactive card lift. | Do not use `{elevation.lg}` for standard form inputs. |
| Use `{badge-error}` for destructive or error-state labels. | Do not use neutral colors for critical error notifications. |

## Content Style

CTA labels should be imperative, short, and action-oriented (e.g., "Get started"). Use verb-first phrasing to drive user interaction.

Headings should be direct benefit statements, focused on technical capability rather than marketing fluff. Keep them declarative and concise.

The copy density is high, reflecting a technical documentation style. Use scannable text, clear headings, and frequent code blocks to maintain a functional, efficient rhythm.

## Imagery & Icons

Imagery is mixed, utilizing a combination of high-fidelity generated model outputs and clean, functional UI screenshots. Icons are minimal and stroke-based, maintaining the brand's utilitarian focus. Avoid decorative illustrations; all visual assets should serve a functional purpose in demonstrating model capabilities.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Replicate, a minimal enterprise developer platform. Match its technical, documentation-first tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by token name (`{colors.primary}`, `{spacing.md}`, `{rounded.sm}`) — never hardcode hex values, pixel sizes, or font sizes.
2. Respect the exact component variants listed under `components:`. Do not invent variants (e.g. no `button-secondary`, no `card-elevated`) unless the spec defines them.
3. Follow the Shapes section: `{rounded.sm}` for inputs, `{rounded.md}` for cards, `{rounded.full}` only for badges and buttons.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, those values take precedence.

## Output contract

**Must:**
- Use token names for all colors, spacing, radii, and typography.
- Render hover, focus, and disabled states for every interactive component when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply the 4px base spacing rhythm using `{spacing.xs}` through `{spacing.2xl}` exclusively.
- Write CTAs and headings in the imperative, verb-first, declarative style described in Content Style.
- Use `{elevation.md}` for interactive card lift; `{elevation.sm}` for standard UI; `{elevation.lg}` only for high-impact elements.

**Must NOT:**
- Invent colors, font families, radii, or elevation values outside the spec.
- Use framework utility defaults (e.g. `text-gray-500`, `rounded-md`) in place of named tokens.
- Add emoji, decorative illustrations, or marketing copy.
- Reference specific frameworks or tooling by name.
- Rewrite, replace, or invent page copy, navigation items, headings, or button labels.
- Apply `{colors.primary}` to secondary or tertiary links.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on surface, default to `{colors.neutral-11}`.
- Follow mobile-first responsive layout; collapse grids to single columns below 768px per the Layout section.
- Tokens marked "(inferred)" are approximations — flag them if precision is critical.