Introduction

Principles

Great data visualization is key to our UI, so handle charts and tables with care.

Our core principles for Semrush interfaces are:

1. The interface should help users, not just look clever or cool.
2. Simplicity matters. Keep things straightforward.
3. Data is the most important part of the interface.

Design tokens

The Intergalactic Design System uses two sets of design tokens: basic and semantic. Basic tokens set the main colors, while semantic tokens build on them. Changing the basic tokens lets you create new themes.

Check out Design tokens to learn more about how they work and how to use them.

TIP

You can use tools like Huetone to create new color palettes.

Typography

The main font in the Intergalactic Design System is Inter. For better readability, we recommend 14px and 16px font sizes for body text and key messages.

Check out Typography for more details on our typography guidelines.

Breakpoints

While most of our products are designed for desktop data visualization, we suggest using the following main breakpoints for adaptivity:

Breakpoints tokens

Token	Value	Usage
--screen-extra-small	320px	The smallest devices. Don't forget them.
--screen-small	768px	Phones and tablets.
--screen-medium	1200px	Big tablets and desktop devices.

Refer to Breakpoints and Grid and page layout for more information.

Grid system

Our product interfaces use a 12-column grid with a 24px gutter. Some products use a flexible grid, while others use a fixed grid, depending on their needs. The standard design frame width for product pages is 1440px.

Check out Grid and page layout for more details and code examples.

Charts

Charts are an important part of our interfaces, and we use different types to display data. Before picking a chart, make sure to follow the guidelines for its proper use.

Visit the Charts showcase to select the right chart type based on its purpose.

Tables

Tables are key parts of our product interfaces. Primary tables have more features, while secondary tables are used for smaller data sets.

Since there are many use cases and edge cases, we have separate guidelines for DataTable, Table controls and Table states. We strongly recommend reviewing all of them.

Resources

For all the resources you need to start creating an interface for the Semrush products, refer to the Figma libraries page.