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