Тексты и заголовки

Для основных крупных заголовков используется гарнитура ALS Ekibastuz Light

АБВГДЕЁжзийклмнопрстуфхцчшщъыьэюя

абвгдеёжзийклмнопрстуфхцчшщъыьэюя

1234567890

Для второстепенных заголовков используется гарнитура ALS Ekibastuz Bold

АБВГДЕЁжзийклмнопрстуфхцчшщъыьэюя

абвгдеёжзийклмнопрстуфхцчшщъыьэюя

1234567890

Заголовок первого уровня H1.

Используется для названий форм и нумерации шагов

Десктоп

font: ALS Ekibastuz Light
size: 42px
color: #000000 / 0,0,0
line: 48px (111%)

Телефон

font: ALS Ekibastuz Light
size: 22px
color: #000000 / 0,0,0
line: 25px (114%)

Планшет

font: ALS Ekibastuz Light
size: 30px
color: #000000 / 0,0,0
line: 34px (114%)

Заголовок второго уровня H2.

Используется для указания названия подуслуги и располагаетсяпод названием услуги.

Десктоп

font: Arial regular

size: 15px

color: #535B63 / 83,91,99

line: 20px (134%)

Телефон

font: Arial regular

size: 15px

color: #535B63 / 83,91,99

line: 20px (134%)

Планшет

font: Arial regular

size: 15px

color: #535B63 / 83,91,99

line: 20px (134%)

Заголовок третьего уровня H3.

Используется для названий шагов формы.

Десктоп

font: ALS Ekibastuz Bold
size: 18px
color: #000000 / 0,0,0
line: 20px (112%)

Телефон

font: ALS Ekibastuz Bold
size: 17px
color: #000000 / 0,0,0
line: 22px (130%)

Планшет

font: ALS Ekibastuz Bold
size: 18px
color: #000000 / 0,0,0
line: 24px (134%)

Заголовок третьего уровня H4.

Используется для названий разделов шага или разделов вложенной формы. Обычно сопровождается чертой.

Десктоп

font: ALS Ekibastuz Bold
size: 15px
color: #000000 / 0,0,0
line: 20px (100%)

Телефон

font: ALS Ekibastuz Bold
size: 15px
color: #000000 / 0,0,0
line: 22px (147%)

Планшет

font: ALS Ekibastuz Bold
size: 15px
color: #000000 / 0,0,0
line: 22px (147%)

Уведомления - Service H

Уведомления — Service H.Используется для заголовка ленты уведомлений

Десктоп

font: Arial regular

size: 36px

color: #000000 / 0,0,0

line: 40px (134%)

Планшет

Не используется

Телефон

Не используется

Заголовок третьего уровня карточки услуг — Service H3.

Обозначение действий и названия подуслуги.

Десктоп

font: ALS Ekibastuz Bold
size: 24px
color: #000000 / 0,0,0
line: 27px (112%)

Телефон

font: ALS Ekibastuz Bold
size: 17px
color: #000000 / 0,0,0
line: 22px (130%)

Планшет

font: ALS Ekibastuz Bold
size: 18px
color: #000000 / 0,0,0
line: 24px (134%)

Заголовок третьего уровня карточки услуг — Service H4

Используется в названиях услуг на главной странице.

Десктоп

font: ALS Ekibastuz Bold
size: 22px
color: #000000 / 0,0,0
line: 26 px (118%)

Телефон

font: ALS Ekibastuz Bold
size: 17px
color: #000000 / 0,0,0
line: 21 px (118%)

Планшет

font: ALS Ekibastuz Bold
size: 18px
color: #000000 / 0,0,0
line: 21 px (114%)

Для наборного текста и текста элементов интерфейса используется Helvetica Neue. Для платформы Windows, используется шрифт Arial.

АБВГДЕЁжзийклмнопрстуфхцчшщъыьэюя

абвгдеёжзийклмнопрстуфхцчшщъыьэюя

1234567890

Для подзаголовков и выделения слов и словосочетаний используется Helvetica Neue Bold. Для платформы Windows, используется шрифт Arial Bold.

