BacktraceDesign reverse-engineers colors, typography, spacing, and component styles into a comprehensive, exportable style book.
No setup, no API keys. Just right-click and extract.
Select "Extract styles from this page" from the context menu on any website.
BacktraceDesign scans every element, stylesheet, and CSS variable to build a complete picture.
A beautifully formatted style book opens instantly. Export as PDF, JSON Tokens, CSS Variables, or Tailwind Config.
BacktraceDesign captures every visual detail and organizes it into a readable, shareable document.
Automatically curates brand colors from backgrounds, text, borders, and stylesheets with semantic role detection.
Discovers custom properties and maps semantic tokens to their base color values across all stylesheets.
Captures font families, sizes, weights, line heights, and letter spacing for every heading and body style.
Extracts every button variant and link style with live-rendered previews showing padding, borders, and shadows.
Identifies recurring spacing values, border radii, and box shadows used throughout the page.
Export as PDF for sharing, JSON design tokens, CSS custom properties, or a Tailwind CSS config file.
Choose the format that fits your workflow.
A print-ready document with all colors, type, and components. Perfect for handoffs and presentations.
Structured design tokens compatible with Style Dictionary, Figma Tokens, and other token pipelines.
A ready-to-use CSS file with custom properties for colors, spacing, radii, and shadows.
A tailwind.config.js extending the default theme with the extracted palette, fonts, and spacing scale.