Replicate

version alpha

name Replicate

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

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

typography display-xxl: fontFamily: rb-freigeist-neue fontSize: 128px fontWeight: 700 lineHeight: 1.0 letterSpacing: -3px display-xl: fontFamily: rb-freigeist-neue fontSize: 72px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.8px display-lg: fontFamily: rb-freigeist-neue fontSize: 48px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1px display-md: fontFamily: rb-freigeist-neue fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.5px heading-lg: fontFamily: basier-square fontSize: 38.4px fontWeight: 600 lineHeight: 0.83 letterSpacing: -0.5px heading-md: fontFamily: basier-square fontSize: 24px fontWeight: 600 lineHeight: 1.33 letterSpacing: -0.35px heading-sm: fontFamily: basier-square fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: -0.3px subtitle: fontFamily: rb-freigeist-neue fontSize: 18px fontWeight: 600 lineHeight: 1.56 letterSpacing: 0 body-lg: fontFamily: basier-square fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0 body-md: fontFamily: basier-square fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: basier-square fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 button-md: fontFamily: basier-square fontSize: 16px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0 button-sm: fontFamily: basier-square fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: basier-square fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 caption-tight: fontFamily: basier-square fontSize: 14px fontWeight: 600 lineHeight: 1.43 letterSpacing: -0.35px code-md: fontFamily: jetbrains-mono fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 code-sm: fontFamily: jetbrains-mono fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0

rounded none: 0px xs: 4px sm: 6px md: 10px lg: 16px full: 9999px

spacing xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px xxxl: 48px section: 96px band: 160px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 24px height: 44px button-primary-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" button-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 12px 24px height: 44px button-outline: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 11px 23px height: 44px button-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 16px height: 36px button-icon: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 12px 20px height: 44px hero-band: backgroundColor: "{colors.hero-warm}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 96px 32px model-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px collection-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.md}" padding: 24px pricing-tier: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px code-block: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code-md}" rounded: "{rounded.md}" padding: 24px code-tab: backgroundColor: "{colors.surface-deep}" textColor: "{colors.on-dark-mute}" typography: "{typography.code-sm}" rounded: "{rounded.xs}" padding: 6px 12px badge-status: backgroundColor: "{colors.badge-success}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 10px badge-tag: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 4px 10px nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.none}" height: 60px sub-nav-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 14px contributor-avatar: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px footer: backgroundColor: "{colors.surface-deep}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 32px

Overview

