We started with the product. Three surfaces — the inbox-style queue, the operations calendar, the invoice review — were rebuilt in isolation so the design language had to prove itself under real workload before it reached the marketing site. The result was a visual system that had already been stress-tested before the first home-page hero rendered.
The marketing site leads with the product, not a hero illustration. Long inline screenshots of the reworked surfaces, mono footnotes calling out specific interactions, and a pricing page that reads like a product-change log instead of a tier matrix.
Engineering-wise, we adopted a component-per-surface pattern that reads closely to the Figma file — a deliberate choice to reduce the design-to-code translation tax and let the same person fix a bug at either end.