semrush · j-mnizhek · Feb 6, 2026 · Feb 6, 2026
diff --git a/website/docs/style/design-tokens/design-tokens-usage-development.md b/website/docs/style/design-tokens/design-tokens-usage-development.md
@@ -5,17 +5,15 @@ tabs: Tokens('design-tokens'), Usage in design('design-tokens-usage'), Usage in
 
 ## Global theme
 
-Design tokens are ideal for global theming because they help ensure consistent visual choices and behavior across the design system. They also make it easier to update and maintain the product, as changes can be made in a centralized way.
+Design tokens help ensure consistent visual choices and behavior across the design system. They also make it easier to update and maintain the product, as changes can be made in a centralized way.
 
-**Why design tokens should be used only for global theming:**
+<!-- **Why design tokens should be used only for global theming:**
 
-- By using design tokens only for global theming, you can ensure that the design system remains flexible and adaptable to a change. As the design system evolves, updates can be made to the design tokens, which will then be reflected in all relevant places throughout the design system.
-- Design tokens add a centralized approach to updating the design system, making it easier to ensure that all updates are made in a controlled and deliberate manner.
-
-To sum up, using design tokens only for global theming is a best practice because it promotes consistency, maintainability, modularity, and adaptability in the design system.
+- By using design tokens for global theming, you can ensure that the design system remains flexible and adaptable to a change. As the design system evolves, updates can be made to the design tokens, which will then be reflected in all relevant places throughout the design system.
+- Design tokens add a centralized approach to updating the design system look and feel, making it easier to ensure that all updates are made in a controlled and deliberate manner. -->
 
 ::: tip
-If you can't find the token you are looking for, then please double-check the existing ones. If it is really missing, you can drop us a line with a request to add a new token.
+If you can't find the token you are looking for, we recommend you to double-check the existing ones. If it's really missing, you can drop us a line with a request to add a new entity.
 :::
 
 ### How to apply theme globally

