moa: Font, Color & SVG Design Inspector

Inspect typography, copy colors, and grab clean SVG vectors with zero clutter. A fast in-page design inspector for UI/UX designers.

moa is a fast, lightweight in-page design inspector built specifically for UI/UX designers, design system leads, and frontend developers. Inspect typography, identify web fonts, copy color palettes, verify accessibility contrast, measure layout spacing, and extract clean SVG vector icons in one click—without opening bulky browser DevTools or dealing with intrusive overlays. Unlike traditional inspectors that clutter your screen with persistent toolbars, break during normal browsing, or inject unwanted donation popups, moa stays completely invisible until you need it. Hold Option (or Alt on Windows) to peek at any element's specs, or click to pin an unboxed 320px inspection deck that automatically adapts to your viewport. KEY FEATURES 1. FONT INSPECTOR & TYPOGRAPHY FINDER • Identify font families, rendered font sizes, line heights, and font weights instantly on any website. • Mini-Font Ribbon: View all fonts used within nested components and child elements at a glance. • Direct Specimen Links: 1-click direct links to major web font repositories and typography specimen pages. • Icon Font Detection: Automatically identifies glyphs from embedded web icon fonts and symbol libraries. 2. COLOR PALETTE & ACCESSIBILITY CHECKER • Extracts computed text, background, and border colors across component depths. • 1-Click HEX Copy: Instant clipboard copy with tactile visual confirmation. • Contrast Validation: Real-time APCA rating and WCAG AA/AAA compliance checks against background surfaces. 3. SVG VECTOR GRABBER & ASSET EXTRACTOR • Automatically detects inline SVG elements and vector paths within any selected UI component. • 1-Click SVG Copy: Copies clean, production-ready SVG markup with intrinsic dimensions preserved. • Direct paste into your favorite vector design software or codebase with zero raster pixelation. 4. AUTO-LAYOUT & GEOMETRY SPECS • Live Layout Detection: Identifies Flexbox (Row/Column), CSS Grid, and Flex Wrap configurations. • Box Model Formula: Solves exact padding (top, right, bottom, left), gap, margin, and corner radii. • Dimension Badge: Displays exact width and height in pixels directly on the element boundary. • Subpixel Precision: High-precision coordinate calculations with zero viewport layout shifts. 5. PRIVATE 4K COMPONENT VAULT • Click "Save to Vault" to bookmark inspiring real-world UI components directly into your local library. • Offline-First: All saved components are stored locally in your browser (IndexedDB) with zero cloud lock-in. • High-resolution 2x retina thumbnails with original site context backgrounds preserved. • QuickLook: Press Spacebar in the vault for a 0.05-second full-resolution preview. • Spotlight Search: Real-time filtering by tag, domain, or dominant color, with Korean Choseong and typo tolerance. • Full JSON export and duplicate-free re-import. PERFECT FOR • UI/UX Designers: Benchmark typography, colors, and layout patterns from your favorite web inspirations. • Design System Leads: Audit live component styling, font tokens, and WCAG accessibility contrast ratios. • Frontend Engineers: Inspect box-model paddings, margins, and flex alignments without opening DevTools. • Digital Creatives: Grab clean vector logos and SVG icons directly from live websites without quality loss. HOW TO USE (EFFORTLESS & ZERO LEARNING CURVE) • Peek: Hold Option (Windows: Alt) to highlight any element and view instant dimensions. • Pin: Click while holding Option to freeze the element and open the 320px Modular Inspector Deck. • Navigate: Press Shift + Enter (or Up Arrow) to select parent containers, and Enter (or Down Arrow) to drill into child layers. • Copy: Click any color swatch to copy HEX codes, or click the SVG chip to copy vector code. • Reset: Press Escape or double-click anywhere outside to immediately return to normal browsing. UNIVERSAL WEB COMPATIBILITY Works seamlessly across all modern websites, single-page applications, design systems, UI frameworks, and local dev environments (localhost). WHY DESIGNERS CHOOSE MOA • Zero Viewport Clutter: Stays 100% invisible during normal browsing. No persistent dockers or floating icons. • No Unwanted Popups: Built as a clean, honest alternative to broken tools with aggressive donation popups. • Smart Viewport Alignment: The 320px deck automatically avoids screen edges and never blocks your view. • 100% Free Public Beta: No subscriptions, no monthly quotas, no paywalls, and no credit card required. • No Account Required: Install and start inspecting immediately with zero signups. PRIVACY & PERMISSIONS • 100% Client-Side: All style parsing and component storage happen entirely within your local browser. • Zero Tracking: No analytics tracking scripts, no third-party ad networks, and no external data brokers. • No Personal Data Collection: moa does not read, transmit, or store browsing histories, passwords, or personal credentials.