# validata.so

Source: https://validata.so/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, bento, calm, trustworthy, technical, confident, premium
Colors: #f9f9f9, #d1d0d3, #8d8c91, #b0afb3, #0a0a11, #706f74, #47464d, #f7cbb6
Type (h1): Geist · 56px/64px · 400 · tracking -0.56px — "You used forms before. Now use insight."
Type (h2): Geist · 36px/42px · 400 · tracking -0.36px — "Ask anywhere, get insights in one place"
Type (h3): Geist · 20px/28px · 500 · tracking -0.1px — "On your website"
Type (body): Inter · 20px/32px · 400 — "The AI survey platform that writes like a specialist, and analyzes like a team o"
Type (button): sans-serif · 12px/normal · 400 — "Join beta"
Button (primary): "Join beta" — fill #060510, text #ffffff, radius 9999px, border 0px, padding 10px 16px, height 40px, type 12px/400
Button (secondary): "Product" — text #4c4c5c, radius 999px, border 0px, padding 6px 16px, height 40px, type 12px/400
Radii: 8.11px (9), 999px (7), 10px (6), 24px (4), 9.73px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/validata-so/hero.webp?v=71ca0de5
- Page crop (mid-1): https://media.lvly.design/library/validata-so/mid-1.webp?v=11d47639
- Page crop (mid-2): https://media.lvly.design/library/validata-so/mid-2.webp?v=e3f0f8b8
- Hero (mobile): https://media.lvly.design/library/validata-so/mobile-hero.webp?v=867d7a21
- Full page (desktop): https://media.lvly.design/library/validata-so/full.jpg?v=0c3626ee
- Full page (mobile): https://media.lvly.design/library/validata-so/mobile-full.jpg?v=dcfa0e2d
- Clip preview (mp4): https://media.lvly.design/library/validata-so/video-khsanz.preview.mp4?v=2e01375c

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.

## Steal-worthy details

- Hero subline highlights: the two claims ("specialist", "team of data analysts") are set in color on a matching pale tint pill — blue text on blue-tinted ground, orange on peach — so emphasis is a highlighter stroke rather than a bold weight.
- Page column bounded by full-height hairlines with small "+" corner ticks where section rules cross them, giving a blueprint / graph-paper structure without any visible grid.
- Split-tone feature copy: the right-hand paragraph alternates muted gray and near-black spans ("Send surveys across **channels**, track **engagement in real time**") so the nouns carry the sentence.
- Bento feature cards numbered with a monospace badge ("2.1", "2.2") in the top-left, headline underlined with a hairline rather than weighted, and a UI mock that bleeds off the bottom edge under a soft gradient wash.
- App frame directly under the hero at full column width, with a three-step segmented control (Create · Collect · Validate) and a token meter in the top bar — the product shown as a real working surface, not a floating screenshot.
- Primary CTA pill carries a circular chevron button inside its right end, and the nav CTA reuses the same pill at 40px so the two read as one component.
- Eyebrow pills per section in a single soft lilac with a sparkle glyph; status chips in the response table use mint fill + green check, the only saturated greens on the page.
- Radii ladder is deliberate: 8–10px on inner UI controls, 24px on the bento cards, 999px on every pill.

## Style recipe

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.