validata.so

Validata is a Framer-built AI survey platform landing page in the quiet, near-monochrome register of the current premium-SaaS wave: a warm off-white ground (#faf9f9), a 56px Geist display at weight 400 with -0.56px tracking, 20px Inter body at a generous 32px line-height, and an ink-black pill "Join beta" as the single hard accent. Color arrives only as data — the two key phrases in the hero subline sit on pale blue and peach highlighter tints, feature-section eyebrows are lilac pills, table status chips are mint — so the page reads as a document annotated by a careful analyst rather than a marketing site. Below the hero, the product is shown as a full-width app frame with a segmented Create · Collect · Validate stepper, and each feature block is a two-up bento of soft-cornered cards numbered in a monospace "2.1 / 2.2" scheme, with washed-out, desaturated UI mocks fading in from the card floor. Hairline dividers with tiny corner ticks bound the page column, a nod to a drafting sheet.

Build on a warm off-white page (#faf9f9) with white (#ffffff) cards; use ink (#060510) for display type, primary buttons and the logo, and a four-step gray ramp (#47464d, #706f74, #8d8c91, #d1d0d3) for body, secondary copy, placeholders and hairlines. Set headlines in Geist at weight 400, 56px / 64px, tracking -0.01em, breaking into two short lines; body in Inter 20px / 32px, weight 400; section eyebrows 13px in a lilac pill (#ede9fe ground, #6d28d9 text) with a small glyph. Add color only as annotation: highlight key phrases with coloured text on a matching 10%-tint pill (blue #2563eb on #dbeafe, orange #ea580c on #f7cbb6), and use mint (#dcfce7 / #16a34a) exclusively for success states. Primary button is a 40px ink pill with 12–14px white text and, on the hero variant, a trailing 24px circular chevron; secondary controls are 8–10px-radius white fields with hairline borders. Compose features as two-up bento cards at 24px radius with a 1px border, a monospace index badge ("1.1") top-left, an underlined 20px heading, muted supporting line, and a desaturated product mock that fades out at the card's bottom edge via a linear-gradient mask. Frame the content column with two full-height 1px lines and mark every horizontal rule crossing with a 6px "+" tick. Shadows are near-absent; depth comes from tonal layering and the bleed-off mocks. Keep motion to gentle fade-ups on scroll.