Theme builder
Quickly customize and create new styles for our design system. Upload to code and build the awesome product!
Design tokens
Design tokens are a set of basic variables of a visual language. For example: margins, indentations, colours, typography, object styles, animation - presented as data.
The colour is represented as an RGB value, transparency as a number, animation as Bezier coordinates. The tokens are used instead of hard-coded values in order to easily manage the visual style and ensure consistency across all products.
Use in design
Design tokens are integrated into component libraries and Interactive Design UI kits. They cover various platforms colour themes, component states, and more. The names of colours and typography in our Figma libraries correspond to the name of the token in the repository. An example of simplifying the development: if you change the colour in the repository, it will change in all other products.
Theming
ll products use their own themes. Any theme inherits from the base theme but changes the values.
This approach has greatly facilitated the development of a dark interface theme. Dark theme tokens tone the colour tokens of the base theme.
Adaptability
Our tokens are implemented with adaptability in mind. Individual variables and classes have different values on different viewports. This approach makes it easier to work with adaptability because it transfers part of adaptability to the level of variables.
Colors
Basic colors
The basics. These colours are used everywhere, regardless of the type and scope of the product.
Display
HEX: 1E1E1E
RGB: 30 30 30
Body
HEX: 262626
RGB: 38 38 38
Bg
HEX: FFFFFF
RGB: 255 255 255
Accent colors of products
Each product has its own brand colour that broadcasts its identity. Such accent colours help separate different Interactive Design products from each other, convey the mood and positioning of the product. They are used in controls and additional accent elements. Note that colours are quite saturated and there should not be too many of them so that the interface does not suffer from accent excess. It is recommended to use the base accent colours of the design system in the interface, and the accent colours of the products in the graphics and primary elements.
Ultra blue / 900
HEX: 0E59EB
RGB: 14 89 235
Ultra blue / 800
HEX: 1364FF
RGB: 19 100 255
Ultra blue / 700
HEX: 3076FF
RGB: 48 118 255
Ultra blue / 600
HEX: 4F8BFF
RGB: 79 139 255
Ultra blue / 500
HEX: 6398FF
RGB: 99 152 255
Colors of third-party services
For buttons like ‘share in social media’ and other references to third-party services, it is recommended to use the native colours of those services. This helps the user to intuitively distinguish between the services.
Pink
HEX: FFCBC1
RGB: 255 203 193
Sunny yellow
HEX: FFF1A9
RGB: 255 241 169
Azure
HEX: 01E8BE
RGB: 1 232 190
Shadows
Shadows serve as a tool for displaying the level of elements along the z-axis. To display the height of the element, use the appropriate size - shadow style.
L
Shadow / L
x: 0, y: 10, Blur: 24px
M
Shadow / M
x: 0, y: 10, Blur: 18px
S
Shadow / S
x: 0, y: 3, Blur: 7px
Dimensions and indentation
The dot system is based on a dimensional grid in multiples of 4-5 dp, depending on the platform. The whole system of dimensions is built upon it. For Android, IOS, Windows and Mac OS it is 4dp, for Web interfaces 5 dp. The font part may have deviations from the system due to font rendering on various platforms.
Element sizes
Button
Button L height
sizeButtonLHeight
60px
Button L width
sizeButtonLWidth
Dynamic
Button M height
sizeButtonMHeight
55px
Button M width
sizeButtonMWidth
Dynamic
Button S height
sizeButtonSHeight
40px
Button S width
sizeButtonSWidth
Dynamic
Icon Button
Icon Button L height
sizeIconButtonLHeight
60px
Icon Button L width
sizeIconButtonLWidth
60px
Icon Button M height
sizeIconButtonMHeight
55px
Icon Button M width
sizeIconButtonMWidth
55px
Icon Button S height
sizeIconButtonSHeight
40px
Icon Button S width
sizeIconButtonSWidth
40px
Close Button
Close Button height
sizeCloseButtonHeight
50px
Close Button width
sizeCloseButtonWidth
50px
Play Button
Play Button height
sizePlayButtonHeight
80px
Play Button width
sizePlayButtonWidth
80px
Up Button
Up Button height
sizeUpButtonHeight
40px
Up Button width
sizeUpButtonWidth
40px
Empty Tab
Empty Tab L height
sizeEmptyTabLHeight
50px
Empty Tab L width
sizeEmptyTabLWidth
Dynamic
Empty Tab M height
sizeEmptyTabMHeight
40px
Empty Tab M width
sizeEmptyTabMWidth
Dynamic
Empty Tab S height
sizeEmptyTabSHeight
30px
Empty Tab S width
sizeEmptyTabSWidth
Dynamic
Line Tab
Line Tab L height
sizeLineTabLHeight
52px
Line Tab L width
sizeLineTabLWidth
Dynamic
Line Tab M height
sizeLineTabMHeight
42px
Line Tab M width
sizeLineTabMWidth
Dynamic
Line Tab S height
sizeLineTabSHeight
32px
Line Tab S width
sizeLineTabSWidth
Dynamic
Switch
Switch M height
sizeSwitchMHeight
28px
Switch M width
sizeSwitchMWidth
48px
Switch S height
sizeSwitchSHeight
22px
Switch S width
sizeSwitchSWidth
36px
Radio
Radio M height
sizeRadioMHeight
28px
Radio M width
sizeRadioMWidth
28px
Radio S height
sizeRadioSHeight
24px
Radio S width
sizeRadioSWidth
24px
Checkbox
Checkbox M height
sizeCheckboxMHeight
28px
Checkbox M width
sizeCheckboxMWidth
28px
Checkbox S height
sizeCheckboxSHeight
24px
Checkbox S width
sizeCheckboxSWidth
24px
Label Switch
Label Switch M height
sizeLabelSwitchMHeight
28px
Label Switch M width
sizeLabelSwitchMWidth
Dynamic
Label Switch S height
sizeLabelSwitchSHeight
22px
Label Switch S width
sizeLabelSwitchSWidth
Dynamic
Label Radio
Label Radio M height
sizeLabelRadioMHeight
28px
Label Radio M width
sizeLabelRadioMWidth
Dynamic
Label Radio S height
sizeLabelRadioSHeight
24px
Label Radio S width
sizeLabelRadioSWidth
Dynamic
Label Checkbox
L Checkbox M height
sizeLabelCheckboxMHeight
28px
L Checkbox M width
sizeLabelCheckboxMWidth
Dynamic
L Checkbox S height
sizeLabelCheckboxSHeight
24px
L Checkbox S width
sizeLabelCheckboxSWidth
Dynamic
Item tex
Item text L height
sizeItemtextLHeight
48px
Item text L width
sizeItemtextLWidth
Dynamic
Item text M height
sizeItemtextMHeight
42px
Item text M width
sizeItemtextMWidth
Dynamic
Item text S height
sizeItemtextSHeight
34px
Item text S width
sizeItemtextSWidth
Dynamic
List
List L height
sizeListMHeight
Dynamic
List L width
sizeListMWidth
Dynamic
List M height
sizeListSHeight
Dynamic
List M width
sizeListSWidth
Dynamic
Text area
Text area height
TextareaMHeight
Dynamic
Text area width
TextareaMWidth
Dynamic
Badge
Badge M height
sizeBadgeMHeight
30px
Badge M width
sizeBadgeMWidth
Dynamic
Badge S height
sizeBadgeSHeight
40px
Badge S width
sizeBadgeSWidth
Dynamic
Tag
Tag M height
sizeTagMHeight
40px
Tag M width
sizeTagMWidth
Dynamic
Tag S height
sizeTagSHeight
30px
Tag S width
sizeTagSWidth
Dynamic
Spacings
XXL
sizeSpacingXXL
120px
XL
sizeSpacingXL
80px
L
sizeSpacingL
60px
M
sizeSpacingM
32px
S
sizeSpacingS
20px
XS
sizeSpacingXS
8px
Typography
Usage-specific font sizes and weights, and vertical rhythm.
Headings
It is important to try to adhere to the semantics of headers and their hierarchy wherever possible (some pages do not have a clear hierarchy).
Bottom indents are hardcoded for headers in the text. If the header is used in a different context (for example, a pop-up header), these values can be overridden.
Headline
H1
Medium / 700
48pt
H2
Medium / 700
45pt
H3
Medium / 700
40pt
H4
Medium / 700
32pt
Subtitle
L
Medium / 700
32pt
M
Medium / 700
28pt
S
Medium / 700
24pt
Base styles
It is important to adhere to the semantics of text styles. The set includes all usage contexts that are regularly used in Interactive Design products.
Button
L
Medium / 700
20pt
M
Medium / 700
18pt
S
Medium / 700
16pt
Body
L
Regular / 500
20pt
M
Regular / 500
18pt
S
Regular / 500
16pt
Body-bold
L
Medium / 700
20pt
M
Medium / 700
18pt
S
Medium / 700
16pt
Body-italic
L
Italic / 500
20pt
M
Italic / 500
18pt
S
Italic / 500
16pt
Body-strikethrough
L
Regular / 500
20pt
M
Regular / 500
18pt
S
Regular / 500
16pt
Body-Link
L
Regular / 500
20pt
M
Regular / 500
18pt
S
Regular / 500
16pt
Caption
L
Regular / 500
16pt
M
Regular / 500
14pt
S
Regular / 500
12pt
Images
Standard sizes and proportions for all interface graphics: icons, illustrations, avatars, photos.
Icons
Icon area is an invisible square for each icon, which is used for small ascenders. It maintains the same size even for icons that are very different visually (for example, vertical and horizontal).
Illustrations
In addition to the listed formats, illustrations for promotional websites are possible at the discretion of the designer - their sizes are not standardized.
Avatars
Round standard-sized avatars are used.
L
sizeAvatarL
80px
M
sizeAvatarM
60px
S
sizeAvatarS
40px
XS
sizeAvatarXS
32px
