The Dispatch — Deep-Teal Newsletter Capture CTA
A deep-teal, Inter-set newsletter capture CTA (newsletter simple left): a two-column section with a value headline on the left and an inline email field + Subscribe button, privacy line, and avatar social proof on the right, anchored by a sticky nav, an eyebrow context band, and a footer.
Summary
A full-width newsletter capture CTA section ('newsletter simple left') anchored inside a real marketing page: deep-teal brand accent on a near-white slate canvas, Inter typeface throughout. Left column carries the value proposition headline + supporting line; right column carries an inline email field + Subscribe button, a privacy/trust line, and a light avatar-stack social-proof row. A sticky translucent nav sits on top and an eyebrow-badged context band ('The dispatch') above the CTA makes it read as a page section rather than a floating card.
Style
Modern SaaS / dev-tool editorial aesthetic: restrained slate-ink neutrals with a single saturated deep-teal accent (#0f766e), Inter at extrabold weights for headlines, generous whitespace, soft shadows, large rounded corners (rounded-xl / 0.75rem), and subtle atmospheric touches (radial dot-grid + a blurred teal glow) instead of heavy gradients. Antialiased text, tight tracking on headings.
Layout & Structure
Three stacked full-bleed bands inside a centered max-w-6xl container (px-6): (1) a sticky top nav, (2) a centered context band introducing the newsletter, (3) the CTA section itself as a two-column grid that reflows to one column on mobile, then a slim footer band. The CTA is the anchor; the bands above/below give it page context.
Sticky nav
Context band (eyebrow + headline)
CTA two-column grid
Footer band
Special Notes
Icons are Iconify Phosphor (ph:sparkle-fill, ph:envelope-simple, ph:envelope-simple-bold, ph:arrow-right-bold, ph:lock-simple). The single deep-teal accent doing all the work against a quiet slate-neutral page is the core of the look — do not introduce a second accent hue. The CTA is intentionally framed by a nav, an eyebrow context band, and a footer so it reads as a section of a living page, not an isolated card; keep that framing when transferring the style. Atmosphere (dot-grid + one blurred teal glow + the top gradient hairline) lives only on the CTA section. All copy uses no em-dashes.