返回列表
行业: AI 与大语言模型平台Website

Replicate

Replicate 以暖奶油色开发者画布、醒目的热橙色和具有个性的展示字体呈现机器学习平台，通过模型示例、代码片段和清晰调用流程降低技术使用门槛。

Light UIEditorialDeveloper-focusedDesign System
Replicate 网站预览
设计系统
品牌色彩 · 22

primary

#EA2804

--color-primary

primary deep

#C01F00

--color-primary-deep

on primary

#FFFFFF

--color-on-primary

ink

#202020

--color-ink

body

#3A3A3A

--color-body

charcoal

#575757

--color-charcoal

mute

#646464

--color-mute

ash

#8D8D8D

--color-ash

stone

#BBBBBB

--color-stone

on dark

#FCFCFC

--color-on-dark

canvas

#F9F7F3

--color-canvas

surface bone

#F3F0E8

--color-surface-bone

surface card

#FFFFFF

--color-surface-card

surface dark

#202020

--color-surface-dark

surface deep

#000000

--color-surface-deep

hairline strong

#202020

--color-hairline-strong

hero warm

#EA2804

--color-hero-warm

hero glow

#FF6A3D

--color-hero-glow

hero pink

#F4A8A0

--color-hero-pink

badge success

#2B9A66

--color-badge-success

link

#EA2804

--color-link

github dark

#24292E

--color-github-dark

字体系统

字体家族

rb-freigeist-neue / basier-square / jetbrains-mono

字重

700600400

备注

3 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIEditorialDeveloper-focusedDesign System
设计文档

品牌设计系统的完整 Markdown 文档

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/).

    同类品牌推荐

    Claude

    Light UI · Editorial

    Cohere

    Light UI · Editorial

    ElevenLabs

    Light UI · Editorial

    Replicate 设计系统 | 品牌模板 · ViboDesign