Replicate. Golden hour API workshop.
- AI
- Light theme
- 11 colors
- 3 typefaces
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.
Replicate design system
Brand1
Hero 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
Accent1
Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
Neutrals9
True black for the logo wordmark, high-contrast icon strokes, and maximum-impact filled buttons when Ink is insufficient
Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Secondary text, metadata, run counts, helper labels. Provides a quiet middle step between Ink and the silver border tones
Avatar ring borders, decorative shadow tint, inactive dividers
Hairline borders on cards, model tiles, and input fields. The primary structural divider color
Subtle surface step (alt card backgrounds, section bands), input field default state
Warm-white off-state surface used for the secondary surface tier (e.g. model card backgrounds behind thumbnails)
Rare warm-tinted surface used inside editor cards and callout blocks — a very subtle nod to the gradient's yellow endpoint
Page canvas, card surfaces, code editor background. The base layer everything sits on
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Carbon on Forest Signal
5.92 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