АБВГДЕЁжзийклмнопрстуфхцчшщъыьэюя

абвгдеёжзийклмнопрстуфхцчшщъыьэюя

1234567890

Обычный текст — Plain Text

Обычный текст — Plain text. Используется в радиокнопках, чекбоксах, списках и т.д. Начертание текста по умолчанию..

Десктоп

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 20px (134%)

Телефон

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 21px (140%)

Планшет

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 22px (147%)

Обычный полужирный текст — Plain Text Bold

Обычный текст — Plain text. Используется в радиокнопках, чекбоксах, списках и т.д. Начертание текста по умолчанию..

Десктоп

font: HelveticaNeue-Bold

size: 15px

color: #000000 / 0,0,0

line: 20px (134%)

Телефон

font: HelveticaNeue-Bold

size: 15px

color: #000000 / 0,0,0

line: 21px (140%)

Планшет

font: HelveticaNeue-Bold

size: 15px

color: #000000 / 0,0,0

line: 22px (147%)

Текст описания услуги на главной странице — Plain Text Main

Десктоп

font: HelveticaNeue

size: 16px

color: #535B63 / 83,91,99

line: 26px (163%)

Телефон

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 21px (140%)

Планшет

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 22px (147%)

Placeholder пустого поля — Form Text

Используется в качестве метки незаполненного поля.

Десктоп

font: HelveticaNeue

size: 16px

color: #535B63 / 83,91,99

line: 26px (163%)

Телефон

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 21px (140%)

Планшет

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 22px (147%)

Placeholder заполненного поля — Form Placeholder

Placeholder заполненного поля — Form Placeholder. Стоит над веденым текстом.

Десктоп

font: HelveticaNeue

size: 10px

color: #969696 / 150,150,150

line: 13px (130%)

Телефон

font: HelveticaNeue

size: 15px

color: #969696 / 150,150,150

line: 18px (120%)

Планшет

font: HelveticaNeue

size: 12px

color: #969696 / 150,150,150

line: 12px (100%)

Данные, введённые в Input — Form Text Active

Данные, введённые в Input — Form Text Active. Сопровождаются строкой «Form Placeholder».

Десктоп

font: HelveticaNeue

size: 17px

color: #000000 / 0,0,0

line: 19px (112%)

Телефон

font: HelveticaNeue

size: 15px

color: #969696 / 150,150,150

line: 18px (120%)

Планшет

font: HelveticaNeue

size: 18px

color: #000000 / 0,0,0

line: 20px (112%)

Данные, введённые в неактивный Input — Form Text Disabled

Данные, введённые в неактивный Input — Form Text Disabled. Сопровождаются строкой «Form Placeholder».

Десктоп

font: HelveticaNeue

size: 17px

color: #576472 / 87,100,114

line: 19px (112%)

Телефон

font: HelveticaNeue

size: 15px

color: #535B63 / 83,91,99

line: 18px (120%)

Планшет

font: HelveticaNeue

size: 18px

color: #535B63 / 83,91,99

line: 20px (112%)

Подсказка полей — Sub

Подсказка полей — Sub. В зависимости от статуса поля эта строка меняет цвет. Выравнивается по правой стороне.

Десктоп

font: HelveticaNeue

size: 12px

color: #4c4c4c / 76,76,76

line: 16px (117%)

Телефон

font: HelveticaNeue

size: 12px

color: #4c4c4c / 76,76,76

line: 16px (117%)

Планшет

font: HelveticaNeue

size: 12px

color: #4c4c4c / 76,76,76

line: 16px (117%)

Основной текст интерактивных подсказок и информеров — Text Help

Десктоп

font: HelveticaNeue

size: 14px

color: #4c4c4c / 76,76,76

line: 20px (117%)

Телефон

font: HelveticaNeue

size: 14px

color: #4c4c4c / 76,76,76

line: 20px (117%)

Планшет

font: HelveticaNeue

size: 14px

color: #4c4c4c / 76,76,76

line: 20px (117%)

Ссылка — Text Link. Обычная ссылка и Псевдоссылка

Ссылка — Text Link. Обычная ссылка и псевдоссылка.

