# Replicate — Style Reference
> Replicate's marketing surfaces pair the warm-cream developer-tools aesthetic
of an indie ML playground with a confident hot-orange brand accent and a
signature display typeface (rb-freigeist-neue) sized aggressively large at
72px+. The system reads as "AI lab notebook crossed with print magazine":
cream and bone surfaces, dark ink type, monospace code wells, irregular
hand-drawn-feeling diagrams, and a rich orange used scarcely on the most
consequential CTA. Photography of contributors and example outputs is
square-ish with mid-radius corners; everything else is borderless or hairline.

**Theme:** light

**Source website:** [https://replicate.com/](https://replicate.com/)  
Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| primary | `#ea2804` | `--color-primary` | primary role extracted from the source design |
| primary deep | `#c01f00` | `--color-primary-deep` | primary deep role extracted from the source design |
| on primary | `#ffffff` | `--color-on-primary` | on primary role extracted from the source design |
| ink | `#202020` | `--color-ink` | ink role extracted from the source design |
| body | `#3a3a3a` | `--color-body` | body role extracted from the source design |
| charcoal | `#575757` | `--color-charcoal` | charcoal role extracted from the source design |
| mute | `#646464` | `--color-mute` | mute role extracted from the source design |
| ash | `#8d8d8d` | `--color-ash` | ash role extracted from the source design |
| stone | `#bbbbbb` | `--color-stone` | stone role extracted from the source design |
| on dark | `#fcfcfc` | `--color-on-dark` | on dark role extracted from the source design |
| on dark mute | `rgba(252,252,252,0.72)` | `--color-on-dark-mute` | on dark mute role extracted from the source design |
| canvas | `#f9f7f3` | `--color-canvas` | canvas role extracted from the source design |
| surface bone | `#f3f0e8` | `--color-surface-bone` | surface bone role extracted from the source design |
| surface card | `#ffffff` | `--color-surface-card` | surface card role extracted from the source design |
| surface dark | `#202020` | `--color-surface-dark` | surface dark role extracted from the source design |
| surface deep | `#000000` | `--color-surface-deep` | surface deep role extracted from the source design |
| hairline | `rgba(32,32,32,0.12)` | `--color-hairline` | hairline role extracted from the source design |
| hairline strong | `#202020` | `--color-hairline-strong` | hairline strong role extracted from the source design |
| divider dark | `rgba(255,255,255,0.2)` | `--color-divider-dark` | divider dark role extracted from the source design |
| hero warm | `#ea2804` | `--color-hero-warm` | hero warm role extracted from the source design |
| hero glow | `#ff6a3d` | `--color-hero-glow` | hero glow role extracted from the source design |
| hero pink | `#f4a8a0` | `--color-hero-pink` | hero pink role extracted from the source design |
| badge success | `#2b9a66` | `--color-badge-success` | badge success role extracted from the source design |
| link | `#ea2804` | `--color-link` | link role extracted from the source design |
| ring focus | `rgba(59,130,246,0.5)` | `--color-ring-focus` | ring focus role extracted from the source design |
| github dark | `#24292e` | `--color-github-dark` | github dark role extracted from the source design |

## Tokens — Typography

### rb-freigeist-neue · `--font-primary`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 700, 600
- **Sizes:** 128px, 72px, 48px, 30px, 18px
- **Line height:** 1, 1.2, 1.56
- **Letter spacing:** -3px, -1.8px, -1px, -0.5px, 0
- **Role:** Brand typography family observed across the documented type scale.

### basier-square · `--font-family-2`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 600, 400
- **Sizes:** 38.4px, 24px, 20px, 18px, 16px, 14px, 12px
- **Line height:** 0.83, 1.33, 1.4, 1.56, 1.5, 1.43, 1
- **Letter spacing:** -0.5px, -0.35px, -0.3px, 0
- **Role:** Brand typography family observed across the documented type scale.

### jetbrains-mono · `--font-family-3`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 14px, 11px
- **Line height:** 1.43, 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|---|---|---|---|---|
| display-xxl | 128px | 1 | -3px | `--text-display-xxl` |
| display-xl | 72px | 1 | -1.8px | `--text-display-xl` |
| display-lg | 48px | 1 | -1px | `--text-display-lg` |
| display-md | 30px | 1.2 | -0.5px | `--text-display-md` |
| heading-lg | 38.4px | 0.83 | -0.5px | `--text-heading-lg` |
| heading-md | 24px | 1.33 | -0.35px | `--text-heading-md` |
| heading-sm | 20px | 1.4 | -0.3px | `--text-heading-sm` |
| subtitle | 18px | 1.56 | 0 | `--text-subtitle` |
| body-lg | 18px | 1.56 | 0 | `--text-body-lg` |
| body-md | 16px | 1.5 | 0 | `--text-body-md` |
| body-sm | 14px | 1.43 | 0 | `--text-body-sm` |
| button-md | 16px | 1 | 0 | `--text-button-md` |
| button-sm | 14px | 1 | 0 | `--text-button-sm` |
| caption | 12px | 1.33 | 0 | `--text-caption` |
| caption-tight | 14px | 1.43 | -0.35px | `--text-caption-tight` |
| code-md | 14px | 1.43 | 0 | `--text-code-md` |
| code-sm | 11px | 1.5 | 0 | `--text-code-sm` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|---|---|---|
| xxs | 2px | `--spacing-xxs` |
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |
| xxl | 32px | `--spacing-xxl` |
| xxxl | 48px | `--spacing-xxxl` |
| section | 96px | `--spacing-section` |
| band | 160px | `--spacing-band` |

### Border Radius

| Name | Value | Token |
|---|---|---|
| none | 0px | `--radius-none` |
| xs | 4px | `--radius-xs` |
| sm | 6px | `--radius-sm` |
| md | 10px | `--radius-md` |
| lg | 16px | `--radius-lg` |
| full | 9999px | `--radius-full` |

### Layout

- **Section gap:** 96px
- **Card padding:** 16px
- **Element gap:** 12px
- **Max content width:** 1200px

## Components

### button primary
**Role:** button primary component

- **backgroundColor:** `{colors.primary}`
- **textColor:** `{colors.on-primary}`
- **typography:** `{typography.button-md}`
- **rounded:** `{rounded.full}`
- **padding:** `12px 24px`
- **height:** `44px`

### button primary pressed
**Role:** button primary pressed component

- **backgroundColor:** `{colors.primary-deep}`
- **textColor:** `{colors.on-primary}`
- **typography:** `{typography.button-md}`
- **rounded:** `{rounded.full}`

### button dark
**Role:** button dark component

- **backgroundColor:** `{colors.surface-dark}`
- **textColor:** `{colors.on-dark}`
- **typography:** `{typography.button-md}`
- **rounded:** `{rounded.full}`
- **padding:** `12px 24px`
- **height:** `44px`

### button outline
**Role:** button outline component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.button-md}`
- **rounded:** `{rounded.full}`
- **padding:** `11px 23px`
- **height:** `44px`

### button ghost
**Role:** button ghost component

- **backgroundColor:** `{colors.canvas}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.button-md}`
- **rounded:** `{rounded.full}`
- **padding:** `8px 16px`
- **height:** `36px`

### button icon
**Role:** button icon component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **rounded:** `{rounded.full}`
- **size:** `36px`

### text input
**Role:** text input component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.body-md}`
- **rounded:** `{rounded.full}`
- **padding:** `12px 20px`
- **height:** `44px`

