Big Red Oak

Big Red Oak is a marketing and communications agency specialized in clean energy, nuclear, and the energy transition in Canada. In a technical, regulated, high-profile sector, they needed a web presence that conveyed authority and judgement — no generic templates, no interchangeable corporate feel. The challenge: stand up a complete multi-page agency site with proprietary visual identity, client cases, a blog and a podcast, plus a working contact backend, with no CMS and no heavy frameworks, and ship it to production at premium standard. The opportunity: test whether an AI-assisted development workflow can deliver not just speed, but bespoke design and agency-grade technical quality.

Pure vanilla stack and a hand-made design system. HTML, CSS and JS — no frameworks, no builders, no CMS; backend on serverless Node functions on Vercel. The whole identity built from scratch: Bebas Neue and Avenir typography, a warm palette with the oak red as the single accent, and a coherent visual language across every page. Brand imagery generated with AI inside that same palette (fluid renders for hero, footer and panels), avoiding stock photography and reinforcing the site's singularity. Cinematic but measured motion (GSAP + ScrollTrigger) without sacrificing performance. Claude Code as the main development tool: architecture definition, code generation, iterative refactoring, design implementation and continuous validation against technical constraints.

1. 01Complete bespoke design system (tokens, Bebas Neue + Avenir type scale, brand palette)
2. 02Proprietary visual identity: SVG logos rendered with CSS-mask technique and botanical accents with cursor-tracking hover
3. 03Brand imagery generated with AI inside the project's palette (fluid renders, no stock)
4. 04Multi-page site of 21 pages: home, about, work, contact + 13 client cases + 3 blog articles
5. 05Clean Currents section: podcast with embedded Spotify episodes and editorial blog
6. 06Cinematic scroll-driven animation (video that expands on scroll with GSAP + ScrollTrigger)
7. 07Serverless backend for contact form and newsletter sign-up (Vercel Functions + nodemailer/SMTP, with server-side validation and honeypot anti-bot)
8. 08Full technical SEO: JSON-LD schema (Organization), Open Graph, Twitter Cards, canonicals, sitemap.xml, robots.txt, manifest and favicons
9. 09Core Web Vitals optimized from day one: self-hosted woff2 fonts, preload of critical resources, lazy-load and fetchpriority
10. 10Mobile-first responsive with dedicated mobile audit (including fix for color rendering on Chrome Android)
11. 11Deployed to production on Vercel with custom domain and automatic deploy from GitHub

A complete, in-production agency site — with its own visual identity, custom front and back — running at bigredoak.com on Vercel with continuous deployment. The piece proves that AI-assisted development isn't limited to quick prototypes: it can deliver a bespoke design system, bespoke imagery, an extensive multi-page architecture and a technical SEO foundation at the level an agency client expects, replacing both a traditional build and a CMS without sacrificing quality.