Forma — Emerald Classic SaaS (legibility-fixed)
A classic light-mode SaaS landing page on emerald-and-white with Inter type: sticky blurred nav, a centered hero with a hand-drawn underline accent and an in-app canvas mockup, logo cloud, stat strip, alternating feature rows, a bento testimonial wall, a featured 3-tier pricing table, a dark CTA banner, and a 5-column footer, fully responsive.
Summary
A classic light-mode SaaS marketing landing page for 'Forma', an AI design agent: emerald-on-white palette, Inter type, a sticky blurred nav, a centered hero with a hand-drawn underline accent and an in-app product canvas mockup, a logo cloud, a 4-up stat strip, alternating feature rows plus a 3-card grid, a bento testimonial wall, a 3-tier pricing table with a featured middle plan, a dark rounded CTA banner, and a 5-column footer. Fully responsive with a mobile hamburger menu and column reflow.
Style
Trustworthy, polished, modern-classic SaaS aesthetic: crisp white surfaces, soft layered shadows, generous whitespace, an emerald-green accent system on a cool slate neutral scale, and bold Inter display type. Light mode only; the single dark moment is the CTA banner. Texture comes from a faint slate grid behind hero/testimonials, a dotted grid inside the canvas mockup, and blurred emerald glow blobs.
Layout & Structure
A single full-width marketing page, max-w-6xl centered content with px-5/px-6 gutters. Vertical section order: sticky nav, hero (badge + headline + subcopy + dual CTA + trust line + product mockup) over a tinted grid, logo cloud, stat strip, features (two alternating image/text rows then a 3-card grid), testimonial bento wall, 3-tier pricing, dark CTA banner, 5-column footer. Responsive: desktop multi-column grids collapse to stacked single columns on mobile; the nav switches to a hamburger that toggles a panel; the pricing/feature/footer grids reflow; the stat strip goes 4-up to 2-up.
nav
hero
hero-product-mockup
logo-cloud
stat-strip
features
testimonials
pricing
cta-banner
footer
Special Notes
Light mode only, emerald-on-white; the dark CTA banner is the sole dark surface. Keep all copy WCAG-legible: body in ink-500 #64748b on white, never lighter for paragraph text, and white text only on brand-600/700/ink-900 fills. Maintain the four shadow tokens (soft/card/lift/glow) for depth; the emerald 'glow' shadow is reserved for the logo, primary CTAs and the featured pricing card. Preserve the sticky blurred nav, the hero underline squiggle, the dotted-grid product mockup, and full responsive reflow (hamburger menu, 4-up→2-up stats, multi-column→stacked grids). Use Phosphor (ph:*) icons and Inter only. Strictly avoid generic indigo/violet SaaS slop accents. No em-dashes in any copy.