A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
22tokens
12type steps
5radius steps
2pxspacing base
Replicate, in one page
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 tightlineHeight: 1.0and negative letter-spacing. - Three-family typography stack:
rb-freigeist-neuefor display,basier-squarefor UI/body,jetbrains-monofor 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.
Do's and don'ts
Do
- Use
{colors.canvas}(cream) as the default page background. White ({colors.surface-card}) appears only on individual cards, inputs, and the hero illustration backdrop. - Reserve
{colors.primary}for the primary CTA, the home hero band, and inline links — three roles, nothing else. - Set every interactive element to
{rounded.full}— buttons, inputs, badges, avatars, pills. - Step content cards up to
{rounded.md}(10px) or{rounded.lg}(16px) — never sharp corners. - Open hero bands with
{typography.display-xxl}(128px) and{typography.display-xl}(72px) atlineHeight: 1.0with negative letter-spacing. - Use
rb-freigeist-neuefor all display,basier-squarefor UI/body,jetbrains-monofor code. Keep the lanes strict. - Render code in
{component.code-block}with a{colors.surface-dark}background — code is print, not an inline grey box. - Pair photography with
{rounded.md}corners and full-bleed crop inside cards.
Don't
- Don't replace cream with pure white at the page level. The brand temperature comes from
{colors.canvas}. - Don't introduce a secondary brand colour. Orange is the only accent; semantic green and focus blue are functional, not decorative.
- Don't loosen display
lineHeightpast 1.0. Tight stacking is structural. - Don't bump body weight to 500 for emphasis — change family (
basier-square→rb-freigeist-neue) instead. - Don't apply
{rounded.full}to content cards. Pill-shaped cards break the rhythm. - Don't put code in a light grey box. Code wells are always
{colors.surface-dark}or{colors.surface-deep}. - Don't use orange on body text or large surfaces — it loses its stamp quality immediately.
- Don't add drop shadows on cream surfaces. Elevation is colour-blocking; shadows are reserved for floating thumbnails.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Replicate design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #ea2804
- primary-deep: #c01f00
- on-primary: #ffffff
- ink: #202020
- body: #3a3a3a
- charcoal: #575757
- mute: #646464
- ash: #8d8d8d
- stone: #bbbbbb
- on-dark: #fcfcfc
Type:
- families: rb-freigeist-neue, basier-square, jetbrains-mono, Bricolage Grotesque
- scale: 11, 12, 14, 16, 18, 20, 24, 30, 38.4
- weights: 400, 600, 700
Shape:
- radius: 0, 4, 6, 10, 16
Spacing: 2, 4, 6, 8, 12, 16, 24, 32, 48, 64
Rules:
- Use `{colors.canvas}` (cream) as the default page background. White (`{colors.surface-card}`) appears only on individual cards, inputs, and the hero illustratio…
- Reserve `{colors.primary}` for the primary CTA, the home hero band, and inline links — three roles, nothing else.
- Set every interactive element to `{rounded.full}` — buttons, inputs, badges, avatars, pills.
- Step content cards up to `{rounded.md}` (10px) or `{rounded.lg}` (16px) — never sharp corners.
- Open hero bands with `{typography.display-xxl}` (128px) and `{typography.display-xl}` (72px) at `lineHeight: 1.0` with negative letter-spacing.
- Use `rb-freigeist-neue` for all display, `basier-square` for UI/body, `jetbrains-mono` for code. Keep the lanes strict.
Avoid:
- Don't replace cream with pure white at the page level. The brand temperature comes from `{colors.canvas}`.
- Don't introduce a secondary brand colour. Orange is the only accent; semantic green and focus blue are functional, not decorative.
- Don't loosen display `lineHeight` past 1.0. Tight stacking is structural.
- Don't bump body weight to 500 for emphasis — change family (`basier-square` → `rb-freigeist-neue`) instead.
- Don't apply `{rounded.full}` to content cards. Pill-shaped cards break the rhythm.
- Don't put code in a light grey box. Code wells are always `{colors.surface-dark}` or `{colors.surface-deep}`.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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).
Type scaleRead the full spec
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.0and negative letter-spacing. - basier-square — proprietary humanist sans-serif used for body, button labels, captions, and metadata.
- jetbrains-mono — open-source monospace used in every code well and inline command.
When proprietary families cannot be licensed, Bricolage Grotesque or Migra are credible substitutes for rb-freigeist-neue, and Geist or Inter can stand in for basier-square. JetBrains Mono is open-source and should always be used directly.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xxl} | 128px | 700 | 1.0 | -3px | The single hero "Run AI" / "Imagine what you can build" headline. One per page. |
{typography.display-xl} | 72px | 700 | 1.0 | -1.8px | Section openers ("How it works", "Scale on Replicate"). |
{typography.display-lg} | 48px | 700 | 1.0 | -1px | Sub-section titles, pricing tier names. |
{typography.display-md} | 30px | 600 | 1.2 | -0.5px | Feature card titles. |
{typography.heading-lg} | 38.4px | 600 | 0.83 | -0.5px | Tightly-stacked basier-square headlines, used in pricing and enterprise hero. |
{typography.heading-md} | 24px | 600 | 1.33 | -0.35px | Card titles, model detail headers. |
{typography.heading-sm} | 20px | 600 | 1.4 | -0.3px | List section headers. |
{typography.subtitle} | 18px | 600 | 1.56 | 0 | Lead paragraphs in display sections. |
{typography.body-lg} | 18px | 400 | 1.56 | 0 | Marketing prose. |
{typography.body-md} | 16px | 400 | 1.5 | 0 | Default body. |
{typography.body-sm} | 14px | 400 | 1.43 | 0 | Captions, metadata. |
{typography.button-md} | 16px | 600 | 1.0 | 0 | Default button label. |
{typography.button-sm} | 14px | 600 | 1.0 | 0 | Compact button label, sub-nav pills. |
{typography.caption} | 12px | 400 | 1.33 | 0 | Footer disclosure, copyright. |
{typography.caption-tight} | 14px | 600 | 1.43 | -0.35px | Emphatic small caption used in pricing tier rows. |
{typography.code-md} | 14px | 400 | 1.43 | 0 | Code blocks and inline code. |
{typography.code-sm} | 11px | 400 | 1.5 | 0 | Code-tab labels and small inline tokens. |
Principles
- Display sizes hold
lineHeight: 1.0(or 0.83 on{typography.heading-lg}) so multi-line stacks read as single typographic blocks. - Negative letter-spacing scales with size — bigger types tighten more (-3px at 128px down to -0.3px at 20px). Body type stays at 0.
- Body weight sits at 400 across
{typography.body-lg}and{typography.body-md}— never bumped to 500 for emphasis. Emphasis comes from family change (basier-square → rb-freigeist-neue) rather than weight. - Code is never set in basier-square, even at small sizes — JetBrains Mono carries every literal command, every model slug, every API call.
Note on Font Substitutes
When the proprietary families are unavailable, clamp display lineHeight to 1.0 explicitly and apply a -3% letter-spacing on display-xxl / display-xl to match the original tightness. Substitutes typically render with looser tracking by default.
Components and layoutRead the full spec
Buttons
button-primary — orange CTA
- Background
{colors.primary}, label{colors.on-primary}, type{typography.button-md}, padding12px 24px,rounded: {rounded.full}, height 44px. - The single most important action on a page (e.g. "Sign in with GitHub", "Try a model").
- Pressed state lives in
button-primary-pressed(background{colors.primary-deep}).
button-dark — dark CTA
- Background
{colors.surface-dark}, label{colors.on-dark}, type{typography.button-md},rounded: {rounded.full}. - Equal-weight secondary action paired with
{component.button-primary}, or the primary action on cream when orange would be too loud.
button-outline — outlined CTA
- Background
{colors.surface-card}, label{colors.ink}, 1px solid{colors.hairline-strong}, type{typography.button-md},rounded: {rounded.full}. - Tertiary action; appears alongside primary/dark for "View docs", "Read more".
button-ghost — inline button
- Background
{colors.canvas}, label{colors.ink}, no border, type{typography.button-md},rounded: {rounded.full}, padding8px 16px. - Sub-actions inside cards and inline with body copy.
button-icon — icon button
- Background
{colors.surface-card}, label{colors.ink}, 1px solid{colors.hairline},rounded: {rounded.full}, 36×36px circular. - Carousel arrows, copy-to-clipboard, GitHub link icon.
Cards & Containers
model-card — model listing card
- Background
{colors.surface-card}, text{colors.ink}, type{typography.body-md},rounded: {rounded.md}, padding{spacing.lg}(16px). - Square thumbnail on top, model owner + name beneath in
{typography.body-sm}, single-line description in{colors.charcoal}, status pill{component.badge-status}bottom-left.
collection-tile — collection-of-models tile
- Background
{colors.canvas}, text{colors.ink}, type{typography.heading-md},rounded: {rounded.md}, padding{spacing.xl}(24px). - Cream-on-cream tile inside a
{colors.surface-bone}band, used for browsing model categories.
pricing-tier — pricing tier card
- Background
{colors.surface-card}, text{colors.ink}, type{typography.body-md},rounded: {rounded.lg}, padding{spacing.xxl}(32px). - 3-up grid; tier name in
{typography.display-lg}("Free", "Pro", "Enterprise"), price in{typography.display-md}.
pricing-tier-featured — featured pricing tier
- Background
{colors.surface-dark}, text{colors.on-dark}, type{typography.body-md},rounded: {rounded.lg}, padding{spacing.xxl}. - Centre tier flipped to dark inversion to mark "recommended".
code-block — code well
- Background
{colors.surface-dark}, text{colors.on-dark}, type{typography.code-md},rounded: {rounded.md}, padding{spacing.xl}(24px). - Tab strip on top using
{component.code-tab}for switching between languages (Python, Node.js, cURL, HTTP).
code-tab — code tab chip
- Background
{colors.surface-deep}, text{colors.on-dark-mute}, type{typography.code-sm},rounded: {rounded.xs}, padding6px 12px. - Active tab swaps text colour to
{colors.on-dark}and adds a 2px bottom underline in{colors.primary}.
hero-band — full-bleed hero
- Background
{colors.hero-warm}with the atmospheric mesh detailed in Elevation, text{colors.on-dark}, type{typography.display-xxl}for the title. - Used only on the home page; secondary pages open with cream +
{typography.display-xl}.
Inputs & Forms
text-input — default input
- Background
{colors.surface-card}, text{colors.ink}, type{typography.body-md}, 1px solid{colors.hairline},rounded: {rounded.full}, padding12px 20px, height 44px. - Pill-shaped search and email fields. Focus state adds a
{colors.ring-focus}3px ring.
Navigation
nav-bar — top nav (desktop)
- Background
{colors.canvas}, type{typography.button-sm}, height 60px, single hairline{colors.hairline}bottom border. - Left: wordmark logo. Centre: top-level nav ("Explore", "Pricing", "Docs", "Blog"). Right: GitHub icon + "Sign in" link +
{component.button-primary}.
nav-bar (mobile)
- Same height 60px, collapses centre nav into a hamburger icon. Logo stays left, sign-in CTA stays right.
sub-nav-pill — sub-nav chip
- Pill chips set in a horizontal row above content (e.g. "All", "Featured", "Image generation", "Audio"),
{component.sub-nav-pill}styling.
Signature Components
badge-status — model status badge
- Background
{colors.badge-success}, label{colors.on-dark}, type{typography.caption},rounded: {rounded.full}, padding4px 10px. - Anchored on the bottom-left of model cards to indicate "running" or "deployed".
badge-tag — neutral tag
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Desktop XL | ≥ 1440px | Full max-width 1280 body, hero band runs full-bleed, 4-up model grid. |
| Desktop | 1280–1439px | Container shrinks; padding {spacing.xl} (24px) sides. |
| Tablet Large | 1024–1279px | Model grid 3-up, code-story splits remain 2-up. |
| Tablet | 768–1023px | Model grid 2-up, code-story stacks (narrative on top, code below), pricing stacks vertically. |
| Mobile Large | 426–767px | Model grid 1-up at 480px+, nav collapses to hamburger, hero {typography.display-xxl} clamps to 64px. |
| Mobile | ≤ 425px | All grids 1-up, hero clamps to 48px, section padding {spacing.section} collapses to 64px. |
Touch Targets
- All buttons ship at minimum 44px tall on mobile; default
{component.button-primary}is 44px tall — comfortably clearing WCAG AAA. {component.button-icon}(36px) is bumped to 44px on mobile via increased padding.{component.sub-nav-pill}stays at 36px on desktop and grows to 40px on mobile via vertical padding adjustment.
Collapsing Strategy
- Top-level nav collapses to hamburger at < 1024px; the wordmark and
{component.button-primary}stay anchored. - Hero
{typography.display-xxl}clamps: 128px → 96px → 64px → 48px across the breakpoint ladder. - Pricing 3-up grid stacks vertically at < 1024px with the featured tier remaining centre-stacked.
- Code-story splits switch from side-by-side to stacked at < 1024px, code well always second.
- Sub-nav pills convert from a wrap row to a horizontal scroll-rail at < 768px.
Image Behavior
- Model thumbnails serve at 1.5× and 2× DPR; below 768px the system swaps to a 600×600 export instead of 1200×1200.
- Hero atmospheric mesh is rendered as a CSS gradient — no asset cost, no breakpoint variation.
- Code-block contents wrap softly at < 1024px (no horizontal scroll); long lines break with a continuation marker.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-replicate {--page-bg: #f9f7f3;
--page-bg-gradient: none;
--text-color: #202020;
--heading-color: #202020;
--link-color: #d62504;
--link-hover-color: #a41c03;
--border-color: #d2d0cd;
--card-bg: #f9f7f3;
--card-shadow: 0 1px 2px rgba(32,32,32,0.06);
--card-hover-shadow: 0 6px 18px rgba(32,32,32,0.12);
--header-bg: #202020;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #f9f7f3;
--footer-text-color: #6c6b6a;
--button-bg: #db2504;
--button-text-color: #ffffff;
--button-hover-bg: #a91d03;
--button-border: none;
--button-border-radius: 6px;
--button-secondary-bg: #eceae6;
--button-secondary-text-color: #202020;
--button-secondary-hover-bg: #dfddda;
--button-secondary-border: 1px solid #d2d0cd;
--prompt-bg: #eeece8;
--prompt-text-color: #202020;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 6px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- hoshinoresorts 83.4%
- hyke 73.2%
- nomura re 73.0%
- vodafone 72.0%
- mingeikan 71.5%
Where this came from
- Source document
volt/design-md/replicate/DESIGN.md· 30.5 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.