Web Style Analyzer

Peek - Design & Asset Toolkit

Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit. 🎨 Instantly Extract Design Tokens, Styles, and Assets from Any Website Peek is the ultimate all-in-one inspector tool for UI/UX designers and frontend developers. With a single click, you can extract a complete design system—including colors, gradients, typography, and assets—from any website. Say goodbye to manual inspection and hello to a streamlined workflow. Export production-ready code in CSS, SCSS, Tailwind CSS, JSON, SVG, and more. 🖼️ NEW: Complete Asset Extraction - Instantly find and analyze all images, SVGs, and other assets on a page. - Filter, scale, copy, and download assets with one click. 🎨 Smart Color & Gradient Detection - Automatically extracts the entire color palette, including solid colors and gradients. - Supports HEX, RGB, HSL, and modern formats like OKLCH. - Copies or downloads in developer-ready formats: CSS, SCSS, Tailwind CSS, JSON, and SVG. 📝 Advanced Typography Analysis - Instantly identify font families, sizes, weights, and line heights. - Visualize the site's type scale and typographic hierarchy. - Live Font Previews: See fonts rendered exactly as they appear on the site. - Intelligent Script Detection: Peek automatically detects the language (e.g., Arabic, Japanese, Cyrillic) and shows font previews in the appropriate script. 🚀 Lightning-Fast & Developer Friendly - Get instant style and asset data with no page reloads or performance impact. - Copy styles directly to your clipboard or download files. - Export clean, production-ready code. 🎯 Perfect For - UI/UX Designers creating design systems - Frontend Developers building component libraries - Design Teams maintaining brand consistency - Students learning web design principles 🔒 Privacy First - All processing happens locally on your device - No data sent to external servers - Respects your privacy and website content 🚀 Get Started in Seconds 1. Install the Peek extension 2. Navigate to any website 3. Click the Peek icon 4. Extract styles instantly 💡 Use Cases - Reverse-engineer a website's design system. - Build a palette from an inspiring site. - Analyze competitor typography and branding. - Create consistent brand guidelines. - Prototype faster with real-world design tokens. 🎨 Supported Formats - CSS, SCSS, JSON, SVG, and more - Compatible with all major design tools - Ready for production use Install Peek today and unlock the power of intelligent style and asset extraction! 1️⃣ SVG Superpowers: Change SVG colors and Copy/Download the customized SVG (Gradient SVG color customization is coming soon!) 1️⃣ Overview tab – Single-page summary of colors, typography, and typescale from the current site. Color analysis – Dominant, secondary, and accent colors with role breakdown (background, text, button). 2️⃣ Typography summary – Heading/body fonts, unique styles count, and typescale preview. Typescale preview – Font sizes shown with semantic labels (Display, Title, Body, etc.) and script-aware labels for non-Latin scripts. 3️⃣ Quick actions – Jump to Copy or Download for a chosen color group (Background / Text / Button) from Overview. 1️⃣ Copy Typescale As… – From Overview, copy the full typescale (all sizes) in your chosen format (CSS, SCSS, Tailwind, etc.). 2️⃣ Typescale-only flow – Opens the Copy page with typography output pre-selected so you can copy or tweak and copy. 1️⃣ Cleaner generated code – More consistent formatting, spacing, and comments in CSS/SCSS/Tailwind output. 2️⃣ Better structure – Logical grouping and ordering of variables and rules in copy/download output. 3️⃣ Fewer quirks – Edge cases in color/gradient and typography output reduced for more reliable paste-in use. • Delete Picked Colors: You can now delete individual picked colors by hovering over them. An undo option is available if you change your mind. • Conic Gradients to SVG: Conic gradients are now automatically converted to linear gradients in SVG exports. Simply change the gradient type from Linear to Angular in Figma (or equivalent in your design tool) to match the original conic gradient. • Enhanced Video Player: Improved video playback experience in the Assets Modal with Picture-in-Picture support. Pop videos out into a resizable window for better viewing. • Improved Color Conversion: Fixed OKLCH gradient colors to properly convert to your selected format (HEX, RGB, HSL, etc.) across all views. • UI Refinements: Subtle improvements throughout the interface for a smoother, more polished experience. • Fixed OKLCH gradient colors not converting to user-selected color formats in Copy and Download pages.

Branding Capture

