Screenshot of Replicate

Replicate

replicate.com

The reference for floating one full-bleed sunset gradient (magenta #ff6bfc to ember #ea2804 to gold #f6f47f) behind a flat white developer-product page, with live syntax-highlighted code cards sitting inside the marketing layout, not the docs.

Developer Tool flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Rb-Freigeist-Neue
body
basier-square
mono
jetbrains-mono

Do / Don't

Reference it for

  • The hero gradient: a 135deg magenta-to-ember-to-gold wash with a faint halftone dot texture over it, white display type laid directly on the colour
  • Oversized condensed bold display headline (up to ~128px) reading 'Run AI with an API.' in pure white, set tight with a hard full stop
  • Black solid pill button (#202020, radius 9999px) with a small lightning glyph, 'Get started for free', as the single primary CTA
  • A tabbed code card (Node / Python / HTTP) with GitHub-style syntax colours dropped straight into the hero band, paired with a generated-image preview tile beside it
  • Pill-everything radius system: 9999px on buttons, inputs, badges and filter chips; 0px square corners only on cards and images
  • Severe two-colour discipline: #202020 ink on #ffffff, near-total greyscale UI, colour reserved for the gradient and code tokens
  • Capability chip row ('Generate images', 'Generate speech', 'Generate music' ...) as selectable outline pills, the active one filled black
  • Flat elevation: 1px #d9d9d9 hairline borders carry separation, cards float on the same white as the canvas with no drop shadow

Do not copy

  • The Replicate wordmark and its bracketed 'rr' logo glyph
  • The exact sunset gradient stops (#ff6bfc / #ea2804 / #f6f47f) as a verbatim copy, recolour them
  • The 'Run AI with an API.' headline wording
  • Product-specific code samples (replicate.run, REPLICATE_API_TOKEN)
  • The model attribution captions (black-forest-labs/flux-2-pro) and ByteDance promo bar