Atoms - SEO & CSS Inspector

About

**Atoms reveals the building blocks of any webpage.**

Two powerful modes in one extension:

**SEO MODE**
• Hover any element to see its SEO impact (H1, H2, meta, links, schema)
• Analyze heading hierarchy and content structure
• Check schema markup and structured data
• View internal/external link analysis
• Export full SEO audit as markdown

**CSS MODE**
• Extract colors, typography, and spacing from any element
• Copy CSS values with one click
• Build color palettes from live sites
• Capture typography systems (fonts, sizes, weights)
• Export design tokens for your projects

**OVERLAY MODE**
• See all SEO elements highlighted at once
• Visual content hierarchy mapping
• Quick scan for SEO issues

**PRO FEATURES**
• Full page scans with competitor analysis
• Strategy cards with actionable insights
• Clone briefs for content replication
• SERP overlay on Google search results
• Use on up to 3 devices

**Keyboard Shortcuts**
• Cmd/Ctrl + Shift + A: Toggle Atoms
• Cmd/Ctrl + Shift + O: Toggle Overlay
• Cmd/Ctrl + Shift + S: SEO Mode
• Cmd/Ctrl + Shift + C: CSS Mode

Perfect for SEO specialists, web designers, content strategists, and developers who want to understand and learn from any website.