Corner radius

Corner radii are an essential aspect of our brand, reflecting its character in every interface element. One of the main principles of our unique style is the contrast of shapes. To achieve this contrast, we use only two types of corner radii in our products.

1px for large interface blocks, cards, text fields, etc.

50% (1000px in Figma) for main actions.

Token name

Token value

S

1px

L

50%

The example below is part of the filter interface of the Scores group. Here, you can clearly see the combination of rounded corners in our interfaces. The drop-down lists and text fields have sharp corners, while the filter buttons are rounded. This fundamental difference in corner radius positively impacts user experience and helps users anticipate the behavior of various interface elements in our products.

Instrument

Genre

Artist

View count

Clear filters

Easy piano

Taylor Swift

Disney

The Beatles

Movies

Hamilton

Songbook

Instructional

The example below showcases different corner radius styles in components.

Label

Text

1px

Button

50%

Exception

For elements smaller than 8 pixels in height, we apply visual compensation. No corner radius is used for such objects.

0px

8px