Design tools

Our master Figma file is the starting point for every HTML email. It contains the full component catalogue—headers, hero banners, feature rows, buttons, and footers. These match exactly what's in code, including the colour, typography and elevation tokens compiled by Tailwind.

As a shared library, updates to tokens or components push automatically to designers’ canvases once approved. This ensures consistent branding across all work.

Built with Auto Layout

All components use Auto Layout, so spacing, stacking, and responsiveness are built in. When content changes—like adjusting text length or resizing cards—the layout flexes as it will in the inbox. Auto-nested frames allow horizontal and vertical stacking, which is essential for responsive designs that shift from two columns to one on mobile.

Streamlined state management

Figma's Variants feature manages all interactive states—default, hover, focus and disabled—within a single component. Designers can toggle states easily via the right-hand panel. The naming system mirrors our email framework's class suffixes, reducing friction at handover.

Accessibility and visual consistency

Colour and text styles are defined as tokens, not ad hoc hex values. Using these tokens triggers Figma's Contrast Checker, which shows WCAG 2.2 AA and AAA results in real time. It also previews common types of colour-blindness, helping us address accessibility issues early.

Version control for design discipline

Because the file is version-controlled, designers can branch for experiments, request reviews, and merge into the main library once changes are approved. By the time a layout is signed off, component names and token slugs already match the Tailwind classes, making development as simple as copying, pasting, and tweaking content.