BacktraceDesign

About

BacktraceDesign extracts the complete design language from any website and generates a professional style book in a new tab — no DevTools required.

  RIGHT-CLICK ANY PAGE TO GET:

  • Brand Palette — Automatically inferred primary, secondary, accent, and neutral colors
  • All Colors — Every color on the page, named from CSS variables (Sand, Rosewood, Navy, etc.)
  • Color Tokens — Semantic design token mappings showing how colors are used (Heading → Navy, Link → Coral, Background → Sand)
  • Typography — Every heading and text style rendered in the actual site fonts, with font size, weight, and line height
  • Buttons & Links — All distinct variants with their real styles applied
  • Spacing & Grid — Most-used margin, padding, and gap values ranked by frequency
  • Border Radius & Shadows — Visual previews of every radius and box-shadow value

  SMART CSS VARIABLE DETECTION:

  BacktraceDesign reads CSS custom properties, resolves var() chains, and understands design token systems. It handles @layer rules, inline style attributes, cross-origin stylesheets, and WordPress/theme framework variables —
   extracting meaningful color names like "Rosewood" instead of raw hex codes.

  EXPORT IN MULTIPLE FORMATS:

  • PDF — Landscape print-ready style book, one section per page, presentation-grade quality
  • JSON Design Tokens — W3C Design Tokens Community Group format, compatible with Style Dictionary and Figma Tokens
  • CSS Variables — Clean :root {} file with all tokens organized as custom properties
  • Tailwind Config — Ready-to-use theme.extend snippet with colors, fonts, spacing, radii, and shadows

  BUILT FOR DESIGNERS AND DEVELOPERS:

  Perfect for design audits, competitive analysis, client pitches, brand documentation, or bootstrapping a new project based on an existing site's visual language. The exported PDF is polished enough to include directly in a
  presentation or pitch deck.

  PRIVACY:

  BacktraceDesign runs entirely in your browser. No data is sent to any server. All extraction and rendering happens locally.

  Open source: https://github.com/fx2000/backtrace-design
  Website: https://backtracedesign.duque.ai