Media
5 items
Description
Extract design language from any website and generate a style book. 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