A design system 200+ people create with, and AI follows.
One Figma system for social, web and email: tokens that flip between Light and Dark, components every channel shares, and rules written clearly enough for people and AI tools to follow.
One brand, 200+ people making things with it.
McFadyen Digital has 39 years in digital commerce and 300+ clients. Its marketing runs on many hands: marketers, sales, partner and events teams, each making posts, landing pages, emails and decks, and more and more of it with AI tools.
A brand manual alone couldn’t keep up. People needed pieces they could pick up without breaking the brand. So I rebuilt it as a system in Figma and Canva: shared tokens, components every channel nests, and written rules for social, web, email and imagery.
A few fixed pieces, nested everywhere.
Logo lockups, one red, two typefaces, Lucide icons and a 24px grid. Every component nests these instead of redrawing them, so a change made once updates social, web and email at the same time.
Each piece reads from Light and Dark variable modes. Flip the switch to see the whole board change the way it does in Figma.
One system, three channels.
A 1080px LinkedIn post, a 1440px landing page and a 600px email look like three different jobs. In the system they are the same pieces: the same Logo, Eyebrow, Headline style and Button, each sized for its medium.
Pick a piece to see every place it lives.
Build a McFadyen landing page.
Landing pages are assembled from section components in a fixed order. Nav, hero, CTA band and footer are required; the rest is picked per campaign.
Use the layers panel like you would in Figma: hover a layer to find it on the page, click the eye to add or remove it. Each section shows the rule it follows.
A monochrome world, one red signal.
Every image the team makes is almost colourless, with exactly one element in brand red. The red marks the point of the story: the part that is missing, the product that gets found, the problem the audit spots.
Two sets keep the library coherent: high-key studio daylight for most posts, and a black studio for launches and big numbers.
The same rules, written for Claude.
The system also lives as a DESIGN.md file. Claude Code reads it through the skills I write for each team, so a post, a landing page or an email made with AI follows the same rules a designer would. I keep the file in step with the Figma library.
One source for people and AI.
The system is now where the brand lives: the Figma library, the Canva kits the wider team uses, and the DESIGN.md file AI tools read. The AI Commerce Audit campaign was built on it, from the social posts to the landing page and emails.