Десктоп

font: HelveticaNeue

size: 15px

color: #0173C1

line: 20px (134%)

Телефон

font: HelveticaNeue

size: 15px

color: #0173C1

line: 21px (134%)

Планшет

font: HelveticaNeue

size: 15px

color: #0173C1

line: 22px (134%)

Хлебные крошки — Text Bread 1 \ Text Bread 2

Хлебные крошки — Text Bread. Применяют на десктопе. (Не используется на Телефонах и Планшетах)

Десктоп

font: HelveticaNeue

size: 15px

color: #4C4C4C

line: 20px (134%)

Дестктоп (Второе состояние)

font: HelveticaNeue

size: 13px

color: #A5AEB3

line: 21px (134%)

Заголовок текста карточек — Service Text Bold

Заголовок текста карточек — Service Text Bold. Используется в качестве заголовков информеров, уведомлений, а также заголовков таймлайна.

Десктоп

font: HelveticaNeue-Bold

size: 18px

color: #000000 / 0,0,0

line: 28px (156%)

Телефон

font: HelveticaNeue-Bold

size: 17px

color: #000000 / 0,0,0

line: 22px (130%)

Планшет

font: HelveticaNeue-Bold

size: 17px

color: #000000 / 0,0,0

line: 26px (153%)

Текст карточек — Service Plain Text

Текст карточек — Service Plain Text. Текст карточек, информеров, уведомлений и таймлайна

Десктоп

font: HelveticaNeue

size: 18px

color: #535B63 / 83,91,99

line: 28px (156%)

Телефон

font: HelveticaNeue-Bold

size: 15px (14px—уведомления)

color: #535B63 / 83,91,99

line: 21px (130%)

Планшет

font: HelveticaNeue-Bold

size: 17px

color: #535B63 / 83,91,99

line: 26px (153%)

Ссылка в заголовке уведомлений — Service Text Bold Link

Ссылка в заголовке уведомлений — Service Text Bold Link.

Десктоп

font: HelveticaNeue-Bold

size: 18px

color: #0173C1 / 1,115,193

line: 28px (156%)

Телефон

font: HelveticaNeue

size: 17px

color: #0173C1 / 1,115,193

line: 22px (130%)

Планшет

font: HelveticaNeue

size: 17px

color: #0173C1 / 1,115,193

line: 26px (153%)

Текст карточек — Service Plain Text

Текст карточек — Service Plain Text. Текст карточек, информеров, уведомлений и таймлайна

Десктоп

font: HelveticaNeue

size: 18px

color: #535B63 / 83,91,99

line: 28px (156%)

Телефон

font: HelveticaNeue-Bold

size: 15px (14px—уведомления)

color: #535B63 / 83,91,99

line: 22px (130%)

Планшет

font: HelveticaNeue-Bold

size: 17px

color: #535B63 / 83,91,99

line: 26px (153%)

Ссылка в тексте уведомлений — Service Text Link

Ссылка в тексте уведомлений — Service Plain Text Link

Десктоп

font: HelveticaNeue-Bold

size: 18px

color: #0173C1 / 1,115,193

line: 28px (156%)

Телефон

font: HelveticaNeue

size: 15px

color: #0173C1 / 1,115,193

line: 21px (130%)

Планшет

font: HelveticaNeue

size: 17px

color: #0173C1 / 1,115,193

line: 26px (153%)

Ссылка в заголовке уведомлений — Service Plain Text Link

Ссылка в заголовке уведомлений — Service Text Bold Link.

Десктоп

font: HelveticaNeue-Bold

size: 18px

color: #0173C1 / 1,115,193

line: 28px (156%)

Телефон

font: HelveticaNeue

size: 15px

color: #0173C1 / 1,115,193

line: 21px (130%)

Планшет

font: HelveticaNeue

size: 17px

color: #0173C1 / 1,115,193

line: 26px (153%)

Большая кнопка — Button Large Blue

Десктоп

font: HelveticaNeue

size: 24px

color: #FFFFFF / 255,255,255

line: 24px (100%)

Телефон

font: HelveticaNeue

size: 17px

