chatprd.ai

A near-white page (#fdfcfe over ~92% of the pixels) that spends all of its color on two things: one oversized editorial serif and one coral-to-lilac gradient. The hero sets an 86px display face at 82px leading with -2.16px tracking, so three lines compress into a single typographic block, and the sentence changes color mid-phrase — the first half near-black, the last four words running coral (#fa7665) into pink into lilac (#e283cb). Everything under it is quiet by comparison: system-font body at 20px/32.5px in gray, a four-column stat row with no dividers, a pale lavender wash bleeding in from the top-right corner. Further down the page the same restraint holds — numbered eyebrow labels, hairline-bordered white cards on 16px radii, product mocks rendered as real UI rather than illustrations — and the gradient reappears only where the page wants a decision: the primary pill, a stat figure, a section label. The one place the palette breaks loose is the case-study cards, whose lower halves flood with saturated lilac or orange and carry their quotes in white. It works because the serif buys the page its personality up front, which lets every other surface be plain, and because the gradient is rationed hard enough to still read as a signal.

Build on near-white, not white: page ground #fdfcfe, cards and panels pure #ffffff so raised surfaces read by a half-step rather than by shadow. Ink is near-black #000620; secondary text a true gray (#707070), tertiary #8e8e8f. Pick one gradient and make it the entire brand: coral #fa7665 → pink #fba8a9 → lilac #e283cb, running roughly 100deg left to right. Wash the top-right corner of the first screen with a 4–6% lilac radial so the page has warmth before any element appears.

Set headlines in a high-contrast editorial serif at 80–88px, weight 400, line height 0.95 (leading under the font size), tracking -0.025em. Never bold a headline — scale is the emphasis. Body is the system stack at 20px/1.6 in gray; small labels 13px/600; eyebrow labels 11–13px uppercase with 0.12em tracking. Keep exactly one typeface pairing: serif for anything display, system sans for everything else, including every button.

Ration the gradient. It may appear on: the last clause of the hero headline (break mid-sentence, never at a line end), the single primary CTA, one stat figure per section, and nothing else. Every secondary action is white with a 1px border at 8–10% ink.

Radii come in two sizes and one exception: 16px for cards and panels, 12px for inner tiles and mock chrome, 9999px for every button, chip and badge. Buttons are 56px tall with 16px/32px padding, label 16px/600, and a trailing → on the primary. Borders are 1px hairlines at low-opacity ink; shadows are either absent or a single wide, very soft ambient layer — no stacked elevation.

Rhythm: 140–180px between sections, 24–32px gutters inside cards, 12-column grid with content capped near 1200px and the hero capped tighter (~700px) so the headline wraps to three lines. Open each section with a numbered eyebrow — two-digit index, 40px rule, uppercase accent label — then a two-line serif heading, then a gray paragraph, then the artifact.

Two moves make it recognizable: the color break inside a sentence, and the split card whose bottom half floods with a saturated tint (lilac #b98ef0, orange #f47b52) and carries white text over a white hairline. Use flooded panels sparingly — one pair per page. Motion is restrained: 150–200ms ease-out fades and 8px rises on scroll entry, and a gradient that shifts its angle slightly on button hover. No parallax, no counters, no illustration.