# chatprd.ai

Source: https://www.chatprd.ai/
Captured: 2026-09-20
Tags: saas, landing, light, both, editorial, minimal, warm, confident, elegant, trustworthy
Colors: #fdfcfe, #e5ceda, #afaeaf, #8e8e8f, #fba8a9, #707070, #e283cb, #fa7665
Type (h1): seasonMix · 86.4px/82.08px · 400 · tracking -2.16px — "The AI product manager for your entire team"
Type (h2): -apple-system · 15px/22.5px · 700 — "Overview"
Type (h3): seasonMix · 22.4px/26.88px · 400 · tracking -0.56px — "LaunchDarkly's PM team ships 2x faster with ChatPRD"
Type (body): -apple-system · 20px/32.5px · 400 — "Turn ideas into clear requirements, coach your team to ship better products, and"
Type (small): -apple-system · 13px/19.5px · 600 — "Start free"
Type (button): -apple-system · 16px/24px · 600 — "Start building free"
Button: "Start building free" — fill #ffffff, text #000620, radius 9999px, border 0px, padding 16px 32px, height 56px, type 16px/600
Radii: 9999px (28), 16px (27), 12px (19), 8px (10), 6px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/chatprd-ai/hero.webp?v=140ff05e
- Page crop (mid-1): https://media.lvly.design/library/chatprd-ai/mid-1.webp?v=87de2a45
- Page crop (mid-2): https://media.lvly.design/library/chatprd-ai/mid-2.webp?v=cc94722d
- Hero (mobile): https://media.lvly.design/library/chatprd-ai/mobile-hero.webp?v=830d1433
- Full page (desktop): https://media.lvly.design/library/chatprd-ai/full.jpg?v=e7b74a0c
- Full page (mobile): https://media.lvly.design/library/chatprd-ai/mobile-full.jpg?v=2f20ba55
- Clip preview (mp4): https://media.lvly.design/library/chatprd-ai/video-lt6mi9.preview.mp4?v=dfc8ef40

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.

## Steal-worthy details

- The headline changes color mid-sentence, not by line: "The AI product" stays near-black and "for your entire team" runs a coral to pink to lilac gradient, so the break lands inside a phrase and the eye finishes the sentence chasing the color.
- Display serif at 86.4px with 82.08px line height — leading *below* the font size (0.95) — and -2.16px tracking, at weight 400 only. The size does the work, so nothing is bolded and the three lines read as one shape.
- The two hero buttons are geometrically identical and differ only in fill: both 56px pills, 16px/32px padding, 16px/600 label. Primary is the gradient with a trailing arrow, secondary is white with a hairline border. Hierarchy from fill alone, never from size.
- Announcement row above the headline: a coral uppercase NEW chip welded to gray sentence text and a small arrow, all inside one soft pill — a banner that costs one line and no bar.
- Proof row of four stats with no cards, no dividers and no icons: figure in the display serif, label beneath in ~11px uppercase gray with wide tracking. Whitespace is the only separator.
- Section eyebrows are numbered: a gray two-digit index, a short horizontal rule, then the label in coral uppercase with wide tracking ("03 —— INTEGRATIONS"). It gives a long page a table of contents without a sidebar.
- Case-study cards split horizontally at the fold line: white top half carrying the logo, a serif claim and a coral metric; saturated lilac or orange bottom half carrying the quote in white above a hairline attribution row. One card, two grounds, one 16px radius.
- Product screenshots are drawn as real UI, not illustration: a scorecard with a labeled green progress bar, a small "Great" pill and an 8/10 where the 8 is display-sized and the /10 is subscript-small.

## Style recipe

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.