activepieces.com

Activepieces opens on a painted sky. The whole first viewport is an illustration — a #45adf5 azure gradient thinning toward the horizon, soft cumulus clouds rendered like gouache, and a rolling green hillside along the bottom edge — with the entire page's chrome floating on top of it. The header is not a bar but a capsule: a translucent pale-blue lozenge (#b7defa, 24px radius) inset from the top and both sides, carrying the black activepieces wordmark, five chevroned nav items, a white outlined "Talk to sales" pill and a solid black "Start building" pill. The headline is Sentient at 72px/73 weight 700 in a near-black navy (#042d48) — "AI Agents with enterprise control" — over an Inter subline at 24px/32 in the same ink, both centered. The primary CTA is the page's best idea: a deep ocean-blue pill reading "Use in your AI" with a stack of three overlapping circular app avatars (ChatGPT, Claude, a third) tucked inside the button itself, so the integration promise is made by the control rather than by a logo row. The customer logos underneath sit in the weather — SAP and the rest are drawn at illustration depth with clouds passing in front of them, half-occluded on purpose. Then the product window rises from the bottom of the sky, cropped by the fold: a white app shell at a 16px radius with a left rail (Chat, Agents, Flows, Runs), a search field, an "All teams" select, a "23 agents" count and a black "New agent" pill, populated with pixel-art robot avatars. Below the fold the illustration stops dead and the page turns to flat #fdfdfd for the remaining 16,000px. There the voice is editorial: enormous Sentient pull quotes set in two tones — the first clause in #0f1722, the qualifying clause dropped to slate #41546a, so the sentence emphasizes itself without italics or a highlight — over three descending attribution lines (name in bold Inter, role, then a gray company descriptor like "AI-powered health insurance, 700 employees"). Stat trios sit between full-height hairlines with serif numerals that use real typographic glyphs (¼ year beside 100+ and 500+). And a hairline CTA card — 24px radius, 1px border, no shadow, serif heading left, two pills right — recurs every few sections as punctuation rather than appearing once at the end. Warm, plainspoken, and unusually calm for an enterprise AI pitch.

Split the page in two. Make the first viewport a painted illustration — an azure sky gradient from #45adf5 down through #8ecbf3 to a pale horizon, gouache-style cumulus clouds, and a #a5eacb green hillside along the bottom — then make every section after it flat #fdfdfd with nothing but hairlines. Set display type in a high-contrast serif (Sentient; substitutes Signifier, Freight Display, Georgia) at 64–80px, weight 700, line-height 1.015, tracking normal, in a near-black navy #042d48, always centered in the hero. Everything else is Inter: sublines 24px/32 weight 400, body 16px/24, labels 15px weight 500, fine print 13px in gray. One accent does the work — sky blue #5bb6f6 for the illustration and the mark, its deep sibling #007093 for every primary button fill — with black reserved for the header's CTA and customer wordmarks. Buttons are full pills (9999px) at ~46px: solid deep blue with white text, or white with a 1px hairline. Put a small horizontal stack of overlapping circular partner or app avatars inside the primary button rather than in a separate row. Float the header as a translucent capsule inset from the top and sides (24px radius, a ~70% pale-blue fill) so the artwork passes behind it. Radii elsewhere: 12px as the workhorse, 16px for product windows, 24px for the big content cards, 8px for chips. No shadows and no gradients on UI — the only gradient is the sky. Draw customer logos into the illustration at scene depth and let a cloud crop one or two of them. Let the product screenshot rise out of the bottom of the hero and be clipped by the fold; show honest in-app density (a labeled left rail, a search field, a filter select, a count) rather than a simplified render. For social proof, set one sentence as a 40px serif quote split in two tones — lead clause in #0f1722, qualifying clause in #41546a — above the customer's black wordmark and three descending attribution lines ending in a one-line description of the company. Break long stretches with a three-cell stat row separated by full-height 1px rules, serif numerals, Inter labels, and real typographic glyphs for fractions. Repeat a single hairline CTA card — 24px radius, 1px border, no shadow, serif heading and two lines of body left, solid plus outlined pill right — every few sections instead of saving one for the end. Keep the copy short, concrete and time-bound ("Your first flow can ship this afternoon", "no card to begin").