Menu
site-auditdesign-tokensapinew-feature

Site Audit API: Extract Design Tokens from Any Website

SnapSharp Team·March 27, 2026·5 min read

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

SectionData
ColorsPrimary, background, text, accent — up to 20 unique colors with hex codes
FontsEvery font family with weights and usage context (body, heading, code)
HeadingsAll h1–h6 with font size, weight, color, and text content
TypographyBody font size, line height, heading scale
Tech stackFramework detection with confidence scores — 14+ technologies
AccessibilityImages without alt, heading order, contrast issues, ARIA landmarks
MetadataTitle, 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); // 3
from 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.png

The 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.

Try Site Audit → · Read the docs → · Get an API key →