Branding Capture: The Ultimate Chrome Extension for Web Design and Branding Kits Unleash the power of web design and branding with Branding Capture, the must-have Chrome extension for creating professional branding kits from any website. Whether you’re a designer seeking inspiration, a marketer building brand guidelines, or a developer needing accurate design assets, Branding Capture simplifies the process by extracting and organizing key branding elements with a single click. What Does Branding Capture Do? Branding Capture scans any webpage to deliver a comprehensive branding kit, including: - Color Palettes: Automatically detect and categorize the primary and secondary colors used on the site, complete with HEX codes for easy integration into your designs. Perfect for building cohesive color schemes. - Font Extraction: Identify and extract fonts, including families, sizes, and weights, so you can replicate typography exactly as it appears online. - Logo Capture: Seamlessly capture the website’s logo (in its original format) and save it as a separate file, ensuring you have high-quality assets for your projects. - Favicon & Icons: Collect the favicon and frequently used icons, packaged as individual files for use in your designs or applications. - Button Styles: Extract UI elements like buttons, including background colors, borders, and border radii, to recreate interactive components accurately. Imagery Style Analysis: Analyze and describe the visual style of images (e.g., vibrant photography or minimal illustrations) to guide your creative direction. Spacing & Layout Patterns: Discover the site’s spacing grid (e.g., 8px scale) and layout patterns for pixel-perfect design replication. Meta Information: Pull the site’s title and meta description to provide context for brand identity and messaging. - CSS Export: Generate a ready-to-use CSS file with variables for colors, fonts, and more, streamlining development workflows. How It Works Simply install the FREE Branding Capture Chrome extension, navigate to any website, and click the "Capture Branding" button in the popup. Within seconds, you’ll see a sleek, modern interface displaying all branding elements. Click "Download Branding Kit" to receive a compressed ZIP file containing a professionally formatted PDF with your branding kit details and separate files for logos, favicons, icons, and a CSS stylesheet—everything you need in one convenient package. Why Choose Branding Capture? - Time-Saving: Eliminate manual extraction of design elements, saving hours for designers, marketers, and developers. - Versatile: Works on any website, making it ideal for inspiration, competitor analysis, or client projects. - User-Friendly: Clean, intuitive interface with a modern design that matches the professional output of your PDF and ZIP files. - Comprehensive: Offers more than just colors and fonts—get a full suite of branding assets and insights. Perfect For - Designers: Create stunning brand guidelines, mood boards, and style guides with precise colors, fonts, and logos. - Marketers: Analyze competitor branding or build consistent campaigns using extracted assets. - Developers: Streamline front-end development with CSS exports and accurate UI components. - Businesses: Maintain brand consistency across digital platforms with ease. Get Started Today Download Branding Capture now from the Chrome Web Store and transform any website into a fully editable branding kit. Whether you’re crafting a new design, analyzing a competitor, or documenting a brand’s identity, Branding Capture is your go-to tool for web design inspiration and asset extraction. Elevate your projects with the power of this innovative Chrome extension—available for free with optional updates for advanced features! Keywords: Chrome extension, branding kit, color palette, font extraction, logo capture, web design tools, design resources, branding generator, UI design, CSS export, favicon extraction, icon pack, website analysis, brand guidelines, design inspiration.

Text Mojo

Text expansion, word counting, case conversion, and Lorem Ipsum generation tools in a convenient sidebar. Type less. Do s'more. Text Mojo is a powerful text expander for Chrome that turns shortcuts into full snippets instantly. Save hours every week by eliminating repetitive typing. 🔥 HOW IT WORKS Create a shortcut (like ::email or ::address) Type it anywhere on the web Watch it expand into your full text instantly Create unlimited shortcuts that expand into longer text Works on any website, any text field Instant expansion as you type Perfect for emails, forms, support responses, code snippets, and more ORGANIZE YOUR WAY Hierarchical tags to group related snippets (PRO) Search through your snippet library instantly Archive or trash snippets you no longer need Clean, intuitive interface Highlight text on any webpage and save it as a snippet (PRO) Right-click selected text to add to your library Build your snippet collection effortlessly Your snippets follow you everywhere Chrome Sync keeps everything in sync across your computers Toggle sync on/off based on your needs Export all snippets to JSON format (PRO) Import snippets from backup files (PRO) Never lose your productivity library Word Counter - count words, characters, and paragraphs Case Converter - switch between uppercase and lowercase Lorem Ipsum Generator - create placeholder text for designs All data stored locally on your device Optional Chrome Sync (your data, your Google account) Zero tracking. Zero data collection. Zero servers. We never see your snippets Dark and light themes Reduced motion option for accessibility Keyboard-friendly interface Customer support teams - Respond faster with saved templates Developers - Store code snippets, terminal commands, boilerplate Writers - Save common phrases, bios, signatures Sales teams - Personalize outreach with reusable templates Remote workers - Speed up Slack, email, and documentation Anyone who types the same things over and over ⏱️ SETUP IN 2 MINUTES Install Text Mojo, create your first snippet, and start saving time immediately. No account required. No configuration needed. 🛡️ MONEY-BACK GUARANTEE Try Pro risk-free with our 7-day money-back guarantee. If you're not happy, we'll refund you—no questions asked.

Web SuperKit - Powerful Extension for Everything (1MB)

Powerful, lightweight extension with 100+ browser and utility tools for developers, designers, and everyday productivity. Web SuperKit is a powerful yet lightweight Chrome extension that brings 100+ developer, design, and utility tools directly into your browser — all in one place. No need to switch between multiple websites or tools. Everything you need is available instantly on any webpage. ⚡ Key Highlights 🧰 100+ Built-in Tools Includes web inspection, data extraction, color tools, font tools, screenshot tools, utilities, and more. ⚡ Ultra Lightweight (