Metric-Led Teal Trust Hero — "Design UI at the Speed of a Prompt"

Summary

A metric-led, trust-forward SaaS landing hero in a deep teal palette. A dark teal radial+linear gradient hero (ink #042f2e to canvas #f8fafc) with a faint white grid overlay carries a centered headline 'Design production UI at the speed of a prompt'. A glassy 'New' eyebrow pill, a teal subhead, a dual CTA (solid teal primary + glassy ghost 'watch demo'), a no-credit-card microcopy line, and an inline trust signal (avatar stack +9k and a 4.9 star rating) sit above the fold. A row of three white metric cards (2.4M / 9x / 12k+) overlaps the bottom edge of the hero, each with a teal top-accent bar and a soft elevated shadow. Below, a centered trust headline introduces a six-logo strip in a bordered white card. Inter throughout; Phosphor icons via Iconify.

Style

Trust-forward SaaS marketing style built on a deep, premium teal gradient. The hero ground is near-black teal (#042f2e) blending up through teal mid-tones into the off-white canvas (#f8fafc) at the fold, lit by two soft radial teal glows and overlaid with a faint 56px white grid that is radial-masked so it fades toward the edges. Type is all Inter, very tight tracking, extrabold (800-900) for the headline and section heads, with teal-tinted white body copy at reduced opacity on dark and slate grays on light. Accent system is a single teal scale (workhorse #14b8a6 / #0d9488, deep grounds #042f2e / #134e4a, soft tints #99f6e4 / #ccfbf1 / #f0fdfa). Surfaces are glassy on the dark hero (translucent white fills, white-15% hairline borders, backdrop blur) and crisp white with slate-200 borders and soft teal-tinted drop shadows on the light section. Mood is confident, clean, conversion-optimized, premium; never flat or generic.

Layout & Structure

Single-column centered landing flow, content capped at max-w-6xl (nav, hero text, trust section) and max-w-5xl for the overlapping stat row, with px-6 gutters. Top-down: a sticky blurred nav bar (64px, dark teal translucent) with logo + center links + sign-in/start-free buttons; a tall centered hero section (deep teal gradient + grid overlay) holding an eyebrow pill, headline, subhead, dual CTA, microcopy and an inline avatar+rating trust signal, with generous bottom padding; a three-up white metric-card row pulled up with negative margin so it overlaps the bottom of the hero; and a centered trust section (heading + subcopy) above a bordered white card containing a responsive six-logo strip. Responsive: nav center links hide below md and the sign-in button below sm; the headline drops from 6xl to 42px and removes its forced line break on small screens; the CTA stack goes column on mobile, row on sm+; the stat row goes 1 col to 3 cols at sm; the logo strip goes 2 cols to 3 cols at sm to 6 cols at lg.

Sticky nav

Hero

Stat cards (overlapping)

Trust line + logo strip

Special Notes

Font: Inter only (Google Fonts, weights 400/500/600/700/800/900), used for everything with tight tracking; headline and section heads are extrabold (800-900). Styled with Tailwind via CDN using a custom theme palette (ink #0f172a, slate2 #334155, slate3 #64748b, teal 50 #f0fdfa / 100 #ccfbf1 / 200 #99f6e4 / 500 #14b8a6 / 600 #0d9488 / 700 #0f766e / 800 #115e59 / 900 #134e4a / 950 #042f2e, canvas #f8fafc). Icons via Iconify (ph:* / Phosphor). html has scroll-behavior:smooth; body background is the canvas #f8fafc with antialiased font smoothing. The signature moves are the deep-teal hero gradient that dissolves into the light canvas at the fold, the radial-masked white grid overlay, and the three white metric cards that overlap the hero edge with their teal top-accent bars; keep the palette a single teal scale, never introduce a second hue.