Peek Design Asset Toolkit

🎨 Instantly Extract Design Tokens, Styles, and Assets from Any Website

Peek is the ultimate all-in-one inspector tool for UI/UX designers, vibe coders, and frontend developers. With a single click, extract a complete design system—colors, gradients, typography, shadows, border radius, 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 v3/v4, JSON, SVG, and more.

✨ Key Features
🔍 NEW: Design Audit
- Automatically audit any website against real design system rules: accessibility, color, typography, spacing, layout, and component consistency.
- Peek scores each dimension and gives an overall grade so you can see exactly where a site’s design falls short.

📊 NEW: Design Health & Overview
- The Overview tab now shows a live Design Health score with grade, rationale, and per-dimension breakdown.
- Color harmony detection, WCAG contrast pair analysis, font pairing review, and dark mode detection — all in one place.
- Jump straight to Audit Findings or the full Typescale view from Overview.

🌑 NEW: Shadow Extraction
- Peek extracts every box-shadow and drop-shadow from the page — parsed into individual layers with offset, blur, spread, and color.
- Inspect shadow details in the dedicated Shadow Modal.
- Browse all shadows on the Shadows Page and copy them as CSS tokens with one click.

🛠️ NEW: Tech Stack Detection (Built With)
- Peek detects the popular frameworks the websites were built with.
- Stack icons and tooltips with framework descriptions appear directly in the Overview tab.

⬛ NEW: Border Radius Extraction
- Peek now surfaces border radius tokens used across the page, shown in the Overview tab alongside your color and typography summary.

🖼️ Complete Asset Extraction
- Instantly find and analyze all images, SVGs, and other assets on a page.
- Search assets by name or category; filter by size (small / medium / large).
- Filter, scale, copy, and download assets with one click.

🎨 SVG Color Customization
- Change individual SVG colors directly inside Peek — including multi-color SVGs.
- Copy or download the customized SVG instantly.
- Gradient SVGs are detected automatically and flagged with a clear banner.

🎨 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 v3, Tailwind CSS v4, JSON, and SVG.

📝 Advanced Typography Analysis
- Instantly identify font families, sizes, weights, and line heights.
- Visualize the site’s full typescale with semantic labels (Display, Title, Body, Caption…).
- Live Font Previews: see fonts rendered exactly as they appear on the site.
- Intelligent Script Detection: Peek automatically detects the script (Latin, Bangla, Hindi, Tamil, Telugu, Malayalam, Hebrew, Chinese, Thai, Arabic, Japanese, Cyrillic, etc.) and previews fonts in the appropriate language.
- Copy the full typescale in CSS, SCSS, Tailwind, or JSON from the Overview tab.

📤 Tailwind v3 & v4 Export
- Export color tokens for both Tailwind CSS v3 and v4.
- Peek automatically warns you when a color format (e.g. OKLCH) isn’t compatible with Tailwind v3, so your output always works.

🚀 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 running design audits and 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
- Install the Peek extension
- Navigate to any website
- Click the Peek icon
- Extract styles instantly

💡 Use Cases
- Run a full design audit on any site in seconds.
- Reverse-engineer a website’s design system.
- Detect what framework and libraries a site is built with.
- 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, Tailwind CSS (v3 & v4), 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!

Release History

🚀 v0.8.10.0 // 29 May 2026 (Patch v0.8.10.1; 12 Jun 2026)

🥳 New!

1️⃣ Design Audit: Peek now audits any website against real design rules across accessibility, color, typography, spacing, layout, and component consistency — with a scored grade and an exportable report.

2️⃣ Design Health Score: The Overview tab shows a live health score, grade, per-dimension breakdown, color harmony detection, WCAG contrast pair analysis, font pairing insights, and dark mode detection.

3️⃣ Shadow Extraction: Every box-shadow and drop-shadow on the page is extracted, parsed into layers, and viewable in a dedicated Shadow Modal and Shadows Page. Copy shadows as CSS tokens instantly.

4️⃣ Tech Stack Detection (Built With): Peek detects popular frameworks the websites are built with — shown with icons and tooltips in the Overview tab.

5️⃣ Border Radius Extraction: Border radius tokens are now surfaced in the Overview tab.

6️⃣ Tailwind v3 Export: Export color tokens specifically for Tailwind CSS v3, with automatic warnings when a color format isn’t compatible.

7️⃣ Assets Tab Search & Filter: Search assets by name or category and filter by size (small / medium / large).

⬆️ Improvements
- Typography Modal: enhanced interaction and richer stats.
- Overview tab redesigned for clarity and navigation to Audit Findings, Typescale, and Shadows pages.
- SVG gradient detection with inline banner notice in Asset Modal.
- Consistent Title Case across all labels, buttons, and badges throughout the UI.

---

🚀 v0.8.9.1 // 19 Apr 2026

🥳 New!

1️⃣ SVG Superpowers: Change SVG colors and Copy/Download the customized SVG (Gradient SVG color customization coming soon!)

2️⃣ More Organized Assets: Logos now appear first! Other assets are grouped by asset type.

3️⃣ Improvement: Jump To Top button in Overview Tab

🐞 Bug Fix: Fixed a bug where manually entered HEX values were not working in SVG Color Edit mode.

---

🚀 v0.8.8.0 // 8 Mar 2026

🥳 New: Site Overview

1️⃣ Overview tab – Single-page summary of colors, typography, and typescale from the current site.
2️⃣ Color analysis – Dominant, secondary, and accent colors with role breakdown (background, text, button).
3️⃣ Typography summary – Heading/body fonts, unique styles count, and typescale preview.
4️⃣ Quick actions – Jump to Copy or Download for a chosen color group from Overview.

🥳 New: Copy Typescale

1️⃣ Copy Typescale As… – Copy the full typescale in CSS, SCSS, Tailwind, and more.

⬆️ Improvement: Output code (Copy / Download)

1️⃣ Cleaner generated code – More consistent formatting, spacing, and comments.
2️⃣ Better structure – Logical grouping and ordering of variables and rules.

---

🚀 v0.8.7.2 // 4 Nov 2025

✨ New Features & Improvements

• Delete Picked Colors: Delete individual picked colors with undo support.
• Conic Gradients to SVG: Conic gradients auto-convert to linear in SVG exports.
• Enhanced Video Player: Picture-in-Picture support in the Assets Modal.
• Improved Color Conversion: OKLCH gradient colors now properly convert to your selected format.

🐞 Bug Fixes

• Fixed OKLCH gradient colors not converting in Copy and Download pages.

ENJOY!
https://trypeek.app