color: #FFFFFF / 255,255,255

line: 17px (100%)

Планшет

font: HelveticaNeue

size: 18px

color: #FFFFFF / 255,255,255

line: 18px (100%)

Средняя кнопка действия — Button Medium Blue

Десктоп

font: HelveticaNeue

size: 17px

color: #FFFFFF / 255,255,255

line: 17px (100%)

Телефон

font: HelveticaNeue

size: 15px

color: #FFFFFF / 255,255,255

line: 15px (100%)

Планшет

font: HelveticaNeue

size: 16px

color: #FFFFFF / 255,255,255

line: 16px (100%)

Малая кнопка действия — Button Small Blue

Десктоп

font: HelveticaNeue

size: 14px

color: #FFFFFF / 255,255,255

line: 14px (100%)

Телефон

Не используется

Планшет

Не используется

Большая кнопка — Button Large

Десктоп

font: HelveticaNeue

size: 24px

color: #565656 / 86,86,86

line: 24px (100%)

Телефон

font: HelveticaNeue

size: 17px

color: #565656 / 86,86,86

line: 17px (100%)

Планшет

font: HelveticaNeue

size: 18px

color: #565656 / 86,86,86

line: 18px (100%)

Средняя второстепенная кнопка — Button Medium

Десктоп

font: HelveticaNeue

size: 17px

color: #565656 / 86,86,86

line: 17px (100%)

Телефон

font: HelveticaNeue

size: 15px

color: #565656 / 86,86,86

line: 15px (100%)

Планшет

font: HelveticaNeue

size: 16px

color: #565656 / 86,86,86

line: 16px (100%)

Малая второстепенная кнопка — Button Small

Десктоп

font: HelveticaNeue

size: 14px

color: #565656 / 86,86,86

line: 14px (100%)

Телефон

font: HelveticaNeue

size: 15px

color: #565656 / 86,86,86

line: 15px (100%)

Планшет

font: HelveticaNeue

size: 15px

color: #565656 / 86,86,86

line: 15px (100%)

Активная вкладка — Tab Active

Активная вкладка — Tab Active

Десктоп

font: HelveticaNeue Bold

size: 16px

color: #000000 / 0,0,0

line: 16px (100%)

Телефон

Не используется

Планшет

font: HelveticaNeue Bold

size: 15px

color: #000000 / 0,0,0

line: 15px (100%)

Невыбранная вкладка — Tab Inactive

Невыбранная вкладка — Tab Inactive

Десктоп

font: HelveticaNeue Bold

size: 16px

color: #0173c1 / 0,0,0

line: 16px (100%)

Телефон

Не используется

Планшет

font: HelveticaNeue Bold

size: 15px

color: #0173c1 / 0,0,0

line: 15px (100%)

Невыбранная вкладка — Tab Inactive Hover

Невыбранная вкладка — Tab Inactive Hover

Десктоп

font: HelveticaNeue Bold

size: 16px

color: #013e83/ 0,0,0

line: 16px (100%)

Телефон

Не используется

Планшет

font: HelveticaNeue Bold

size: 15px

color: #013e83 / 0,0,0

line: 15px (100%)

Название загружаемого файла — File Uploader Active

Название загружаемого файла и дата нового события на главной — File Uploader Active

Десктоп

font: HelveticaNeue-Bold

size: 14px

color: #A5AEB3 / 165,174,179

line: 14px (100%)

Телефон

font: HelveticaNeue-Bold

size: 15px

color: #A5AEB3 / 165,174,179

line: 15px (100%)

Планшет

font: HelveticaNeue-Bold

size: 16px

color: #A5AEB3 / 165,174,179

line: 16px (100%)

Название загруженного файла — File Uploader Done

Название загруженного файла — File Uploader Done

Десктоп

font: HelveticaNeue-Bold

size: 14px

color: #000000 / 165,174,179

line: 14px (100%)

Телефон

font: HelveticaNeue-Bold

size: 15px

color: #000000 / 165,174,179

line: 15px (100%)

Планшет

font: HelveticaNeue-Bold

size: 16px

color: #000000 / 165,174,179

line: 16px (100%)