Superposition

What Is Superposition?

Superposition is a free design tokens extraction tool available for macOS, Windows, and Linux. It bridges the gap between existing websites and design systems by automatically extracting design tokens—the foundational elements like colors, typography, spacing, border radius, and shadows—from live websites and converting them into usable formats for design and development workflows. Rather than building design tokens from scratch, Superposition leverages the design decisions already embedded in your production code, making it a practical tool for teams looking to formalize and share design systems with consistency.

What Superposition Does

• Extracts design tokens directly from websites, identifying colors, fonts, spacing, shadows, and motion properties
• Exports tokens to multiple formats including CSS, SCSS, JavaScript, and JSON for flexible integration across projects
• Integrates with design tools through plugins for Adobe XD, with Sketch, Figma, Swift, and Android exports in development
• Displays organized token categories with clickable values for easy copying and clipboard access
• Allows manual creation and documentation of design tokens and components with usage instructions
• Generates shareable, beautifully documented design systems ready for team or client distribution

How Superposition Can Be Used

Superposition serves several practical workflows in design and development. Teams can accelerate design system creation by extracting tokens from existing production websites rather than starting from zero, immediately establishing consistency across colors, fonts, and spacing. Designers working in Adobe XD can apply extracted tokens directly through the plugin, ensuring alignment between code and design files. Development teams can export tokens as CSS or JavaScript variables for immediate use in codebases. It also helps teams audit and formalize inconsistent design decisions scattered across a website by centralizing them into a structured token library.

Who Is Superposition For?

Superposition is best suited for design teams, developers, and product organizations looking to establish or document design systems without building tokens from scratch. It works well for teams with existing websites or applications who want to extract and standardize their current design decisions. Design system maintainers, UX designers collaborating with developers, and agencies creating design systems for clients will find value in its extraction and export capabilities. The tool is particularly useful for teams already using design tokens but lacking a centralized extraction process, or those starting a design system initiative and seeking to leverage their production code as the source of truth. Visit Superposition