Implementing Brand Consistency with CSS Variables: A Sponsor Page Redesign

When your sponsor page looks like it belongs to a different website than your homepage, you have a brand consistency problem. Here's how I fixed it—and what I learned about the iterative process of design system migration. The Problem: Three Different Color Schemes The Claude Code Plugins marketplace had evolved organically. The homepage used Anthropic's warm, professional brand colors (orange, green, earthy tones). The sponsor page? Still using generic blue CTAs and inconsistent grays from an earlier design phase. Initial state: Homepage: Anthropic orange (#d97757), green (#788c5d), sophisticated grays Sponsor page: Generic blue (#0066CC), basic grays, no brand alignment Result: Users clicking from homepage to sponsor page felt like they'd left the site This wasn't just aesthetic—it undermined the professional positioning we were trying to establish for enterprise sponsors like Nixtla. The False Start: Find and Replace My first instinct? Global find-replace. Search for #0066CC, replac