### hero band
**Role:** hero band component

- **backgroundColor:** `{colors.hero-warm}`
- **textColor:** `{colors.on-dark}`
- **typography:** `{typography.display-xl}`
- **rounded:** `{rounded.none}`
- **padding:** `96px 32px`

### model card
**Role:** model card component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.body-md}`
- **rounded:** `{rounded.md}`
- **padding:** `16px`

### collection tile
**Role:** collection tile component

- **backgroundColor:** `{colors.canvas}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.heading-md}`
- **rounded:** `{rounded.md}`
- **padding:** `24px`

### pricing tier
**Role:** pricing tier component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.body-md}`
- **rounded:** `{rounded.lg}`
- **padding:** `32px`

### pricing tier featured
**Role:** pricing tier featured component

- **backgroundColor:** `{colors.surface-dark}`
- **textColor:** `{colors.on-dark}`
- **typography:** `{typography.body-md}`
- **rounded:** `{rounded.lg}`
- **padding:** `32px`

### code block
**Role:** code block component

- **backgroundColor:** `{colors.surface-dark}`
- **textColor:** `{colors.on-dark}`
- **typography:** `{typography.code-md}`
- **rounded:** `{rounded.md}`
- **padding:** `24px`

### code tab
**Role:** code tab component

- **backgroundColor:** `{colors.surface-deep}`
- **textColor:** `{colors.on-dark-mute}`
- **typography:** `{typography.code-sm}`
- **rounded:** `{rounded.xs}`
- **padding:** `6px 12px`

### badge status
**Role:** badge status component

- **backgroundColor:** `{colors.badge-success}`
- **textColor:** `{colors.on-dark}`
- **typography:** `{typography.caption}`
- **rounded:** `{rounded.full}`
- **padding:** `4px 10px`

### badge tag
**Role:** badge tag component

- **backgroundColor:** `{colors.canvas}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.caption}`
- **rounded:** `{rounded.full}`
- **padding:** `4px 10px`

### nav bar
**Role:** nav bar component

- **backgroundColor:** `{colors.canvas}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.button-sm}`
- **rounded:** `{rounded.none}`
- **height:** `60px`

### sub nav pill
**Role:** sub nav pill component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **typography:** `{typography.button-sm}`
- **rounded:** `{rounded.full}`
- **padding:** `6px 14px`

### contributor avatar
**Role:** contributor avatar component

- **backgroundColor:** `{colors.surface-card}`
- **textColor:** `{colors.ink}`
- **rounded:** `{rounded.full}`
- **size:** `40px`

### footer
**Role:** footer component

- **backgroundColor:** `{colors.surface-deep}`
- **textColor:** `{colors.on-dark}`
- **typography:** `{typography.body-sm}`
- **rounded:** `{rounded.none}`
- **padding:** `64px 32px`

## Do's and Don'ts

### Do

- Use `--color-primary` for the brand's primary interaction treatment.
- Keep page surfaces anchored to `--color-canvas`.
- Preserve every typography style's documented size, line height, and letter spacing.
- Compare major implementation decisions against [the live Replicate website](https://replicate.com/).

### Don't

- Do not introduce colors outside the documented color token set.
- Do not replace `--color-ink` with an arbitrary neutral.
- Do not flatten documented component states or spacing relationships.
- Do not treat this extracted snapshot as newer than the live source website.

## Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://replicate.com/).