Domain Wide Styles (Brand Magic)

**Brand Magic** automates the process of bringing a website's existing visual identity into new campaigns. Instead of manually recreating a brand's colors, typography, and button styles, the system scans the website, understands its design patterns, stores the resulting brand profile, and automatically applies it when a new campaign is opened. I built the feature end-to-end, including the database model, domain scraper, style extraction pipeline, AI integration, background processing, API layer, campaign resolution, builder integration, and evaluation framework. The core challenge was making AI-generated styles reliable enough for real-world websites. A pure LLM approach could easily mistake plugin styles or framework defaults for brand colors, or even generate colors that didn't exist on the source website. To solve this, I designed a **hybrid extraction pipeline** where deterministic analysis handles objective signals—CSS variables, color frequency, selector context, typography, button styles, CSS cascades, and document backgrounds—while AI is used to interpret those signals and assign semantic roles. I also built **HTML-guided cascade analysis** to determine which CSS rules actually apply to real CTA elements, rather than simply picking the most common color in a stylesheet. The extraction layer accounts for WordPress theme variables, framework defaults, vendor/plugin styles, syntax-highlighting colors, `var()` chains, and dynamically rendered elements. A screenshot-based vision fallback was added for CTAs that only appear after JavaScript execution. The resulting styles are stored per site and resolved for campaigns through a predictable fallback strategy. Scans run asynchronously through a background worker with rate limiting, timeouts, stuck-process recovery, atomic database updates, and failure handling. I also introduced an AI provider abstraction so the system could switch between OpenAI and Gemini without changing the rest of the pipeline. On the frontend, Brand Magic applies the resolved styles only when creating a **new campaign**, giving users brand-aware defaults without unexpectedly modifying existing campaigns. The injection is intentionally silent and non-blocking so AI or scanning failures never become a blocker for the campaign builder. I validated the system through repeated inspection of real websites, automated tests, representative fixtures, and an LLM-based evaluation harness. This iterative process helped harden the extraction logic against challenging cases across WordPress, Bootstrap, Foundation, Webflow, third-party plugins, CSS variables, muted brand colors, and dynamically rendered UI.