A powerful Adobe Express add-on that automatically extracts brand assets (logos, colors, and fonts) from any website URL and applies them to your Adobe Express documents.

• Logo Detection: Automatically finds and extracts company logos using intelligent selectors
• Color Palette: Extracts brand colors from CSS, inline styles, and design elements
• Font Detection: Identifies and extracts brand fonts from Google Fonts and CSS declarations
• Mock Data: Professional mock brand kits for Apple and Google with detailed design philosophies

• Apple Brand Kit: Minimalist design with sophisticated black/white palette and SF Pro fonts
• Google Brand Kit: Material Design principles with vibrant colors and Google Sans typography
• Design Philosophy: Detailed descriptions of each brand's design approach and aesthetic principles

• One-Click Application: Apply extracted brand assets directly to your Adobe Express documents
• Smart Selection: Works with selected elements or creates demo elements if nothing is selected
• Real-time Preview: See extracted assets before applying them to your design

• CORS Handling: Uses multiple strategies to bypass CORS restrictions
• Fallback System: Graceful degradation with fallback brand assets
• Error Recovery: Comprehensive error handling with user-friendly messages

The add-on uses advanced web scraping techniques to analyze websites:

• HTML Parsing: Parses the website's HTML structure
• CSS Analysis: Extracts colors and fonts from stylesheets
• Image Detection: Finds logos using multiple selector strategies
• URL Resolution: Handles relative and absolute image URLs

• Searches for common logo selectors (img[src*="logo"], .logo img, etc.)
• Analyzes image dimensions to identify potential logos
• Resolves relative URLs to absolute paths

• Extracts hex colors from CSS (#FF5733)
• Converts RGB/RGBA values to hex format
• Limits to 6 most prominent colors
• Categorizes as primary, secondary, accent, and background

• Parses font-family declarations from CSS
• Extracts Google Fonts from <link> tags
• Cleans and normalizes font names
• Limits to 3 most used fonts

• Color Application: Applies brand colors to selected shapes and elements
• Font Application: Applies brand fonts to selected text elements
• Logo Insertion: Creates logo placeholders in the document
• Demo Creation: Generates sample elements if nothing is selected

• Adobe Express account
• Adobe Express Add-on Development environment

1. Clone or download the project files
2. Ensure all files are in the brandkit/ directory:
   • index.html - Main UI
   • index.js - Frontend logic and scraper
   • code.js - Document sandbox API
   • style.css - Styling
3. Configure your Adobe Express add-on development environment
4. Load the add-on in Adobe Express

1. Enter Website URL: Paste any company website URL in the input field
   • Try apple.com or google.com for professional mock brand kits
2. Click "Go": The add-on will analyze the website and extract brand assets
3. Review Results: See the extracted logo, colors, fonts, and design philosophy
4. Apply to Document: Click "Apply to Express" to use the assets in your design

• Select Elements First: Select specific elements in your Adobe Express document before applying
• Multiple Applications: Extract from different websites and apply different brand kits
• Fallback Mode: If extraction fails, the add-on will use fallback brand assets
• Mock Data Testing: Use apple.com or google.com to test with professional brand kits

• Colors: Black (#000000), Gray (#86868B), Blue (#007AFF), White (#FFFFFF)
• Fonts: SF Pro Display, SF Pro Text
• Design Philosophy: Minimalism, clarity, and deference with generous white space and clean typography

• Colors: Google Blue (#4285F4), Green (#34A853), Red (#EA4335), Yellow (#FBBC05)
• Fonts: Google Sans, Roboto, Product Sans
• Design Philosophy: Material Design principles with bold colors, clean typography, and intuitive UX

The add-on uses multiple strategies to handle CORS restrictions:

1. Direct Fetch: Attempts direct fetch for CORS-enabled sites
2. CORS Proxy: Falls back to api.allorigins.win proxy service
3. Error Recovery: Graceful fallback to simulated data

• Logo URLs: Resolved to absolute URLs for proper loading
• Color Conversion: RGB/RGBA values converted to hex format
• Font Normalization: Font names cleaned and standardized

• Document Sandbox: Uses add-on-sdk-document-sandbox for document manipulation
• Express SDK: Leverages express-document-sdk for element creation and styling
• Runtime API: Exposes custom APIs for brand kit application

• PNG, JPG, SVG formats
• Relative and absolute URLs
• Various naming conventions (logo, brand, company)
• Size-based detection (50px - 300px range)

• Hex colors (#FF5733)
• RGB values (rgb(255, 87, 51))
• RGBA values (rgba(255, 87, 51, 1))
• Automatic conversion to hex format

• Google Fonts (automatic detection)
• Web-safe fonts
• Custom font families
• Font weight and style variations

• Some websites may block scraping due to CORS policies
• The add-on includes fallback mechanisms for such cases
• Consider using a backend proxy for production use

• Relies on common naming conventions and selectors
• May not detect logos with unusual naming patterns
• Image size filtering may miss some logos

• Extracted fonts must be available in Adobe Express
• Google Fonts are automatically available
• Custom fonts may not render correctly

• AI-Powered Detection: Machine learning for better logo and color detection
• Brand Guidelines: Generate complete brand guideline documents
• Asset Library: Save and manage multiple brand kits
• Advanced Color Analysis: Color psychology and accessibility analysis
• Font Pairing: Suggest complementary font combinations

• Backend API: Dedicated server for reliable scraping
• Image Processing: Logo optimization and format conversion
• Caching: Cache extracted assets for faster subsequent extractions
• Batch Processing: Extract from multiple URLs simultaneously

This is a proof-of-concept project for Adobe Express add-ons. Contributions are welcome for:

• Improved asset detection algorithms
• Better error handling and user experience
• Additional Adobe Express integration features
• Documentation and examples

This project is created for educational and demonstration purposes as part of the Adobe Express Add-on development.

"Failed to extract brand kit"

• Check if the website URL is correct
• Some websites may block scraping
• Try a different website or use the fallback mode

"Document sandbox not connected"

• Ensure you're running in Adobe Express
• Check that the add-on is properly loaded
• Restart the Adobe Express application

"No assets found"

• The website may not have detectable brand assets
• Try a different website with more prominent branding
• Check browser console for detailed error messages

Enable console logging to see detailed extraction process:

// In browser console
localStorage.setItem('debug', 'true');

Note: This is a demonstration project showcasing the capabilities of Adobe Express add-ons. For production use, consider implementing proper backend services and error handling.