Чат

Бабблы
Десктопная версия
Мобильная версия

Бабблы

Мой баббл#FF8C00
rgb (255, 140, 0)
Ответный баббл#E6E6E6
rgb (230, 230, 230)

Стили текста:
— Bubble M (My)  — Body M 500 (Normal) белый;
— Bubble M (Not mine)  — Body M 300 (Normal) черный; 
— Bubble S (My) — Body S 300 (Normal) белый;
— Bubble S (Not mine) — Body S 300 (Normal) серый;

Десктопная версия

Виджет чата вначале появляется в разделе истории. После того, как пользователь нажал на кнопку «Написать», чат открывается в отдельном модальном окне.

Виджет

Включает в себя:
заголовок уровня H5;
— пояснение Body S 300 (Normal) серое;
—баббл в размере Bubble S;
— белый разделитель толщиной в 1px;
Simple button в размере Minor.

Модальное окно

Выравнивается по центру экрана. Располагается на белом фоне #FFF с непрозрачностью 96%, rgba (255, 255, 255, 96).

Цвет фона в чате — #F5F5F5, rgb (245, 245, 245).

Включает в себя:
заголовок уровня H4;
— пояснение Body S 300 (Normal) серое;
— баббл в размере Bubble M;
— дату переписки Body S 300 (Normal) серую;
— время отправки Body S 300 (Normal) серое;
— стандартное поле ввода;
Brand button с иконкой в размере 40×40px.

К модальному окну добавляется тень уровня Z 4,
К сендбару и шапке — тень уровня Z 2.

Мобильная версия

Виджет чата вначале появляется в разделе истории. После того, как пользователь нажал на кнопку «Написать», чат открывается в отдельном модальном окне.

Виджет

Включает в себя:
заголовок уровня H4 (Mobile);
— пояснение Body S 300 (Normal) серое;
— баббл в размере Bubble S;
Simple button (Mobile) в размере Accent.

Модальное окно

Включает в себя:
— заголовок шапки Body L 500 (Compact) черный;
— пояснение Body S 300 (Normal) серое;
— баббл в размере Bubble S;
— дату переписки Body S 300 (Normal) серую;
— время отправки Body S 300 (Normal) серое;
— плейсхолдер Body M 300 (Normal) серый;
— введенный текст Body M 500 (Normal) черный;
— иконку 24×24px.

К сендбару и шапке добавляется тень уровня Z 1.

Далее «Чекбоксы»