Site Audit API: Extract Design Tokens from Any Website
Ever wanted to know what fonts Linear uses? What colors Stripe's landing page is built with? Which CSS framework powers Vercel's homepage?
SnapSharp's Site Audit endpoint opens any URL in a real Chromium browser and extracts everything a designer or developer needs — in one API call.
What you get
| Section | Data |
|---|---|
| Colors | Primary, background, text, accent — up to 20 unique colors with hex codes |
| Fonts | Every font family with weights and usage context (body, heading, code) |
| Headings | All h1–h6 with font size, weight, color, and text content |
| Typography | Body font size, line height, heading scale |
| Tech stack | Framework detection with confidence scores — 14+ technologies |
| Accessibility | Images without alt, heading order, contrast issues, ARIA landmarks |
| Metadata | Title, description, OG image, favicon, language, viewport |
Three output formats
JSON — structured data for programmatic use. Feed it into design system generators, CI pipelines, or competitive analysis dashboards.
PNG (Site-Book) — a pixel-perfect 1200px visual card with screenshot, color swatches, font families, heading hierarchy, and tech stack badges. Share in Slack, Notion, or client decks.
PDF — A4 landscape report with the same content. Perfect for proposals and audits.
Quick start
import { SnapSharp } from '@snapsharp/sdk';
const snap = new SnapSharp('sk_live_...');
const audit = await snap.siteAudit('https://linear.app', {
format: 'json',
});
console.log(audit.colors.primary); // ["#5E6AD2", "#4B50C8"]
console.log(audit.fonts.families[0]); // { name: "Inter", weights: [400, 500, 600, 700] }
console.log(audit.stack.js_framework); // "Next.js"
console.log(audit.accessibility.images_without_alt); // 3from snapsharp import SnapSharp
snap = SnapSharp("sk_live_...")
audit = snap.site_audit("https://stripe.com", format="json")
for font in audit["fonts"]["families"]:
print(f"{font['name']} — {font['weights']}")PNG site-book — one command
snapsharp site-audit https://vercel.com --format png --output vercel-tokens.pngThe resulting PNG contains:
- Page screenshot (top fold)
- Color swatches with hex codes
- Font families with weights
- Heading hierarchy with sizes
- Technology stack badges
Use cases
Design system bootstrap — starting a new project? Audit a reference site, extract its tokens, and use them as a starting point for your design system.
Competitive analysis — compare color palettes, font choices, and tech stacks across competitors. Export JSON and build a comparison dashboard.
Client proposals — generate a PDF site audit for a prospect's website. Show them exactly what their current site uses and what you'd improve.
Brand consistency — run periodic audits on your own site to make sure design tokens haven't drifted. Combine with Website Monitoring for automated visual regression.
Accessibility checks — spot missing alt texts, broken heading hierarchies, and low-contrast text/background pairs before they become compliance issues.
Tech stack detection
SnapSharp detects 14+ technologies including Tailwind CSS, Bootstrap, Material UI, Chakra UI, Next.js, Nuxt, React, Vue, Angular, WordPress, Webflow, Framer, Vercel, and Netlify. Each detection includes the signal that triggered it and a confidence score.
Try it free
The Site Audit Tool is available as a free browser-based tool — 3 requests per day, no sign-up required. For API access, any paid plan includes unlimited site audits.