Intergalactic Design System

Intergalactic Design System Overview

The Intergalactic Design System is Semrush’s complete design system. It uses a strong library of over 56 React components. Crucially, Semrush built this system to handle complex data visualization and enterprise-grade interfaces.

Intergalactic gives you more than just simple UI elements. In fact, it includes sophisticated components like:

• Charts: Over 14 chart types are available. We built them on d3.js with a strong focus on accessibility.
• Tables: Dedicated Table components effortlessly display data.
• UX Patterns: A constellation of predefined UX and Filter Patterns ensure a smooth user journey across all Semrush products.

Furthermore, the entire system is open-source and actively developed. This makes Intergalactic a reliable choice for projects that need high-quality data display and a consistent look. You can explore the project’s source code on GitHub.

The Intergalactic Figma Library Streamlines Design Handoff

The system offers a complete set of resources for designers. This guarantees that design mockups perfectly match the production code.

• Core Libraries: The Figma assets are organized into core libraries. These files include Core Components, Design Tokens, and Interface Icons.
• Design-to-Code Parity: The Figma assets stay synchronized with the React component library. This simplifies the handoff between designers and developers.

Designers should start with the official Figma libraries. Doing this lets them immediately use the system’s typography, color palettes, and component variants. This maintains the consistency vital for an enterprise-scale product like Semrush.

Dive into Semrush’s highly structured design system. Whether you are building data-heavy applications in React or designing complex interfaces, the Intergalactic Design System gives you the foundational tools you need.