Praise — What designers say when the canvas answers back

Summary

An editorial TESTIMONIAL CAROUSEL on a warm cream paper page for an AI product design agent ('Praise'). One quote is shown at a time, centered and large: a soft burgundy quote-mark glyph, an oversized light-weight Fraunces serif blockquote, then a gradient monogram avatar (initials) ringed in cream above the maker's name + role. Slides cross-fade with a gentle rise (opacity + 14px translateY), driven by circular prev/next arrows and a row of dot indicators where the active dot stretches into a burgundy pill; it auto-advances every 6.5s and also responds to arrow keys. The carousel is embedded live in a real one-page site: a sticky cream/blur nav (a burgundy quote-mark logo tile + 'Praise.' wordmark + Voices/Proof/How-it-works links + an ink 'Start designing' pill), a centered hero (an eyebrow pill 'From the people who ship with us' + a big two-line serif headline 'What designers say when the canvas answers back' with 'answers back' in burgundy italic + a sub), the carousel section, a full-bleed dark-ink stats strip (57k+ / <60s / 4.9/5), a 'Three steps, one canvas' how-it-works card trio, a full-bleed burgundy CTA, and a footer. Everything reflows cleanly to a single centered column on mobile.

Style

Warm, editorial, premium-print aesthetic. Surfaces are a cream paper (#faf6ef page over #f3ecdf 'cream-2' cards), text is a warm near-black ink (#1c1815) with a softer brown 'ink-soft' (#4a423b) for body/secondary, and a single deep burgundy accent (#7b2d3b, with a darker burgundy-deep #5e1f2b for gradient stops) carries the logo tile, the eyebrow, the italic headline word, the quote mark, the avatar gradients, the active dot, and the full-bleed CTA. Two full-bleed bands invert the palette: a dark ink (#1c1815) stats strip with cream text and burgundy '+/s//5' accents, and a solid burgundy CTA band with cream text. Typography is the signature: Fraunces (a soft-optical serif, font-variation-settings 'SOFT' 40 'WONK' 0) for all display/headlines/blockquotes/numerals at a light 300 weight with tight tracking, paired with Inter (400/500/600) for nav, body, labels, and meta. Depth is soft and quiet: a faint radial-dot 'grain' texture (radial-gradient(rgba(28,24,21,0.035) 1px, transparent 1px) at 4px tiles) sits behind the cream sections, the avatar carries a soft shadow + a 4px cream ring, and borders are ink/10 hairlines. Motion is gentle and slow: slides cross-fade over .6s on a cubic-bezier(.22,.61,.36,1) ease while rising 14px, the active dot animates its width to 28px over .35s, nav links grow a 1px burgundy underline on hover, and control buttons lift translateY(-2px) on hover. Corners are pill-round on chrome (rounded-full nav pills, arrows, dots, avatar) and rounded-2xl on the how-it-works cards. Selection is burgundy-on-cream.

Layout & Structure

A single-quote-at-a-time testimonial carousel as the centerpiece of a one-page site, everything centered. Order top to bottom: a sticky cream/blur nav, a centered hero (eyebrow pill + big two-line serif headline + sub), THE carousel section (centered slides that cross-fade, with circular prev/next arrows + a dot/pill indicator row below), a full-bleed dark-ink 3-up stats strip, a 'Three steps, one canvas' how-it-works card trio, a full-bleed burgundy CTA band, and a footer. Content sits in centered max-w columns (max-w-6xl for the chrome/stats/how, max-w-4xl for the carousel + CTA) with px-6 md:px-10 gutters. On mobile the nav center links hide (the logo + 'Start designing' pill persist), the headline drops its line-break, the stats and steps stack to one column, and the footer goes column.

Sticky nav

Hero

Carousel (the anchor)

Stats strip (full-bleed dark)

How it works

CTA + footer

Special Notes

The whole point is an EDITORIAL TESTIMONIAL CAROUSEL in a warm premium-print idiom: a cream paper page (#faf6ef over #f3ecdf cards), warm near-black ink text (#1c1815) with a soft-brown ink-soft (#4a423b) for body, and a single deep-burgundy accent (#7b2d3b, darker burgundy-deep #5e1f2b for gradient stops) reserved for intent: the logo tile, the eyebrow, the italic headline word, the quote mark, the avatar gradients, the active dot, and the full-bleed CTA. The carousel shows ONE quote at a time, centered and large, cross-fading with a gentle 14px rise; wayfinding is circular prev/next arrows + a dot row whose active dot stretches into a 28px burgundy pill, and it auto-advances every 6.5s + responds to arrow keys. Two full-bleed bands invert the palette (a dark-ink stats strip, a burgundy CTA) to punctuate the otherwise quiet cream rhythm. Typography is the signature: Fraunces (a soft-optical serif, 'SOFT' 40 'WONK' 0) at a LIGHT 300 weight carries every display element while Inter (400/500/600) carries nav/body/labels. Depth stays soft and quiet, never hard: a faint 4px radial-dot 'grain' texture behind the cream sections, a ring-4 cream + soft shadow on the gradient avatars, ink/10 hairline borders, and slow .35-.6s cubic-bezier(.22,.61,.36,1) motion (the slide cross-fade, the dot-to-pill width, the nav underline, the control-button lift). Chrome corners are pill-round (logo, nav pills, arrows, dots, avatar); the how-it-works cards are rounded-2xl. Icons are inline SVG only (a custom double-quote-mark glyph + stroked caret/arrow icons). Built with Tailwind (CDN) using a custom theme (cream / cream-2 / ink / ink-soft / burgundy / burgundy-deep tokens + Fraunces/Inter families), with the .slide/.dot motion, the .grain texture, the .nav-link underline, and the .ctrl-btn hover defined in a small <style> block and a ~30-line vanilla-JS carousel engine.