Chrome Extension
Brand Snap
BrandSnap is a design-first Chrome extension that transforms any website into a ready-to-use brand kit. It intelligently detects color palettes, font families, and logos, presenting them in a clean, visual interface built for designers.
Goals
Create a lightweight, intuitive Chrome extension that:
- Extracts brand assets in one click
- Presents them in a clean, visual way
- Requires zero setup or login
Pain Points
Designers often need to reference or recreate a brand when:
- Auditing competitors
- Creating pitch decks
- Building landing pages
- Onboarding new clients
This usually means:
- Manually inspecting CSS for colors
- Guessing or hunting for fonts
- Searching the site for a usable logo
Target Users
- Designers
- Digital Marketers
- Video Editors
- Design Students
Design Process
- A Chrome extension popup has a hard ceiling, close to 400 by 600 pixels, with no room for onboarding or a settings screen without breaking the one-click promise. That constraint set the layout: three flat categories, colors, fonts, logo, instead of tabs, since tabs assume a user willing to navigate and this tool gets used mid-task.
- Swatches over a palette generator. Designers already know what to do with a hex code. The job was surfacing it fast and making it copyable, not curating good colors for them.
- Logo fallback chain, not a single detector. Sites hide their logo differently: favicon, Open Graph image, header image, a labeled SVG. Checking all four in order, rather than picking one, was the difference between working on most real sites and only working on well-structured ones.
Logo Detection
- Favicon
- Open Graph image
- Header or navigation images
- Images or SVGs labeled as logos
- Includes light and dark background toggles
Technical Implementation
- Frontend: React-based popup UI
- Architecture: Chrome Extension (Manifest V3)
- Logic: Content scripts for DOM parsing and asset detection
Color Extraction
- Automatically detects dominant and supporting colors
- Displays swatches with HEX values
- Optimized for visual clarity and quick copying
Font Detection
- Identifies font families used on the page
- Shows preview text for each font
- Useful for quick brand matching and inspiration
Challenges
- Designing reliable logo detection across different site structures
- Handling dynamically loaded content on modern websites
- Balancing feature completeness with simplicity
- Ensuring Chrome Web Store compliance from day one
Outcome
- Shipped a fully functional Chrome extension MVP
- Validated a real-world design workflow problem
- Created a strong foundation for future monetization and iteration