Replicate projects a sunlit developer playground on white: one signature sunset gradient (magenta → ember → gold) anchors the hero, section borders, and brand moments, while every interactive surface dissolves into a pill (9999px radius). The system pairs a high-contrast display face (RB Freigeist Neue, up to 128px) for editorial headlines against Basier Square at 14–16px with -0.025em tracking for functional UI — two voices, one warm-white canvas. Code is first-class: GitHub-syntax editor cards live directly inside marketing layouts, not buried in docs. Color discipline is severe: nearly the entire interface is #202020 on #ffffff, with a single ember accent (#ea2804) appearing only inside the gradient and the logo mark. Shadows are essentially absent — flat surfaces and 1px hairline borders carry the elevation language instead.
#ea2804Hero background wash, section border frames, brand-mark dot grid — the only chromatic surface treatment in the system. Always at full saturation; never desaturated or muted; The single non-gradient accent — appears in the logo mark and the warm shadow tint. Never used for buttons, links, or text; its job is to anchor the gradient's red midpoint
#2b9a66Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
#ffffffPage canvas, card surfaces, code editor background. The base layer everything sits on
#202020Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
#646464Secondary text, metadata, run counts, helper labels. Provides a quiet middle step between Ink and the silver border tones
#bfbfbfAvatar ring borders, decorative shadow tint, inactive dividers
#d9d9d9Hairline borders on cards, model tiles, and input fields. The primary structural divider color
#f0f0f0Subtle surface step (alt card backgrounds, section bands), input field default state
#f9f9f9Warm-white off-state surface used for the secondary surface tier (e.g. model card backgrounds behind thumbnails)
#fefce9Rare warm-tinted surface used inside editor cards and callout blocks — a very subtle nod to the gradient's yellow endpoint
#000000True black for the logo wordmark, high-contrast icon strokes, and maximum-impact filled buttons when Ink is insufficient
128px · 700 · 1 · -3.2px trackingThe quick brown fox jumps
72px · 700 · 1The quick brown fox jumps
48px · 400 · 1.2 · -1.2px trackingThe quick brown fox jumps
30px · 600 · 1.2 · -0.75px trackingThe quick brown fox jumps
29px · 400 · 1.11The quick brown fox jumps
24px · 400 · 1.4 · -0.6px trackingThe quick brown fox jumps
20px · 400 · 1.4 · -0.5px trackingThe quick brown fox jumps
18px · 400 · 1.56The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Display and editorial headlines. The high-contrast geometric face carries all the visual drama — 128px hero ('Run AI with an API.'), 48–72px section openers, 30px sub-headers. The 1.0 line-height at display sizes is a signature: letters almost touch, creating a dense monumental block. Tracking tightens to -0.025em at every size.
All functional UI: body copy, navigation, buttons, labels, badges, metadata, table cells, footer. The geometric humanist counterpoint to Freigeist — quiet enough to disappear, warm enough to read at 12px captions. 14px body, 16px default, 20–24px for sub-headings, 29px for the largest non-display heading tier.
Code blocks, API tokens, version strings, inline code, keyboard shortcuts (e.g. the '⌘+K' chip inside the search input). Lives exclusively inside editor cards and technical micro-labels.
9999px0px9999px9999px0px9999px9999px1px2px4px6px8px10px12px16px24px32px48px64px96px144px153pxBackground #000000 or #202020, text #ffffff, Basier Square 14px weight 600, 9999px radius, horizontal padding 16px, vertical padding 8px. May include a 14px leading icon. The 'Try for free', 'Get started for free', and 'Explore models' buttons all use this variant. There is no chromatic CTA — the button's contrast against Bone White is its emphasis.
Transparent background, 1px #d9d9d9 border, text #202020, Basier Square 14px weight 600, 9999px radius, 16px / 8px padding. Used for 'Push a model' and other low-emphasis paired actions.
Bone White background, 1px #d9d9d9 border, 9999px radius, 10–12px horizontal padding, 4–6px vertical padding, Basier Square 14px weight 400, text #202020. The 'Generate images', 'Generate speech', 'Generate music' filters in the screenshots are this component.
Forest Signal #2b9a66 background with white text for success/verified, or transparent with #646464 text for neutral metadata. 9999px radius, 4–6px padding, Basier Square 12px weight 600. The 'Official' checkmark badge on model cards uses the green variant.
Bone White background, 1px #d9d9d9 border, 0px radius, 16px internal padding. Left column: square or wide thumbnail (0px radius, full-bleed to card edge). Right column: model name in Basier Square 16px weight 600, owner handle 12px weight 400 #646464, description in Basier Square 14px weight 400 #202020 truncated to 2 lines, run count in Basier Square 12px weight 600 #646464, and an 'Official' badge aligned right.
Bone White background, 1px #d9d9d9 border, 0px radius. Top bar: tab switcher (Node / Python / HTTP) in Basier Square 12px weight 600, 16px horizontal padding, 10px vertical padding, with the active tab showing a 2px #202020 bottom indicator. Code area: JetBrains Mono 14px on Bone White, 16px line-height, 16px padding. Syntax colors follow GitHub palette: keywords #d73a49, strings #032f62, properties #005cc5, function names #6f42c1, numbers/comments #6a737d. A small circle/dot in the top-right corner acts as a window-control decoration.
Bone White background, 0px radius, 64px tall, 1px #f0f0f0 bottom border. Left: wordmark 'replicate' in Carbon #000000 Basier Square 16px weight 600 with a custom three-arc logomark. Center: expanded search input. Right: text links (Explore ▾, Pricing, Enterprise, Docs, Blog, Sign in) in Basier Square 14px weight 400 #202020, 16px gap, followed by the black filled 'Try for free' button.
Bone White background, 1px #d9d9d9 border, 9999px radius, 40px tall. Leading 14px search icon in #646464. Placeholder 'Search best image models or
Full-bleed linear-gradient(135deg, #ff6bfc 0%, #ea2804 50%, #f6f47f 100%) background. Overlaid with a faint dot-grid texture (rgb(0,0,0) dots at ~8% opacity, 16px spacing) to give the gradient tactile grain. Headline: RB Freigeist Neue 128px weight 600, #ffffff, line-height 1.0, letter-spacing -3.2px. Subtext: Basier Square 18px weight 400 #ffffff at ~85% opacity. CTA: Primary Action Button (Filled Black) with no color change — the black creates a hard focal point against the warm wash.
Outer container has a 4–6px padding filled with the sunset gradient. Inner container is Bone White with 32–48px internal padding and 0px radius. Used to magnetize the eye toward a specific section without darkening the page.
Two horizontal rows of circular avatars (40–48px diameter) connected by a dotted #d9d9d9 1px line that threads through each circle's vertical center. Avatars are images clipped to a circle; no border, no shadow. Creates a constellation effect that reads as 'network' without explicit labels.
Inline list of plain text labels in Basier Square 12px weight 600. Active tab: text #202020 with a 2px #202020 bottom underline, 4px padding-bottom. Inactive: text #646464, no underline. 16px horizontal gap between tabs. Sits flush-left at the top of the code area inside the Code Editor Card.
Basier Square 12px weight 600 #646464, prefixed with a small numerical value (e.g. '219.5k runs'). Inline, right-aligned within the model card footer row.
#ffffffDefault page background
#ffffffModel cards, code editor, content tiles — same as canvas but with 1px Smoke border
#f9f9f9Subtle tier for model tile backgrounds behind thumbnails
#fefce9Warm-tinted callout/editor interior — echoes the gradient's yellow stop
The system is essentially flat. No drop shadows on cards, tiles, or modals. Elevation is expressed through a single warm-tinted shadow rgb(228, 199, 103) 0px 1px 2px 0px applied to rare code/terminal blocks, and through 1px Smoke (#d9d9d9) hairline borders elsewhere. Cards float on the same Bone White as the canvas — only their border separates them.
Page model is max-width 1200px centered with full-bleed gradient sections at the top and bottom. The hero is a single full-viewport gradient banner with a left-aligned headline stack and a side-by-side code-editor + model-output preview below the fold. Sections below alternate between white and white-with-gradient-border frames at 64px vertical gaps. Model grids are 3-column on desktop, 2-column on tablet, 1-column on mobile, with cards stacking image-left and text-right. The community avatar strip spans the full content width as a single decorative band. Navigation is a 64px sticky top bar with logo left, search center, links + CTA right. Density is compact but breathable: model cards have 16px padding and 24px gap, never crowding.
Imagery is functional and code-centric rather than decorative. Model thumbnails fill the left half of every card — raw output crops at full saturation, no rounded corners, no overlay treatment. Avatars are circle-clipped portraits at 40–48px. The hero uses an abstract warm gradient with a faint black dot-grid texture rather than a photograph. There is no lifestyle photography, no product hero shot, no marketing illustration — the code snippet and model output images ARE the visual content. Icon style is minimal: thin 1.5px stroke, monochrome Ink or white on the gradient, no filled icons except the brand mark's three arcs.
Quick Color Reference\n- text: #202020\n- background: #ffffff\n- border: #d9d9d9\n- accent: #ea2804 (gradient ember only — not for buttons)\n- primary action: no distinct CTA color
A single canonical gradient carries the brand: linear-gradient(135deg, #ff6bfc 0%, #ea2804 50%, #f6f47f 100%). It appears in four contexts only: (1) full-bleed hero background, (2) 4–6px section border frames, (3) logo mark dot/accent, (4) subtle decorative washes. A secondary fade variant — linear-gradient(180deg, rgba(234,40,4,0.5), #ffffff) — is used for top-edge gradient transitions into white sections. Never rotate, skew, or split the gradient. Never replicate the three stops as separate solid colors in other components — they exist only as a sequence.
Same developer-first product browse with a 3-column model card grid, white canvas, and a single warm yellow emoji/icon accent — though Replicate swaps yellow for the magenta-ember-gold gradient.
Shared high-contrast black-on-white interface, monospaced code snippets inline with marketing, and near-identical minimal top nav with logo + search + filled black CTA.
Same two-typeface strategy (one geometric display face + one tight-tracking UI sans), pill-shaped tags and buttons everywhere, and flat surfaces with hairline borders instead of drop shadows.
Same approach of a vivid full-bleed gradient hero over a max-width white content stack, with display headlines that almost touch at 1.0 line-height.
Similar warm-editorial-meets-technical posture: large display headlines, tight letter-spacing, and a single warm accent color used sparingly against a near-white canvas.
Use the design exports or connect Musterlab to your AI.
