Build Canada is a federally incorporated non-profit that publishes evidence-based policy recommendations on housing, productivity, immigration, and trade.
Their memos reach three audiences — voters, influencers, and policymakers — through a distribution chain that starts with social sharing and ends with legislation. Their board and memo authors include the founders and CEOs of Shopify, Cohere, Vidyard, Ada, Neo Financial, Clearco, and dozens of other Canadian companies. The website is their primary distribution platform. Social sharing is the north star metric.
This is not a small blog.
How it started
I volunteered to build a design system for them — a set of color tokens and Tailwind-style palettes they could use for charts. They were working on CanadaSpends.com, a transparency tool that turns raw federal spending data into something citizens can actually navigate.
While I was in the codebase, I noticed their new website had been vibecoded with Claude. It had more features and better organization than the old one. But it had lost something important: the brand.
The typography was wrong. The colors were wrong. The spacing was wrong. The motion was wrong. And the performance was catastrophic — some pages took up to 20 seconds to load.
So I offered to audit it.
The audit
I delivered two presentation decks on March 27, 2026.
The site had a clear brand identity — warm linen backgrounds, Söhne Kraftig headlines, Financier Text body copy, a restrained auburn-and-charcoal palette. The design language was institutional and serious. The mandate was "display slightly excess gravitas."
The vibecoded version broke almost all of it. The hero title used the wrong font, wrong weight, and wrong letter spacing. Body text was too small at 18px. The Exit Tax Calculator was purple instead of auburn. Projects used unapproved oranges. The text-muted class was unreadable — roughly 2.2:1 contrast ratio against the background, when WCAG AAA requires 7:1.
Hover animations changed font size and width on headings. The subscribe CTA said "Subscribe to stay informed" — weak for a movement trying to reshape a nation's economic trajectory. Missing OG images on memos — the north star metric.
The audit identified the core failure: the AI-built design tried to earn attention. The repaired design would succeed because it assumed respect.
The performance problem
Average mobile performance score: 67%. Failing.
The content page scored 51% with an 8.9-second largest contentful paint and a 0.593 cumulative layout shift. The corporate tax memo page loaded in 20 seconds. The claim-space memo: 18.9 seconds. The about page: 10.5 seconds.
Root causes: images missing explicit dimensions, causing severe layout shift. Above-fold images lazy-loaded, blocking largest contentful paint. A 62MB 4K hero video loaded on every homepage visit. 673KB of Twitter JavaScript loading immediately for a collapsed accordion. About 11MB of GIFs in a single widget component. TikTok CDN images with expiring signatures producing 403 errors on cached URLs.
43 tasks across three priority levels. Twelve critical, eighteen high priority, thirteen medium.
The rebuild
Two weeks. Here's what shipped.
The about page was a 923-line client component monolith. Refactored to a 60-line server component with five extracted client components. The GSAP animation library was removed entirely — replaced with shadcn components and CSS transitions. The homepage video went from 62MB to 8.2MB. The homepage started server-fetching memos via Prisma instead of making client-side API calls.
Build Canada's memos are long-form policy documents. Readers need to navigate sections quickly. I built a custom table-of-contents component called Signpost — an animated navigation system with scroll-spy, reading progress tracking, and smooth navigation. On desktop, it's a sidebar showing the document tree with visual indicators for read and unread sections. On mobile, it's a bottom bar showing current section, reading progress, and a tap-to-navigate overlay.
Their lead engineer, Brendan Samek, said on a call: "I absolutely love the custom table of contents, I'm so glad you went the extra mile to build that."
The north star metric is social sharing. I built a complete social sharing system: share buttons for X, LinkedIn, Threads, and copy-link. An OG preview component that shows users exactly what their card looks like when shared. OG images generated dynamically using Next.js ImageResponse with zero new dependencies.
The original subscribe form was non-functional — onSubmit called preventDefault with no backend. Replaced with a full system: email-only form with validation, Zustand store with localStorage persistence, a dialog modal, an exit-intent handler with a 7-day cooldown, and a subscribe API endpoint. Ten commits.
I also created the Build Canada Design System as three packages in a monorepo: a color token library with the approved palette, a configurable data visualization library built with React 19 and MobX, and shared UI components. Normalized CanadaSpends.com to use the new color tokens for consistent styling across all chart types.
And 32 files, 234 instances of inline color token violations were cleaned up and replaced with proper design tokens.
The results
Load times went from 20 seconds to under 2 seconds. All critical accessibility issues were resolved — contrast ratios, button names, heading order, tap targets. All critical performance issues were resolved — cumulative layout shift, largest contentful paint, external images. Full social sharing with dynamic OG images. Security headers and content security policy implemented. Comprehensive JSON-LD structured data across Organization, Breadcrumb, FAQ, Review, and Article schemas.
Macoy Jackson, Head of Operations: "Appreciate your diligence and thoughtfulness always." And when the site went live: "Thanks Mackenzie! It looks awesome and excited to get it live."
The contract
Even the contract needed fixing.
Build Canada sent a modified employment agreement with IP assignment clauses. The kind of document you'd give a full-time employee — not a corporation you're engaging for professional services. The problems I was solving were my work product, developed with my tools and expertise, not their private intellectual property.
I rewrote it as a proper services agreement that protects both parties. They signed it without changes.
What this proves
Build Canada's team is smart. They used one of the most capable AI coding tools available and gave it a clear brief. The result had more features than the old site. But it lost the brand — because AI doesn't have taste, doesn't understand cultural memory in typography, doesn't know that "display slightly excess gravitas" means something specific.
The vibecoded site used the wrong font, the wrong weight, the wrong colors, and the wrong motion. It loaded 62MB of video on every homepage visit. It loaded 673KB of Twitter JavaScript for an accordion nobody had opened. It had broken OG images on the content type that matters most.
None of these are hard engineering problems. They're judgment problems. They require someone who can look at a page and say "this doesn't feel right" — and then know what to change.
The audit found 43 things wrong. The rebuild fixed 30+ of them in two weeks, including building entirely new systems from scratch. The site went from some pages taking 20 seconds to load to consistently under 2 seconds.
This is the gap between generated code and intentional design. AI can produce features. It can't produce taste. And when your website is the primary distribution platform for policy recommendations that reach millions of Canadians, taste isn't optional — it's the product.