Formspree

Before development began, Monogram established the visual language in Figma. Typography, spacing, color, and the illustration system were designed together as a coherent set of rules.

The illustration system had to solve for a simple fact: a form submission, an inbox save, a sent notification, none of it was something a visitor could see. Monogram's answer was a set of illustrations depicting forms, inboxes, and notifications, built specifically to stand in for those steps. These illustrations became the visual backbone of the site, from the tilted form card in the hero to the step-by-step section further down the homepage.

The site's block library drew directly from that same system, so every new block uses the same palette, type scale, and illustration style already established in design. A new page or a new block doesn't require a fresh round of design exploration; it pulls from rules that already exist, which keeps the site visually consistent as it grows.

The same illustration system reappears in motion, animated this time to show what Formspree actually does, since a submission's journey to an inbox usually happens out of sight.

The homepage hero reads as a small narrative. On load, a contact form card sits skewed to one side, isometric and unresolved. As the visitor scrolls, the card straightens out and settles into place, one step in a sequence that keeps unfolding further down the page. The animation is driven entirely by the browser's native scroll timeline, a CSS scroll-linked animation tied to the element's position in the viewport. It tracks scroll position exactly instead of lagging behind it, and it runs without a JavaScript library. It resolves as the visitor scrolls further, from an unfinished piece of code to a section laying out what Formspree handles in its place.

Further down the page, the submission lifecycle runs as a loop of three isometric cards. A form is submitted, the submission is saved to an inbox, a notification is sent, and the loop repeats. It's shown as an ongoing cycle rather than a single sequence, because that's closer to how the product actually behaves. There's no start or end state, just a pipeline running continuously.

None of this motion runs on a JavaScript library, which means it can respect a visitor's reduced-motion setting directly. Monogram designed a full reduced-motion state rather than simply disabling the animation, so a visitor who asks for less movement still gets a complete, composed layout instead of an empty frame.

Formspree's audience is developers, and developers notice when a marketing site ships a heavy client-side bundle to explain a product built around simplicity. The site needed to feel as lean as the product it sells. That meant HTML first, JavaScript only where it earns its place, and delivery straight from Cloudflare's network.

Monogram built the site in Astro and deployed it on Cloudflare Workers, so every page is prerendered at build time and served as HTML from the edge. The public site ships as Astro components, CSS, and small scoped scripts. Most of the page's motion runs on CSS rather than JavaScript, and what JavaScript does exist loads on demand. The footer's physics simulation is the clearest example. It loads its library only once that section scrolls into view, then pauses itself once the visitor scrolls away. Video waits for a click before loading, and images come out of Sanity as sized WebP files.

A Worker sits in front of the Formspree site and decides per request what to serve. HTML goes to a browser, markdown goes to an AI agent, both at the same URL. This is a content negotiation layer built directly into the Cloudflare Worker handling the site's requests.

AI tools increasingly read and summarize product sites on a developer's behalf. Serving a clean markdown version of the same content, rather than forcing an agent to parse rendered HTML, CSS, and JavaScript, makes Formspree's site easier for those tools to retrieve and cite accurately.

The underlying system is a shared architecture rather than a set of one-off layouts. Every page built on it follows the same structure, one required hero followed by a body made of any combination of blocks. Only one hero type exists today, but the slot is designed to hold more. When Formspree needs a second hero, it gets added to that same slot and the page structure carries on unchanged. Future pages can be built on this same system without new engineering work.

The body is where the flexibility lives. It's an array of eight block types, including feature rows, form steps, card grids, accordions, testimonials, logo rows, logo columns, and video sections. Editors can reorder, remove, and duplicate them freely, and because every layout is assembled from the same set of parts, any combination stays inside the design system Monogram built in Figma.

Navigation, footer, and site settings live outside any single page, as global singleton documents edited once and reflected everywhere. FAQs are standalone documents too, referenced into accordion blocks wherever they're needed, so the same question and answer can appear on multiple pages without being retyped or falling out of sync.

This architecture lets Formspree's marketing team build new pages, reorder sections, and update FAQs without engineering involvement, while keeping every page consistent with the design system by construction rather than by review.

For Formspree, Monogram delivered a Figma design system that drives every block on the site. A motion system built on native CSS scroll timelines, with a designed reduced-motion counterpart rather than a disabled one. An Astro site on Cloudflare Workers that sends plain HTML and CSS to the browser, loading scripts like the footer's physics simulation only on demand. A separate Worker layer that serves markdown to AI agents from the same URLs the site's pages live at. Finally, a Sanity content architecture, one hero slot, eight body block types, plus global singleton and FAQ documents, built so Formspree's marketing team can extend the site on its own.

The result is a site that's lean, sharp, and fast.