Typescope

Pro Chrome Extension for Designers. Reads the full design system of any webpage.

Typescope is a professional font and design inspector built for web designers, UI/UX designers, and front-end developers who want to understand any website's design system instantly. INSPECT ANY ELEMENT Click any text or element on any webpage and instantly see: - Font family, weight, size, line-height, letter-spacing - Text and background colours in HEX, RGB, and HSL - Full computed CSS — copy with one click - Google Fonts detection with direct link - Variable font detection with available axes AUDIT ANY PAGE Scan an entire webpage in one click and extract: - Every font in use — name, where used, weights, sizes - Complete colour palette grouped by text, background, and borders - Sorted by frequency of use across the page EXPORT EVERYTHING Take any website's design system and export it as: - JSON — full design audit data - CSS Variables — complete :root {} block ready to paste - Figma Design Tokens — W3C format, compatible with Token Studio and Figma Variables SPACING INSPECTOR Hover any element to see its margin, padding, and box model values overlaid directly on the page. WHO IS THIS FOR? - Designers who want to understand how great websites are built - Developers who need to extract CSS from existing sites - Agency teams who need to audit client websites fast - Anyone who has ever spent 20 minutes in Chrome DevTools trying to figure out what font a website is using No subscriptions. No free tier with locked features. One purchase. Every feature. Yours forever. Works on any website including Stripe, Linear, Vercel, Figma, Apple, and your own local development environment.