🎨 Font Style Guide Generator (Chrome Extension)

A powerful Chrome extension that extracts typography and text styles from any website and generates a complete, designer-friendly style guide.

---

🚀 Features

• 🔍 Analyze fonts used on any webpage
• 🧠 Detect:
  • Font families
  • Font sizes
  • Font weights
  • Colors
  • Line heights & spacing
• 🎨 Generate a visual typography style guide
• 📊 Create structured typography hierarchy
• 💾 Export data as JSON
• 🧩 Helps designers & developers reverse-engineer design systems

---

🛠️ How It Works

1. Open any website
2. Click the extension
3. Choose:
   • Analyze Page Fonts
   • Generate Style Guide
   • Export Data

The extension scans DOM elements and extracts computed styles to build a structured typography system.

---

📦 Installation

Load Unpacked Extension

1. Clone this repository:

git clone https://github.com/your-username/font-style-guide-generator.git

2. Open Chrome and go to:

chrome://extensions/

3. Enable Developer Mode

4. Click Load unpacked

5. Select the project folder

---

📁 Project Structure

├── manifest.json
├── content.js
├── popup.html
├── popup.js

---

🔐 Permissions Explained

This extension uses:

• activeTab → To access current webpage
• scripting → To inject analysis scripts
• storage → To store font data temporarily
• <all_urls> → Required to analyze any website

👉 No personal data is collected or sent externally.

---

⚠️ Privacy

• This extension does NOT collect or store personal user data
• All analysis happens locally in your browser
• No external APIs are used

---

🎯 Use Cases

• UI/UX Designers
• Frontend Developers
• Design System Audits
• Reverse engineering competitor UI
• Typography research

---

🧠 Future Improvements

• Export to Figma tokens
• Direct Figma integration
• Design system suggestions
• Accessibility checks (contrast, readability)

---

Author

Name: Bitta Singha

• Linkedin: www.linkedin.com/in/bitta-singha-97a22a1b6
• Instagram: @bitta.ux

---

🤝 Contributing

Feel free to fork and improve this project.

---

📄 License

This project is licensed under the MIT License.