diff --git a/website/docs/style/design-tokens/design-tokens-usage.md b/website/docs/style/design-tokens/design-tokens-usage.md
@@ -14,14 +14,14 @@ For the Semrush developers and designers we have a couple of onboarding files. R
 
 - [Themization workshop file](https://www.figma.com/design/7dJaaWaqoTKdeGU4Pq02rz/Themization-workshop?node-id=0-1&node-type=canvas&t=cC709O9aHUP7lTRL-11) which you can duplicate and play with the examples
 - [Brief tokens explanation](https://www.figma.com/design/1TV7YbEL3FaV0znCkQtsrC/Themes'-playground-%26-tutorial-%F0%9F%8E%93?node-id=14802-111796&node-type=frame&t=qOTf0DSn0M8p63of-11) from our Theme's playground file
-- [Big presentation on design tokens](https://www.figma.com/design/DfhEsCc7j9c1XTpi7mwHwt/Design-tokens-(for-designers)?node-id=0-1&node-type=canvas&t=2zFBWvB8qwRtpivO-11)
+- [Presentation on design tokens](https://www.figma.com/design/DfhEsCc7j9c1XTpi7mwHwt/Design-tokens-(for-designers)?node-id=0-1&node-type=canvas&t=2zFBWvB8qwRtpivO-11)
 :::
 
 ## Token sets
 
 There are base and semantic token sets in our design system.
 
-**Base tokens** represent the theme's global palette. Changing their values will affect semantic tokens. Therefore, by changing the palette, you can create new themes. For creating new palette you can use tools like [Huetone](https://huetone.ardov.me/).
+**Base tokens** represent the theme's global palette. Changing their values will affect semantic tokens. Therefore, by changing the palette, you can create new themes. For creating new palette and meet accessibility guidelines, use tools like [Huetone](https://huetone.ardov.me/).
 
 ![](static/base-tokens.png)
 

diff --git a/website/docs/style/design-tokens/design-tokens.md b/website/docs/style/design-tokens/design-tokens.md
@@ -14,8 +14,8 @@
 
 Intergalactic Design System has:
 
-- set of base tokens that define a base palette;
-- set of semantic tokens which are applied across all components and even the chart library.
+- **set of base tokens** that define a base palette;
+- **set of semantic tokens** which are applied across all components and even the chart library.
 
 These sets form the default theme of the design system.
 
@@ -25,7 +25,7 @@
 
 ## Stylelint plugin
 
-The stylelint plugin help developers avoid mistakes in design token names. It's part of [intergalactic npm package](https://www.npmjs.com/package/intergalactic) but also might be installed as [a separate package](https://www.npmjs.com/package/@semcore/stylelint-plugin).
+The stylelint plugin helps developers to avoid mistakes in the design token names. It's part of [intergalactic npm package](https://www.npmjs.com/package/intergalactic) but also might be installed as [a separate package](https://www.npmjs.com/package/@semcore/stylelint-plugin).
 
 ```json
 // .stylelintrc.json
@@ -47,7 +47,7 @@
 
 ## Base tokens (palette)
 
-The list of base tokens is our palette. It was built with [Huetone tool](https://huetone.ardov.me/) (learn more about the tool in the [Twitter thread](https://twitter.com/ardovalexey/status/1447329411678806023)).
+The list of base tokens represents our palette. It was built with [Huetone tool](https://huetone.ardov.me/) (learn more about the tool in the [Twitter thread](https://twitter.com/ardovalexey/status/1447329411678806023)).
 
 Shades of the same color have a value ranging from 50 to 800, depending on its tone. Each shade has recommendations for use based on [Huetone's contrast ratio calculation](https://huetone.ardov.me/).
 
@@ -67,7 +67,7 @@
 
 ## Semantic tokens
 
-It is a list of tokens for components and charts for the default Intergalactic theme.
+It's a list of tokens for components and charts for the default Intergalactic theme.
 
 Semantic tokens include tokens for:
 
@@ -78,7 +78,7 @@
 - box-shadows;
 - border-radius.
 
-To learn more about the tokens names see [Token naming structure section](/style/design-tokens/design-tokens-usage#token-naming-structure).
+To learn more about the tokens names, see [Token naming structure section](/style/design-tokens/design-tokens-usage#token-naming-structure).
 
 ::: react-view
 
@@ -96,22 +96,24 @@
 
 ## Themes
 
-If you need to build a product that differs in style from our default theme, you can create a custom theme for it.
+If you need to build a product that differs in style and tone of voice from our default theme, you can create a custom theme.
 
-Theme is a set of tokens represented in CSS variables that has different from the default sets values. Values can be changed for base, semantic, or both sets. You can redefine them globally or only for a specific subtree of React app. Refer to [Usage in development](/style/design-tokens/design-tokens-usage-development).
+Theme is a set of tokens represented in CSS variables that has different from the default sets values. Values can be changed for base, semantic, or both sets. You can redefine them globally or only for a specific subtree of React app. Refer to the [Usage in development](/style/design-tokens/design-tokens-usage-development).
 
 ## Creating new theme
 
 ### Step one. Design new theme
 
 Creating a theme usually starts with design. In fact, this is the most time-consuming part.
 
-**We recommend you using the native Figma variables (tokens) functionality**. But if you need more functionality that Figma doesn't have at the moment, use [Tokens Studio plugin for Figma](https://www.figma.com/community/plugin/843461159747178978). It's one of the most powerful tools for managing tokens, linking styles between the code and Figma files.
+**We recommend you using the native Figma variables (tokens) functionality**. Refer to the following tutorials, for the detailed process for creating a new theme. Semrush designers and developers can use the following tutorials:
 
-Refer to the following tutorials, for the detailed process for creating a new theme:
+- [Tutorial for Figma tokens](https://www.figma.com/design/1TV7YbEL3FaV0znCkQtsrC/Themes'-playground-%26-tutorial-%F0%9F%8E%93?node-id=13125-73031&node-type=canvas&t=qOTf0DSn0M8p63of-11)
+- [Tutorial for Tokens Studio](https://www.figma.com/design/K1s6wF8NTH3uNHvjkn6hjc/Themes'-playground-%26-tutorial-%F0%9F%8E%93?m=auto&t=jHrLhhOMB32IMklB-6)
 
-- Semrush designers and developers can use two tutorials, [tutorial for Figma tokens](https://www.figma.com/design/1TV7YbEL3FaV0znCkQtsrC/Themes'-playground-%26-tutorial-%F0%9F%8E%93?node-id=13125-73031&node-type=canvas&t=qOTf0DSn0M8p63of-11) and [tutorial for Tokens Studio](https://www.figma.com/design/K1s6wF8NTH3uNHvjkn6hjc/Themes'-playground-%26-tutorial-%F0%9F%8E%93?m=auto&t=jHrLhhOMB32IMklB-6)
-- Other users can use the [tutorial for Tokens Studio](https://www.figma.com/community/file/1274028958101796491/semrush-design-tokens)
+In case if you need more functionality that Figma doesn't have at the moment, use [Tokens Studio plugin for Figma](https://www.figma.com/community/plugin/843461159747178978). It's one of the most powerful tools for managing tokens, linking styles between the code and Figma files.
+
+For non-Semrush employees we have a [tutorial for Tokens Studio](https://www.figma.com/community/file/1274028958101796491/semrush-design-tokens).
 
 ::: tip
 **In cases where different styles are needed for just one component or a part of the design system:**

diff --git a/website/docs/style/design-tokens/static/base-tokens.png b/website/docs/style/design-tokens/static/base-tokens.png
diff --git a/website/docs/style/design-tokens/static/semantic-tokens.png b/website/docs/style/design-tokens/static/semantic-tokens.png
diff --git a/website/docs/style/design-tokens/static/token-description.png b/website/docs/style/design-tokens/static/token-description.png
diff --git a/website/docs/style/design-tokens/static/token-naming.png b/website/docs/style/design-tokens/static/token-naming.png
diff --git a/website/docs/style/design-tokens/static/token-usage1.png b/website/docs/style/design-tokens/static/token-usage1.png
diff --git a/website/docs/style/design-tokens/static/token-usage2.png b/website/docs/style/design-tokens/static/token-usage2.png
diff --git a/website/docs/style/design-tokens/static/token-usage3.png b/website/docs/style/design-tokens/static/token-usage3.png
diff --git a/website/docs/style/design-tokens/static/token-usage4.png b/website/docs/style/design-tokens/static/token-usage4.png
diff --git a/website/docs/style/icon/static/end-points-gaps.png b/website/docs/style/icon/static/end-points-gaps.png
diff --git a/website/docs/style/icon/static/icon-tags.png b/website/docs/style/icon/static/icon-tags.png
diff --git a/website/docs/style/icon/static/image.png b/website/docs/style/icon/static/image.png
diff --git a/website/docs/style/icon/static/inner-elements.png b/website/docs/style/icon/static/inner-elements.png
diff --git a/website/docs/style/icon/static/name-color.png b/website/docs/style/icon/static/name-color.png
diff --git a/website/docs/style/icon/static/outline-flattern.png b/website/docs/style/icon/static/outline-flattern.png
diff --git a/website/docs/style/icon/static/perspective.png b/website/docs/style/icon/static/perspective.png
diff --git a/website/docs/style/icon/static/pixel-perfection.png b/website/docs/style/icon/static/pixel-perfection.png
diff --git a/website/docs/style/icon/static/shapes.png b/website/docs/style/icon/static/shapes.png
diff --git a/website/docs/style/icon/static/sizing.png b/website/docs/style/icon/static/sizing.png
diff --git a/website/docs/style/icon/static/strikethrough.png b/website/docs/style/icon/static/strikethrough.png
diff --git a/website/docs/style/icon/static/stroke-alignment-corners.png b/website/docs/style/icon/static/stroke-alignment-corners.png
diff --git a/website/docs/style/icon/static/variations.png b/website/docs/style/icon/static/variations.png
diff --git a/website/docs/style/icon/static/viewbox.png b/website/docs/style/icon/static/viewbox.png
diff --git a/website/docs/style/illustration/static/large-size.png b/website/docs/style/illustration/static/large-size.png
diff --git a/website/docs/style/illustration/static/medium-size2.png b/website/docs/style/illustration/static/medium-size2.png
diff --git a/website/docs/style/illustration/static/small-size.png b/website/docs/style/illustration/static/small-size.png
diff --git a/website/docs/style/typography/static/blockquote-paddings.png b/website/docs/style/typography/static/blockquote-paddings.png
diff --git a/website/docs/style/typography/static/h1-p.png b/website/docs/style/typography/static/h1-p.png
diff --git a/website/docs/style/typography/static/h2-p.png b/website/docs/style/typography/static/h2-p.png
diff --git a/website/docs/style/typography/static/h3-p.png b/website/docs/style/typography/static/h3-p.png
diff --git a/website/docs/style/typography/static/h4-p.png b/website/docs/style/typography/static/h4-p.png
diff --git a/website/docs/style/typography/static/h5-p.png b/website/docs/style/typography/static/h5-p.png
diff --git a/website/docs/style/typography/static/h6-p.png b/website/docs/style/typography/static/h6-p.png
diff --git a/website/docs/style/typography/static/list-margins.png b/website/docs/style/typography/static/list-margins.png
diff --git a/website/docs/style/typography/static/metric-200.png b/website/docs/style/typography/static/metric-200.png
diff --git a/website/docs/style/typography/static/metric-300.png b/website/docs/style/typography/static/metric-300.png
diff --git a/website/docs/style/typography/static/metric-400.png b/website/docs/style/typography/static/metric-400.png
diff --git a/website/docs/style/typography/static/metric-500.png b/website/docs/style/typography/static/metric-500.png
diff --git a/website/docs/style/typography/static/metric-600.png b/website/docs/style/typography/static/metric-600.png
diff --git a/website/docs/style/typography/static/paragraph_margins.png b/website/docs/style/typography/static/paragraph_margins.png
diff --git a/website/docs/style/typography/static/second-level.png b/website/docs/style/typography/static/second-level.png