Replicate is a developer-tools platform with the soul of an art zine. The public marketing surfaces sit on a warm cream canvas ({colors.canvas} — #f9f7f3) rather than the white-or-near-black default of typical AI infrastructure sites, and that single decision colours everything else: photography reads as editorial, code wells read as printed pull-quotes, and the brand orange ({colors.primary} — #ea2804) feels like a stamp rather than a notification.

The typography is the load-bearing decoration. rb-freigeist-neue — a heavy, slightly condensed grotesque — appears at sizes up to 128px in hero bands, with a tight lineHeight: 1.0 and negative letter-spacing that lets multi-line headlines pack into geometric blocks. The companion family, basier-square, takes care of body, button labels, and metadata in the 14–18px range. JetBrains Mono carries every code well, command, and example. Three families, three jobs, no overlap.

Page rhythm cycles between a default cream canvas, a bold full-bleed orange hero band, and a {colors.surface-dark} (#202020) section that hosts the code stories — the "how it works" walkthrough. Curves are intentional and soft: every interactive surface (buttons, inputs, tags, avatars) uses {rounded.full}, while content cards and code wells step up to {rounded.md} or {rounded.lg}. There are no sharp corners on Replicate; the system reads as friendly precision.

Key Characteristics:

• A warm cream canvas ({colors.canvas} — #f9f7f3) replaces the typical white background, paired with {colors.surface-bone} for inset cards.

• Hot orange ({colors.primary} — #ea2804) is reserved for the primary CTA, the hero band, and inline link colour. Never decorative.

• Display headlines run massive — {typography.display-xxl} at 128px in hero bands and {typography.display-xl} at 72px on section openers — with tight lineHeight: 1.0 and negative letter-spacing.

• Three-family typography stack: rb-freigeist-neue for display, basier-square for UI/body, jetbrains-mono for code.

• Every interactive element is fully rounded ({rounded.full} 9999px) — buttons, inputs, badges, avatars — while content cards step to {rounded.md} 10px.

• Dark code wells ({colors.surface-dark} background) sit inside the cream canvas as full-bleed reading surfaces, mimicking print pull-quotes.

• Section rhythm: cream → orange hero → cream → dark code-story band → cream → black footer.

Colors

Brand & Accent

• Replicate Orange ({colors.primary} — #ea2804): the brand accent. Reserved for the primary CTA, hero band background, and inline link colour. Treat as a stamp — one orange element per viewport at most.

• Orange Pressed ({colors.primary-deep} — #c01f00): the active/pressed state of {colors.primary} — used on {component.button-primary-pressed}.

• Hero Glow ({colors.hero-glow} — #ff6a3d): the lighter orange that appears in the radial atmospheric mesh behind the hero copy.

• Hero Pink ({colors.hero-pink} — #f4a8a0): a warm pink wash that softens the bottom edge of the hero band before it transitions to cream.

• On-Primary ({colors.on-primary} — #ffffff): label colour on top of {colors.primary} surfaces.

Surface

• Canvas ({colors.canvas} — #f9f7f3): the default page background. Warm cream, never pure white.

• Surface Bone ({colors.surface-bone} — #f3f0e8): a half-step deeper cream used for inset card groups and feature bands.

• Surface Card ({colors.surface-card} — #ffffff): pure white for individual model cards, search inputs, and pricing tiers — the only place white appears.

• Surface Dark ({colors.surface-dark} — #202020): code wells, featured pricing tier, and the "how it works" walkthrough band.

• Surface Deep ({colors.surface-deep} — #000000): footer canvas and the inset code-tab strip inside {component.code-block}.

• Hairline ({colors.hairline} — rgba(32,32,32,0.12)): low-contrast 1px dividers on cream surfaces.

• Hairline Strong ({colors.hairline-strong} — #202020): button outlines, focused inputs, and structural separators.

Text

• Ink ({colors.ink} — #202020): primary text colour. Notably warmer than #000000, matching the cream canvas.

• Body ({colors.body} — #3a3a3a): long-form body copy where ink would feel too heavy at 18px+ line lengths.

• Charcoal ({colors.charcoal} — #575757): captions, metadata, secondary nav.

• Mute ({colors.mute} — #646464): supporting text and inactive labels.

• Ash ({colors.ash} — #8d8d8d): tertiary text, placeholder copy.

• Stone ({colors.stone} — #bbbbbb): disabled foreground, neutral icon outlines.

• On-Dark ({colors.on-dark} — #fcfcfc): primary text on {colors.surface-dark} and {colors.surface-deep}.

• On-Dark Mute ({colors.on-dark-mute} — rgba(252,252,252,0.72)): secondary text in dark regions; preserves the off-white feel without pure white pop.

Semantic

• Success ({colors.badge-success} — #2b9a66): inline success badges and "running" status pills on model cards.

• Link ({colors.link} — #ea2804): inline link colour — same as primary orange, intentionally pulling links into the brand accent.

• Focus Ring ({colors.ring-focus} — rgba(59,130,246,0.5)): the default focus ring on interactive elements.

• GitHub Dark ({colors.github-dark} — #24292e): the GitHub-branded button surface (kept off-brand-on-purpose to match GitHub's own tokens).

Typography

Font Family

Replicate ships a deliberate three-family stack:

• rb-freigeist-neue — proprietary heavy grotesque used for all display sizes (30px+). Carries the editorial-magazine personality through tight lineHeight: 1.0 and negative letter-spacing.

• basier-square — pr