--- name: Replicate tagline: AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. updated_at: 2026-05-06T19:53:28+12:00 published_at: 2026-05-03T10:27:49+12:00 author: webdesignhot source_url: https://replicate.com spec: webdesignhot/0.2 profile: catalog quality: curated featured: false categories: [ai, dev-tools, saas] tags: [light, dark, mono, sans, dense, structured, brutalist] preview_swatch: ['#ffffff', '#202020', '#fcfcfc'] related: [vercel, anthropic, github] description: 'Replicate splits its marketing into two layers — a bright `#ffffff` page chrome and a near-black `#202020` hero canvas where rb-Freigeist Neue runs at 72px / weight 700. The system uses zero corner radius (sharp rectangles), basier-square sans for body, and JetBrains Mono for the omnipresent code samples that double as the product demo. Every section shows the literal `replicate.run("...")` API call rendered inline. Where every other AI/API site rounds to 6–12px, Replicate refuses — the brutalist 0px geometry says "this is the API, rendered." The two-canvas light/dark rhythm creates an immediate "before/after" beat: light is your code, dark is the model running.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: border-strong themes: default: light available: [light, dark] switch-via: 'Marketing chrome is light by default; the hero band and code-running panels invert to dark canvas. Toggle persisted in localStorage on the dashboard.' colors: light: bg: '#ffffff' # bright page chrome canvas bg-alt: '#fdfdfd' # near-white alternate panel surface: '#fcfcfc' # off-white code-block surface surface-light: '#f5f5f5' # neutral-100 inset panel text: '#202020' # primary copy text-strong: '#000000' # rare absolute black for ultra-emphasis text-medium: '#404040' # secondary copy text-soft: '#646464' # supporting copy, metadata text-muted: '#8a8a8a' # captions, faint UI text-faint: '#b3b3b3' # disabled, footer microcopy brand: '#202020' # the brand colour is the dark canvas itself brand-deep: '#000000' # absolute black for active/pressed states on-brand: '#fcfcfc' # near-pure white label on the dark canvas link: '#202020' # links are dark on light, distinguished by underline link-hover: '#000000' # absolute-black link hover selected-bg: '#f5f5f5' # selected state (rare on chrome) disabled: '#b3b3b3' border: '#e9e9e9' # neutral light grey hairline (1px solid) border-strong: '#cccccc' # emphasised divider border-subtle: '#f0f0f0' # quietest division success-bg: '#e7f5ec' success-text: '#1f6b3e' warning-bg: '#fef6e4' warning-text: '#7a5a14' danger-bg: '#fbebec' danger-text: '#9a2c34' info-bg: '#eef2f7' info-text: '#1f4a7a' dark: bg: '#202020' # near-black hero canvas — Replicate's signature ground bg-alt: '#1a1a1a' # alternate dark panel surface: '#2a2a2a' # raised panel within dark canvas surface-light: '#333333' # emphasised panel within dark canvas text: '#fcfcfc' # near-pure white for text on dark text-strong: '#ffffff' # rare absolute white emphasis text-medium: '#d4d4d4' # secondary copy on dark text-soft: '#a3a3a3' # supporting on dark text-muted: '#7a7a7a' # captions on dark text-faint: '#525252' # disabled, footer microcopy on dark brand: '#fcfcfc' # brand inverts on dark — bright label on dark canvas brand-deep: '#ffffff' # absolute white pressed state on-brand: '#202020' # near-black label on inverted brand link: '#fcfcfc' # links on dark canvas stay near-white link-hover: '#ffffff' selected-bg: '#2a2a2a' disabled: '#525252' border: 'rgba(255, 255, 255, 0.10)' # 10% white hairline within dark canvas border-strong: 'rgba(255, 255, 255, 0.18)' # emphasised on dark border-subtle: 'rgba(255, 255, 255, 0.05)' success-bg: 'rgba(31, 107, 62, 0.20)' success-text: '#3fb950' warning-bg: 'rgba(122, 90, 20, 0.20)' warning-text: '#d29922' danger-bg: 'rgba(154, 44, 52, 0.20)' danger-text: '#f85149' info-bg: 'rgba(31, 74, 122, 0.20)' info-text: '#79c0ff' typography: display: family: '"rb-freigeist-neue", ui-sans-serif, system-ui, sans-serif' weights: [400, 700] opentype-features: ['kern', 'liga'] body: family: '"basier-square", ui-sans-serif, system-ui, sans-serif' weights: [400, 500] opentype-features: ['kern', 'liga'] mono: family: '"jetbrains-mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' weights: [400, 500] opentype-features: ['tnum', 'zero', 'calt'] scale: display-hero: { size: 96, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: 'kern liga' } display: { size: 72, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display, note: 'observed hero — the brand signature' } h1: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h2: { size: 48, weight: 400, lineHeight: 1.1, tracking: '0', family: display, note: 'h2 deliberately at 400 — weight contrast vs. hero 700' } h3: { size: 32, weight: 400, lineHeight: 1.2, tracking: '0', family: display } h4: { size: 24, weight: 500, lineHeight: 1.3, tracking: '0', family: body } h5: { size: 18, weight: 500, lineHeight: 1.4, tracking: '0', family: body } eyebrow: { size: 11, weight: 500, lineHeight: 1.4, tracking: '0.08em', family: mono, transform: uppercase } body-large: { size: 18, weight: 400, lineHeight: 1.55, family: body } body: { size: 16, weight: 400, lineHeight: 1.5, family: body } body-small: { size: 14, weight: 400, lineHeight: 1.5, family: body } caption: { size: 13, weight: 400, lineHeight: 1.4, family: body } caption-tabular: { size: 13, weight: 500, lineHeight: 1.4, family: mono, opentype: 'tnum' } label: { size: 11, weight: 500, lineHeight: 1.3, family: mono } code: { size: 14, weight: 400, lineHeight: 1.55, family: mono, opentype: 'tnum zero calt' } code-block: { size: 14, weight: 400, lineHeight: 1.6, family: mono, opentype: 'tnum zero calt' } code-micro: { size: 12, weight: 400, lineHeight: 1.4, family: mono } radius: none: 0 micro: 0 sm: 0 md: 0 lg: 0 card: 0 pill: 9999 note: 'Replicate uses 0px on every surface — buttons, cards, code blocks, image containers. Pill (9999) reserved for rare nav badges.' spacing: base: 4 scale: [1, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 64, 96, 128] layout: page-width: 1200 prose-width: 720 site-gutter: 'clamp(20px, 5vw, 48px)' header-height: 64 grid-columns: 12 hero-pattern: 'two-canvas light/dark alternation; code-block-as-marketing-content' section-rhythm: '64-128px' components: button-primary: background: '#202020' text: '#fcfcfc' padding: '8px 16px' radius: 0 border: 'none' font: 'basier-square 500 / 14px' hover-bg: '#000000' active-bg: '#000000' use: 'Primary CTA — dark on light, sharp 0px corners.' button-primary-on-dark: background: '#ffffff' text: '#202020' padding: '8px 16px' radius: 0 border: 'none' font: 'basier-square 500 / 14px' hover-bg: '#fcfcfc' use: 'Inverted primary on the dark hero canvas — white fill, dark text.' button-secondary: background: 'transparent' text: '#202020' padding: '8px 16px' radius: 0 border: '1px solid #202020' font: 'basier-square 500 / 14px' hover-bg: 'rgba(32, 32, 32, 0.05)' use: 'Outline twin — 1px dark border, sharp corners.' button-ghost: background: 'transparent' text: '#202020' padding: '6px 10px' radius: 0 font: 'basier-square 500 / 14px' hover-bg: '#f5f5f5' use: 'Quiet utility — nav links, footer.' card: background: '#ffffff' border: '1px solid #e9e9e9' radius: 0 padding: '20px' use: 'Content card — sharp rectangle, neutral grey hairline.' card-on-dark: background: '#2a2a2a' border: 'none' radius: 0 padding: '20px' use: 'Card on the dark canvas — slightly raised tone, no border.' card-model-tile: background: '#fcfcfc' border: '1px solid #e9e9e9' radius: 0 padding: '0' aspect-ratio: 'square' use: 'Model gallery tile — 1:1 thumbnail, no rounding, no shadow.' input: background: '#ffffff' border: '1px solid #e9e9e9' radius: 0 padding: '8px 12px' font: 'basier-square 400 / 14px' placeholder-color: '#8a8a8a' focus-ring: '0 0 0 2px #202020' use: 'Form fields — sharp rectangle, dark focus ring.' code-block: background: '#fcfcfc' border: '1px solid #e9e9e9' radius: 0 padding: '16px 20px' font: 'jetbrains-mono 400 / 14px / 1.6 line-height' use: 'API call samples on the light canvas — sharp rectangle.' code-block-on-dark: background: '#fcfcfc' border: 'none' radius: 0 padding: '16px 20px' font: 'jetbrains-mono 400 / 14px / 1.6 line-height' use: 'Code-window-on-dark-IDE — off-white block on the dark hero canvas.' badge-pill: background: '#202020' text: '#fcfcfc' padding: '2px 8px' radius: 9999 font: 'jetbrains-mono 500 / 11px / uppercase' use: '"NEW" or version pill in nav — the rare exception to 0px rule.' nav-link: background: 'transparent' text: '#202020' padding: '6px 10px' font: 'basier-square 500 / 14px' hover-text: '#000000' active-bg: 'transparent' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-snap: 'cubic-bezier(0.5, 0, 0.5, 1)' duration-fast: 80 duration-standard: 160 duration-slow: 240 duration-page: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — all transitions become opacity-only, durations halve, code-block typing animations stop.' breakpoints: mobile: 640 tablet: 1024 desktop: 1200 wide: 1440 shadows: none: 'none' ambient: 'none' standard: 'none' elevated: 'none' modal: 'rgba(0, 0, 0, 0.20) 0 8px 24px' ring: '0 0 0 2px #202020' ring-on-dark: '0 0 0 2px #fcfcfc' note: 'Replicate uses no shadows on cards or buttons. The two-canvas light/dark rhythm handles all elevation work. Modals are the only exception.' accessibility: contrast-text-on-bg: 16.0 # #202020 on #ffffff — AAA at all sizes contrast-text-soft-on-bg: 5.5 # #646464 on #ffffff — AA at body sizes contrast-text-muted-on-bg: 3.7 # #8a8a8a on #ffffff — fails AA body; only used at 18px+ or 14px bold contrast-text-on-dark: 15.5 # #fcfcfc on #202020 — AAA contrast-text-on-dark-soft: 5.7 # #a3a3a3 on #202020 — AA at body sizes contrast-link-on-bg: 16.0 # #202020 on #ffffff — AAA focus-ring: '2px solid #202020 with 2px offset on light; 2px solid #fcfcfc on dark' reduced-motion-honored: true keyboard-nav: 'tab order matches visual flow; light/dark canvas transitions preserve focus state.' prose-line-length: 'capped at 720px on text pages.' dark-mode: optional # Replicate lives in the two-canvas light/dark rhythm; both grounds are equal citizens of the brand. colors-dark: 'see bg-dark, surface-dark-soft, text-on-dark above — the dark canvas IS the brand''s second voice, not an alternate theme.' --- ## 1. Visual Theme & Atmosphere Replicate is an "AI-with-an-API" company whose marketing site treats the API itself as the demo. The site is built around a **two-canvas rhythm**: a bright `#ffffff` page chrome (header, nav, the "Imagine what you can build" footer) and a near-black `#202020` hero canvas where rb-Freigeist Neue runs at 72px / weight 700 with `-0.025em` tracking. The hero itself, "Run AI with an API," is literally that — the marketing copy and the sample code share the same visual surface, with `replicate.run("black-forest-labs/flux-…")` rendered in JetBrains Mono inline. What makes this design distinctive vs. nearby alternatives: the **zero-radius corners**. Every other AI/API site rounds to 6–12px. Replicate refuses — every button, badge, card, code-block, and section divider is a sharp 0px rectangle. The brutalist geometry says "this is the bare API, rendered." Combined with the two-canvas light/dark rhythm, the site reads as documentation that happens to sell something. The page never lets you forget you're looking at a developer surface. The atmospheric vocabulary: **two-canvas, light-chrome-dark-hero, code-as-marketing, brutalist-zero-radius, rb-Freigeist-display, basier-square-body, JetBrains-Mono-everywhere, documentation-as-pitch, Hoffmann-tools, mid-century-modern-tail.** Section rhythm runs 64–128px between major blocks, with the canvas alternation providing additional cadence. Light sections feel "your code" and dark sections feel "the model running" — a before/after rhythm that mirrors the API call → result pattern. The typographic system is a **three-family pairing**: rb-Freigeist Neue (a Hoffmann tools geometric grotesque with mid-century DNA) for display, basier-square (an Atipo Foundry soft-square sans) for body, and JetBrains Mono (the open-source mono used pervasively for the code samples that *are* the product). The mono isn't a fallback or an afterthought; it's the demo. Every section includes a code sample, and the API-call format `replicate.run(...)` is the visual signature of the brand. **Key Characteristics** - Two-canvas light/dark alternation — `#ffffff` chrome, `#202020` hero - **Zero corner radius on every surface** — buttons, cards, code blocks, dividers - rb-Freigeist Neue display at 72px / weight 700 with `-0.025em` tracking - basier-square sans for body — soft-square sans, 16px / 1.5 line-height - JetBrains Mono pervasive — code samples ARE the product demo - 1px solid `#e9e9e9` hairlines on light; 10% white on dark - No shadows on resting surfaces; only modals/popovers carry elevation - Code blocks span the same width as prose — never indented as sidebar - Section dividers: 1px solid borders on light; spacing alone on dark - The brand colour is the dark canvas itself (`#202020`) ## 2. Color Palette & Roles ### Primary - **bg** `#ffffff` — bright page chrome canvas; the lighter of the two grounds. - **bg-dark** `#202020` — near-black hero canvas; the brand's second ground. - **text** `#202020` — primary copy on light. The *same value as the brand surface* — Replicate uses the dark colour as both ink and ground. - **text-on-dark** `#fcfcfc` — near-pure white text on the dark canvas. ### Brand & Accent - **brand** `#202020` — the brand colour is the dark canvas itself, not a separate accent. - **brand-deep** `#000000` — absolute black for active/pressed states. - **on-brand** `#fcfcfc` — near-white (slightly off-white) label on the dark canvas; chosen over pure `#ffffff` for slightly warmer, less harsh contrast. There is **no chromatic accent** in the palette. The brand is the high-contrast monochrome itself — bg/dark inversion is the visual signature, not a colour. ### Interactive - **link** `#202020` — links are dark on light, distinguished by underline. - **link-hover** `#000000` — hover deepens to absolute black. - **link-on-dark** `#fcfcfc` — links on dark stay near-white, distinguished by underline. - **selected-bg** `#f5f5f5` — selected state on light (rare). - **disabled** `#b3b3b3` — neutral disabled. ### Neutral Scale - **near-black** `#202020` — primary text and hero canvas. - **slate** `#404040` — secondary text on light. - **soft** `#646464` — supporting copy, metadata. - **muted** `#8a8a8a` — captions, faint UI. - **faint** `#b3b3b3` — disabled, footer microcopy. - **near-white** `#fcfcfc` — text on dark, code-block surface. - **paper** `#fdfdfd` — alternate near-white ground. - **inset** `#f5f5f5` — quiet inset panel. - **hairline** `#e9e9e9` — 1px border default on light. ### Surface & Borders - **surface-light-0 (page)** — `#ffffff`. - **surface-light-1 (panel)** — `#fdfdfd` near-white alt. - **surface-light-2 (inset)** — `#f5f5f5`. - **surface-light-code** — `#fcfcfc` off-white code-block. - **surface-dark-0 (hero)** — `#202020` near-black. - **surface-dark-1 (panel)** — `#2a2a2a` slightly raised. - **surface-dark-2 (emphasised)** — `#333333`. - **border (light)** `#e9e9e9` — 1px solid hairline. - **border-strong (light)** `#cccccc` — emphasised divider. - **border-subtle (light)** `#f0f0f0` — quietest division. - **border (dark)** `rgba(255, 255, 255, 0.10)` — 10% white on dark. - **border-strong (dark)** `rgba(255, 255, 255, 0.18)`. ### Shadow Colors Replicate uses **no shadows on cards or buttons**. The two-canvas pattern handles all elevation work — dark sections are visually "on top of" light, even when both are the same z-index. The exception: modals carry a single `rgba(0, 0, 0, 0.20) 0 8px 24px` shadow on light surfaces. The brutalist refusal of shadow is part of the brand signal. ### Semantic - **success** — bg `#e7f5ec`, text `#1f6b3e`. Reserved for build-success. - **warning** — bg `#fef6e4`, text `#7a5a14`. API limits, deprecation notices. - **danger** — bg `#fbebec`, text `#9a2c34`. Validation, request errors. - **info** — bg `#eef2f7`, text `#1f4a7a`. Documentation callouts. Note: semantic colours are visually quiet on the marketing surface; they appear primarily in the dashboard / API console rather than on the marketing chrome. ## 3. Typography Rules ### Font Family - **Display**: `"rb-freigeist-neue", ui-sans-serif, system-ui, sans-serif` — a geometric grotesque by Hoffmann tools with distinctly mid-century-modern tail shapes (short descenders, generous counters, slightly square `o`). Used at hero scale 72px / 700. - **Body**: `"basier-square", ui-sans-serif, system-ui, sans-serif` — Atipo Foundry's soft-square sans. The squareness echoes Freigeist's geometric voice without competing for attention. - **Mono**: `"jetbrains-mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` — JetBrains' open-source mono, used pervasively for code, labels, eyebrows, and tabular figures. - **OpenType features**: `kern` and `liga` enabled across display/body. `tnum` (tabular figures), `zero` (slashed zero), and `calt` (contextual alternates for ligatures like `=>`, `->`) enabled in mono. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | rb-Freigeist Neue | 96px | 700 | 1.0 | -0.025em | kern liga | Reserved for major launches | | Display | rb-Freigeist Neue | 72px | 700 | 1.0 | -0.025em | kern liga | Hero — *the brand signature* | | H1 | rb-Freigeist Neue | 56px | 700 | 1.05 | -0.02em | liga | Page title | | H2 | rb-Freigeist Neue | 48px | 400 | 1.1 | normal | liga | *Section heading at 400 — deliberate weight contrast vs. hero 700* | | H3 | rb-Freigeist Neue | 32px | 400 | 1.2 | normal | — | Sub-section | | H4 | basier-square | 24px | 500 | 1.3 | normal | — | Card heading | | H5 | basier-square | 18px | 500 | 1.4 | normal | — | Inline emphasis | | Eyebrow | JetBrains Mono | 11px | 500 | 1.4 | 0.08em | uppercase | Section pre-label — *mono signals dev surface* | | Body Large | basier-square | 18px | 400 | 1.55 | normal | — | Lede paragraph | | Body | basier-square | 16px | 400 | 1.5 | normal | — | Default body | | Body Small | basier-square | 14px | 400 | 1.5 | normal | — | Compact UI body | | Caption | basier-square | 13px | 400 | 1.4 | normal | — | Image captions | | Caption Tabular | JetBrains Mono | 13px | 500 | 1.4 | normal | tnum | Stats, request counts | | Label | JetBrains Mono | 11px | 500 | 1.3 | normal | — | UI labels — *mono is brand-defining* | | Code Inline | JetBrains Mono | 14px | 400 | 1.55 | normal | tnum zero calt | Inline code with ligatures | | Code Block | JetBrains Mono | 14px | 400 | 1.6 | normal | tnum zero calt | Code-block samples — the product demo | | Code Micro | JetBrains Mono | 12px | 400 | 1.4 | normal | — | Footnote, version | ### Principles - **Hero weight 700 is the monumental beat.** rb-Freigeist Neue at 72px / 700 / -0.025em creates the brutalist hero. Section H2s drop to weight 400 — a deliberate weight contrast that makes hero sizes feel monumental. - **basier-square for body and UI labels above 12px.** The soft-square sans pairs with Freigeist's geometric voice without competing. - **JetBrains Mono is non-negotiable for code AND for ui labels at 11–12px.** The pervasive mono is the product demo. - **Three-family discipline.** Freigeist for display only; basier-square for body / UI; JetBrains Mono for code, labels, eyebrows, tabular figures. - **Negative tracking only at display.** -0.025em at 72px+, -0.02em at 56px, normal at 48px and below. - **Body 16/24.** Standard developer-tool body — not editorial 20px, not dashboard 13px. - **Eyebrow uses mono + 0.08em tracking + uppercase.** Wider tracking than most brands; signals "API surface." - **Code-block typography matches body width.** Code blocks span the same column as prose, never indented or sidebar — the API call is content, not annotation. - **OpenType: `calt` in mono enables ligatures** (`=>`, `->`, `===`, `!==`) — a subtle dev-tool signal. ## 4. Component Stylings ### Buttons **Primary (Dark)** - Background: `#202020`. Text: `#fcfcfc`, basier-square 500 / 14px. - Padding: `8px 16px`. Radius: `0`. No border. - Hover: bg → `#000000` over 80ms. - Active: bg → `#000000` (instant). - Focus: 2px dark ring with 2px offset. - Use: Primary CTA on light canvas — *Sign up, Get started, Run model.* **Primary on Dark (Inverted)** - Background: `#ffffff`. Text: `#202020`, basier-square 500 / 14px. - Padding: `8px 16px`. Radius: `0`. No border. - Hover: bg → `#fcfcfc`. - Use: Primary CTA on the dark hero canvas. **Secondary (Outline)** - Background: transparent. Text: `#202020`, basier-square 500 / 14px. - Border: `1px solid #202020`. Radius: `0`. - Hover: bg → `rgba(32, 32, 32, 0.05)`. - Use: Twin to primary — *Read docs, View pricing.* **Ghost (Quiet)** - Background: transparent. Text: `#202020`, basier-square 500 / 14px. - Padding: `6px 10px`. Radius: `0`. - Hover: bg → `#f5f5f5`. - Use: Nav links, footer. ### Cards **Editorial Card (Light)** - Background: `#ffffff`. Border: `1px solid #e9e9e9`. Radius: `0`. Padding: `20px`. - Shadow: none. - Hover: border → `#cccccc`; no shadow change. - Use: Capability tile, model card, blog index entry. **Card on Dark Canvas** - Background: `#2a2a2a`. Border: none. Radius: `0`. Padding: `20px`. - Use: Quiet card on the dark hero / scale section. **Model Tile** - Background: `#fcfcfc`. Border: `1px solid #e9e9e9`. Radius: `0`. Aspect: 1:1. - No spacing between tiles when used in a tight gallery grid. - Use: Model gallery — sharp rectangles in a tight grid, no rounding, no shadow. ### Badges, Tags, Pills **Mono Badge** — bg `#202020`, text `#fcfcfc`, JetBrains Mono 500 / 11px / uppercase, padding `2px 8px`, radius `9999`. *The rare exception to the 0px rule.* **Eyebrow Label** — no chrome, just type. JetBrains Mono 500 / 11px / uppercase / 0.08em tracking, colour `#646464`. **Status Tag (light)** — bg `#f5f5f5`, text `#202020`, radius `0`, padding `2px 8px`, JetBrains Mono 500 / 11px. ### Inputs / Forms **Text Input** - Background: `#ffffff`. Border: `1px solid #e9e9e9`. Radius: `0`. Padding: `8px 12px`. - Font: basier-square 400 / 14px. Placeholder: `#8a8a8a`. - Focus: `0 0 0 2px #202020` ring, border → `#202020`. - Error: border → `#9a2c34`, helper red below. **Code Input** (rare on marketing) — JetBrains Mono 14px in a sharp `0px` container. ### Navigation - Header height `64px`. Background `#ffffff` (transparent over dark hero with white text). - Logo: Replicate wordmark in basier-square 600, near-black `#202020`. - Nav links: basier-square 500 / 14px, colour `#202020`, padding `6px 10px`. Hover: text → `#000000`. - Right-side: ghost "Docs", ghost "Pricing", primary dark "Sign in" button. - On dark hero: nav inverts — text becomes `#fcfcfc`, primary button inverts to white-on-dark. - Mobile (<640px): hamburger collapses to a full-screen sheet. ### Optional Components **Code Block (Marketing-Inline)** - On light: bg `#fcfcfc`, border `1px solid #e9e9e9`, radius `0`, padding `16px 20px`. - On dark: bg `#fcfcfc` (off-white block on dark canvas — *the code-window-on-dark-IDE feel*), no border. - JetBrains Mono 14px / 400 / 1.6 line-height with ligatures. - Copy button: top-right, JetBrains Mono 11px / 500 / uppercase "COPY" label. **Tooltip** — bg `#202020`, text `#fcfcfc`, radius `0`, padding `6px 10px`, font `JetBrains Mono 500 / 12px`. **Toast** — bg `#202020`, text `#fcfcfc`, radius `0`, padding `12px 16px`, no shadow. **Modal** — bg `#ffffff`, radius `0`, shadow `rgba(0, 0, 0, 0.20) 0 8px 24px`, max-width `560px`. Backdrop: 60% black. *The single component that uses elevation shadow.* ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128 — developer-tool standard. - **Density observation**: Replicate is *medium-dense*. The hero packs at 64–96px section rhythm; documentation surfaces at 24–48px. Code blocks fill the prose column at full width. ### Grid & Container - **Page max width**: `1200px` — narrower than typical marketing, wider than docs. - **Site gutter**: `clamp(20px, 5vw, 48px)`. - **Grid**: 12 columns with 24px gutters. - **Hero treatment**: full-width dark canvas, 72px headline left-aligned in a 720px column, code block beneath at the same width. - **Code blocks span the same width as prose**, never indented or sidebar-positioned — they stand inline as primary content. ### Whitespace Philosophy The whitespace philosophy is **documentation-grade**. Section gutters at 64–128px (the upper bound used at hero/scale transitions); intra-section at 16–32px. The page reads as a long-scroll documentation page that happens to sell — closer to GitHub README density than to SaaS marketing. ### Section Cadence - Light hero (rare) → **Dark hero `#202020`** with rb-Freigeist 72px + code sample → Light feature ladder → **Dark "Scale on Replicate"** band → Light model gallery → Light footer. - The two-canvas alternation is the brand's primary cadence device. Light sections feel "your code"; dark sections feel "the model running." - Dividers on light: `1px solid #e9e9e9`. On dark: spacing alone (no rule needed). ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | All | 0px | Buttons, cards, code blocks, image containers, footer columns, inputs, modals — *every surface* | | Pill | 9999px | Rare nav badges ("NEW", version pills) — the single exception | Replicate's signature is **zero radius on every surface**. The geometric refusal is the visual signature — every rectangle is a 0px-cornered sharp rectangle. The exception is decorative pill badges in the navigation, which use `9999px` for "new" labels and version tags. Where Vercel softens to 6px and Stripe rounds to 8px, Replicate refuses. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default — every resting surface | | 1 | Two-canvas pattern (`#202020` next to `#ffffff`) | Section-level elevation handled by canvas inversion | | 2 | None | (Cards do NOT lift) | | 3 | None | (Hover does NOT add shadow — borders deepen instead) | | 4 | None | (Dropdowns use sharp rectangles with 1px borders) | | 5 | `rgba(0, 0, 0, 0.20) 0 8px 24px` | Modals only — the single elevation use | ### Shadow Philosophy Replicate's depth is **handled by the two-canvas alternation, not by cast shadows**. Dark sections are visually "on top of" light sections, even when both are the same z-index — the brutalist refusal of shadow is part of the brand signal. When elevation is required (modals, popovers), the shadow is neutral, low-opacity, and minimal. Cards rest flat with 1px hairlines. The discipline says: this is a developer surface, not an interactive marketing brochure. ## 8. Interaction & Motion ### Easing Curves - **`ease-standard`**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material default. - **`ease-emphasized`**: `cubic-bezier(0.2, 0, 0, 1)` — modal enter, code-block reveal. - **`ease-snap`**: `cubic-bezier(0.5, 0, 0.5, 1)` — symmetrical snap; canvas transitions on scroll-snap pages. ### Duration Buckets - **Fast (80ms)** — colour transitions, focus rings, link hovers — *snappy, dev-tool register.* - **Standard (160ms)** — button hover, dropdown reveal. - **Slow (240ms)** — modal enter/exit, code-block expansion. - **Page (320ms)** — route transitions, scroll-linked reveals. ### Per-Component Micro-States - **Button hover (primary)**: bg `#202020` → `#000000` over 80ms. - **Card hover**: border `#e9e9e9` → `#cccccc` over 160ms; no shadow change, no transform. - **Link hover**: colour `#202020` → `#000000` over 80ms; underline offset reduces. - **Input focus**: 2px dark ring fades in over 80ms. - **Code-block hover**: copy button fades in at top-right over 160ms. - **Canvas-transition on scroll**: hero canvas reveals via opacity + slight 12px translate-up on enter (320ms). ### Page Transitions Code samples within sections animate in via `IntersectionObserver` at 80% viewport, 240ms duration with subtle 8px translate-up. Between routes, masthead persists; body cross-fades over 320ms. ### Reduced Motion Honoured globally. All transforms collapse to opacity; durations halve; code-block typing animations stop; scroll-linked reveals snap to final state. ## 9. Accessibility & A11y ### Contrast Pairs - **`#202020` text on `#ffffff` bg**: 16.0:1 — AAA at all sizes. - **`#404040` text on `#ffffff` bg**: 10.4:1 — AAA. - **`#646464` text on `#ffffff` bg**: 5.5:1 — AA at body sizes. - **`#8a8a8a` text on `#ffffff` bg**: 3.7:1 — fails AA body; only used at large sizes (≥18px or ≥14px bold). - **`#fcfcfc` text on `#202020` bg**: 15.5:1 — AAA. - **`#a3a3a3` text on `#202020` bg**: 5.7:1 — AA at body sizes. - **`#fcfcfc` text on `#000000` brand-deep**: 16.7:1 — AAA. ### Focus Indicators - Default ring on light: `0 0 0 2px #202020` with 2px offset. - Ring on dark: `0 0 0 2px #fcfcfc` with 2px offset. - All interactive surfaces show a visible focus state. ### ARIA Patterns - **Navigation**: `