Validar — Forms that catch mistakes before they cost you
A teal-on-paper SaaS landing page for an inline form-validation tool: a sticky glass nav, a split hero with a live account-creation card showing all four field states (idle, active, valid, error) at once, a four-up state-model band, a dark-teal 'submit unlocks itself' section, a benefit grid, and a footer. Color + icon + plain-words validation, Inter, soft layered shadows.
Summary
A teal-on-paper SaaS landing page for an inline form-validation product (Validar). The whole page is built to teach and sell one idea: a form field is always in one of four explicit states (idle, active, valid, error), shown in color + icon + plain words. A sticky glass nav sits over a split hero (left copy + stat row, right a live account-creation card demonstrating all states at once), then a four-card state-model band, a full-bleed dark-teal 'submit unlocks itself' section with a completed all-valid card, a why-it-matters benefit grid, and a slim footer. Clean, confident, product-marketing register; rounded geometry, soft layered shadows, a hand-drawn underline accent.
Style
Modern SaaS product-marketing aesthetic in a single teal accent over a near-white paper canvas, dark slate ink for text. Generous whitespace, large extrabold tracking-tight display headings (Inter), rounded-2xl/3xl cards with soft multi-layer shadows, a faint teal dot-grid grain texture, blurred teal radial glows behind cards, and semantic validation colors (green = valid, red = error) used consistently in fills, borders, icons and helper text. Friendly, precise, trustworthy.
Layout & Structure
Single-column scrolling page, content centered in a max-w-6xl container with px-6 gutters. Order: sticky nav, split hero (copy + live form card), four-up state-model band, full-bleed dark-teal demo section with completed card, why-it-matters two-column benefit grid, slim footer. Hero and demo use a two-column (lg) grid that stacks on mobile; the state cards reflow 1→2→4 columns.
Sticky nav
Hero (split)
State-model band
Dark-teal demo band
Why-it-matters grid
Footer
Special Notes
Accessibility is the design thesis: state is never carried by color alone — every state pairs a hue with a matching ph: icon and a plain-language word/helper, and the submit button states are spelled out ('Fix 1 field to continue' vs 'Create account'). Keep the palette monochromatic-teal + neutral, and reserve green/red strictly for valid/error semantics. Reuse the four-state input as the single source of truth; the page narrative (hero card → state cards → demo card) is just that one component shown at different points in its lifecycle. Icons are Phosphor bold (ph:*); body/display font is Inter throughout.