Welcome to a series of quick and convenient guides to help you get started with the Intergalactic Design System for your product designs.
How to contribute?
If you're interested in contributing to the Intergalactic Design System, check out this video on how to get involved.
Great data visualization is the cornerstone of our UI. So be sure to take extra care when working with our charts and tables.
The core principles guiding the development of the Semrush interfaces are the following:
- The main purpose of the interface is to assist the user, and not to be clever or look cool.
- Less is more. Keep things simple, and don't overthink it.
- Data is more important than anything else in the interface.
The Intergalactic Design System relies on two sets of design tokens: basic and semantic. The base tokens define the primary color palette, while the semantic tokens build upon the base tokens. By modifying the base tokens, you can affect the semantic tokens, making it possible to create new themes.
Tools like Huetone can help you creating new palette.
Refer to Design tokens to learn more about the tokens and their usage.
The main font used in the Intergalactic Design System is Inter. Our type scale is based on a modular scale with a 12px font size and a 1.2 ratio.
- h1, h1, h3, h4 are used for hero blocks, big advertising blocks and notices, as well as product landings and the ProductHead component.
- h5, h6 are used for smaller elements, as well as widgets and notices inside products.
We strongly recommend using 14px and 16px font sizes for text messages to optimize readability.
See Typography if want to learn more about our recommendations on typography.
While most of our products are designed for desktop data visualization, we suggest using the following main breakpoints for adaptivity:
|320px||The smallest devices. Don't forget them.|
|768px||Phones and tablets.|
|1200px||Big tablets and desktop devices.|
Our product interfaces use a 12-column grid with a 24px gutter. Some products use a flexible grid, while others use a fixed one based on their requirements. The standard width of our design frames for product pages is 1440px.
Refer to Grid and page layout for a detailed description with code examples.
Charts play a significant role in our interfaces, and we employ a variety of chart types to visualize different data. Before utilizing a specific chart, be sure to consult the guidelines for its proper use.
Check out Data visualization for a detailed guideline on how to build widgets with data.
Tables are crucial components of our product interfaces, with primary tables offering various functionalities and secondary tables used to visualize smaller datasets.
For all the resources you need to start creating an interface for the Semrush suite, refer to the Figma libraries page.