How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogControl
Control is a component that helps the user select an option.
Segmented control
Behaviour
This control can be used in forms or navigation. Only one button is selected here.
Segmented control comes in small and medium size, with or without icon.
Specs
Segmented control has maximum 6 tabs.
The component size depends on the layout.
Small control without icon
For 1-5 tabs, there is a 12 px padding; for 6 tabs, there is a 6 px padding.
Medium control without icon
For 1-5 tabs, there is a 9 px padding; for 6 tabs, there is a 4 px padding.
Important:Select the text for the 6 options carefully. It is better to have approximately the same amount of text in each tab for the component to work well.
Note that the selected tab has a shadow.
Small control with icon
Medium control with icon
There’s no paddings; the icon is centered.
Important:The selected icon must have a filled icon style. If icons are included in the control, all items should have an icon.
Note that the selected tab has a shadow.
Control
Behaviour
Control buttons turn features on or off—recommended for use within List Cells.
Checkbox
The checkbox has the following types:
Unchecked enabled checkbox Checked enabled checkbox Unchecked disabled checkbox Checked disabled checkbox
Important:The component size is fixed.
Radio
The radio button has the following types:
Unchecked enabled radio button Checked enabled radio button Unchecked disabled radio button Checked disabled radio button
Important:The component size is fixed.
Switch
The switch button has the following types:
Unchecked enabled switch Checked enabled switch Unchecked disabled switch Checked disabled switch
Important:The component size is fixed.
Tabs
Behaviour
In tabs, only one button is selected. It can be used in forms or navigation. We recommend using up to 8 tabs only in the Sports section if necessary if other navigation patterns are not suitable.
Specs
We recommend using up to 8 tabs.
Recommended length: Max: 15 characters Optimal: 8 characters
The component size depends on the layout. For example, the button size depends on the amount of text.
Tab without icon
/w=3840,quality=90,fit=scale-down)
Tab with icon
/w=3840,quality=90,fit=scale-down){kind=icon}
Important:The icon size is 24x24 px. Any icons or pictures from the kit can be used here.
Chips
Specs
We recommend using up to 8 tabs.
Recommended length: Max: 15 characters Optimal: 8 characters
The component size depends on the layout. For example, the button size depends on the amount of text.
Horizontal scroll type
Chip without icon
/w=3840,quality=90,fit=scale-down)
Chip with icon
/w=3840,quality=90,fit=scale-down){kind=icon}
Important:The icon size is 24x24 px. Any icons or pictures from the kit can be used here.
Vertical scroll type
Chip without icon
Chip with icon
/w=3840,quality=90,fit=scale-down)
Important:The icon size is 24x24 px. Any icons or pictures from the kit can be used here.
