Tokens 1.23.1
Под токенами Дизайн-платформы мы рассматриваем универсальные значения стилей элементов интерфейса: цвета, теней, типографики, интервалов, иконок и т.д.. Для каждой платформы мы преобразуем имена и значения токенов в зависимости от требуемого платформой формата.
Почему токены?
Использование токенов упрощает и ускоряет процесс разработки и поддержки продукта за счет автоматического применения изменений в коде при изменении дизайна. При этом у разработчика сохраняется свобода выбора технологий реализации продукта. Кроме того, использование токенов обеспечивает соответствие разных продуктов утвержденной Дизайн-платформе.
SCSS
CSS
JS
Android
iOS
Color
Цвет является ключом к выражению и универсальному восприятию продуктов бренда билайн, а также играет важную роль в передаче определенного смысла через дизайн. В нашей дизайн-платформе мы используем цветовые токены для визуальной передачи информации и успешного взаимодействия с пользователем.
Const
Background
Token name
Pixso name
Value
Example
$color-background-brand
Брендовый желтый
Const Background/Brand
#fdd835
$color-background-brand-hover
Const Background/Brand hover
#fdc435
$color-background-brand-pressed
Const Background/Brand pressed
#fdb435
$color-background-backdrop
Стиль затемнения интерфейса при появлении модальных окон и side sheet modal
Const Background/Backdrop
rgba(0, 0, 0, 0.48)
$color-background-white
Const Background/White
#ffffff
Divider
Token name
Pixso name
Value
Example
$color-divider-grey
Const Divider/Grey
rgba(25, 28, 52, 0.12)
Gradient
Token name
Pixso name
Value
Example
$color-gradient-magma
Const Gradient/Magma
linear-gradient(-46deg, #1a73e8 0%, #bc00b8 49.44%, #f55555 100%)
$color-gradient-lazurit
Const Gradient/Lazurit
linear-gradient(76deg, #fa1c8c 0%, #527ce7 46.89%, #2ebacf 100%)
$color-gradient-ocean
Const Gradient/Ocean
linear-gradient(85deg, #6137cc 0%, #00b2ff 43.57%, #7effc3 100%)
$color-gradient-oil-radial
Const Gradient/Oil radial
radial-gradient(140.01% 127.68% at 18.75% 3%, #feca48 0%, #ff7d5d 21.17%, #b732a2 45.13%, #621a9f 71.18%, #030013 100%)
$color-gradient-oil-linear
Const Gradient/Oil linear
linear-gradient(90deg, #feca48 0%, #ff7d5d 19.46%, #b732a2 43.54%, #621a9f 70.39%, #030013 100%)
Opacity
Token name
Pixso name
Value
Example
$color-opacity-disabled
Const Opacity/Disabled
0.48
Text
Token name
Pixso name
Value
Example
$color-text-black-active
Активный текст, не меняется при смене темы. Используется на цветных фонах из раздела Const Background
Const Text/Black active
rgba(9, 11, 22, 0.94)
$color-text-grey-inactive
Const Text/Grey inactive
rgba(25, 28, 52, 0.7)
$color-text-grey-disabled
Const Text/Grey disabled
rgba(25, 28, 52, 0.48)
$color-text-white-inverse
Активный текст, не меняется при смене темы.
Const Text/White inverse
#ffffff
$color-text-dark-active
Используется в элементах с цветами фона Brand или White (не меняющимися в зависимости от темы)
Const Text/Dark active
rgba(0, 0, 0, 0.87)
$color-text-dark-inactive
Используется в элементах с цветами фона Brand или White (не меняющимися в зависимости от темы)
Const Text/Dark inactive
rgba(0, 0, 0, 0.6)
$color-text-dark-disabled
Используется в элементах с цветами фона Brand или White (не меняющимися в зависимости от темы)
Const Text/Dark disabled
rgba(0, 0, 0, 0.38)
$color-text-light-active
Используется в элементах с градиентными цветами фона (не меняющимися в зависимости от темы)
Const Text/Light active
rgba(255, 255, 255, 0.87)
$color-text-light-inactive
Используется в элементах с градиентными цветами фона (не меняющимися в зависимости от темы)
Const Text/Light inactive
rgba(255, 255, 255, 0.6)
$color-text-light-disabled
Используется в элементах с градиентными цветами фона (не меняющимися в зависимости от темы)
Const Text/Light disabled
rgba(255, 255, 255, 0.38)
Light
Accent
Token name
Pixso name
Value
Example
$color-accent-teal
Используется для акцентных элементов
Light Accent/Teal
#00adc7
$color-accent-teal-background
Используется для фонов в баннерах, карточках и inlline allert
Light Accent/Teal background
#e0f7fb
$color-accent-purple
Используется для акцентных элементов
Light Accent/Purple
#7e00ed
$color-accent-purple-background
Используется для фонов в баннерах, карточках и inlline allert
Light Accent/Purple background
#f3e7fe
$color-accent-magenta
Используется для акцентных элементов
Light Accent/Magenta
#bc00b8
$color-accent-magenta-background
Используется для фонов в баннерах, карточках и inlline allert
Light Accent/Magenta background
#fae4f7
$color-accent-aquamarine
Используется для акцентных элементов
Light Accent/Aquamarine
#1ebeaa
$color-accent-aquamarine-background
Используется для фонов в баннерах, карточках и inlline allert
Light Accent/Aquamarine background
#e1f5f0
$color-accent-lemon-background
Используется для фонов в баннерах, карточках и inlline allert. *Оттенок наследуется от цвета Brand
Light Accent/Lemon background
#fff7d7
Background
Token name
Pixso name
Value
Example
$color-background-base
Дефолтный цвет фона
Light Background/Base
#ffffff
$color-background-base-hover
Light Background/Base hover
rgba(25, 28, 52, 0.08)
$color-background-base-focused
Light Background/Base focused
rgba(25, 28, 52, 0.12)
$color-background-base-pressed
Light Background/Base pressed
rgba(25, 28, 52, 0.12)
$color-background-base-dragged
Light Background/Base dragged
rgba(25, 28, 52, 0.08)
$color-background-base-selected
Light Background/Base selected
rgba(25, 28, 52, 0.05)
$color-background-base-activated
Light Background/Base activated
rgba(0, 0, 0, 0.12)
$color-background-inverse
Light Background/Inverse
#121212
$color-background-low
Light Background/Low
#ffffff
$color-background-medium
Light Background/Medium
#ffffff
$color-background-high
Light Background/High
#ffffff
$color-background-secondary
Фон для продуктов Мой билайн
Light Background/Secondary
#f9f9f9
Border
Token name
Pixso name
Value
Example
$color-border
Для обозначения границы карточек и контроллов
Light Border/undefined
rgba(25, 28, 52, 0.18)
$color-border-focused
Для компонентов с обводкой, в состоянии Focused
Light Border/Focused
#202123
$color-border-focus
Light Border/Focus
#212121
$color-border-error
Для обводки контроллов в состоянии Error
Light Border/Error
#ff5555
Button
Token name
Pixso name
Value
Example
$color-button-plain
Для текста в кнопках Plain
Light Button/Plain
#1a73e8
$color-button-plain-background-hover
Для фона кнопки Plain
Light Button/Plain background hover
rgba(26, 115, 232, 0.08)
$color-button-plain-background-pressed
Для фона кнопки Plain
Light Button/Plain background pressed
rgba(26, 115, 232, 0.12)
$color-button-overlay-background
Для фона кнопки Overlay
Light Button/Overlay background
#141622
$color-button-overlay-background-hover
Для фона кнопки Overlay
Light Button/Overlay background hover
#1f212d
$color-button-overlay-background-pressed
Для фона кнопки Overlay
Light Button/Overlay background pressed
#2a2c39
Chart
Token name
Pixso name
Value
Example
$color-chart-grey
Для диаграмм и графиков
Light Chart/Grey
#d4d4d9
$color-chart-grey-active
Для диаграмм и графиков. Активное состояние
Light Chart/Grey active
#b6b7bf
$color-chart-red
Для диаграмм и графиков
Light Chart/Red
#ffb0b1
$color-chart-red-active
Для диаграмм и графиков. Активное состояние
Light Chart/Red active
#ff9193
$color-chart-orange
Для диаграмм и графиков
Light Chart/Orange
#ffd086
$color-chart-orange-active
Для диаграмм и графиков. Активное состояние
Light Chart/Orange active
#ffbd55
$color-chart-green
Для диаграмм и графиков
Light Chart/Green
#a0dbae
$color-chart-green-active
Для диаграмм и графиков. Активное состояние
Light Chart/Green active
#78ce8e
$color-chart-blue
Для диаграмм и графиков
Light Chart/Blue
#8dcaff
$color-chart-blue-active
Для диаграмм и графиков. Активное состояние
Light Chart/Blue active
#5cb5ff
$color-chart-teal
Для диаграмм и графиков
Light Chart/Teal
#80deef
$color-chart-teal-active
Для диаграмм и графиков. Активное состояние
Light Chart/Teal active
#4dd0e7
$color-chart-magenta
Для диаграмм и графиков
Light Chart/Magenta
#f2bceb
$color-chart-magenta-active
Для диаграмм и графиков. Активное состояние
Light Chart/Magenta active
#e98dde
$color-chart-purple
Для диаграмм и графиков
Light Chart/Purple
#c89afa
$color-chart-purple-active
Для диаграмм и графиков. Активное состояние
Light Chart/Purple active
#b16cf9
$color-chart-aquamarine
Для диаграмм и графиков
Light Chart/Aquamarine
#8fd9cb
$color-chart-aquamarine-active
Для диаграмм и графиков. Активное состояние
Light Chart/Aquamarine active
#63ccba
$color-chart-yellow
Для диаграмм и графиков
Light Chart/Yellow
#fff0a5
$color-chart-yellow-active
Для диаграмм и графиков. Активное состояние
Light Chart/Yellow active
#fee262
$color-chart-saphire
Для диаграмм и графиков
Light Chart/Saphire
#a1a4e8
$color-chart-saphire-active
Для диаграмм и графиков. Активное состояние
Light Chart/Saphire active
#7e87df
Control
Цвета, специфичные для контролов форм: Textfield, Textarea, Selection Control
Token name
Pixso name
Value
Example
$color-control-background
Light Control/Background
rgba(25, 28, 52, 0.1)
$color-control-background-hover
Light Control/Background hover
rgba(25, 28, 52, 0.14)
$color-control-background-pressed
Light Control/Background pressed
rgba(25, 28, 52, 0.24)
$color-control-background-error
Light Control/Background error
rgba(255, 85, 85, 0.08)
Divider
Token name
Pixso name
Value
Example
$color-divider
Для полос-раделителей. Не подходит для обводок карточек и контроллов
Light Divider/undefined
rgba(25, 28, 52, 0.12)
Gradient
Token name
Pixso name
Value
Example
$color-gradient-right
Light Gradient/Right
linear-gradient(-90deg, #ffffff00 0%, #ffffff 33.71%)
$color-gradient-left
Light Gradient/Left
linear-gradient(-90deg, #ffffff 64.58%, #ffffff00 100%)
Status
Цвета, отвечающие за передачу статусного состояния элемента.
Token name
Pixso name
Value
Example
$color-status-error
Для подчеркивания статуса компонента. Состояние ошибки
Light Status/Error
#ff5555
$color-status-error-background
Используется для фонов в баннерах, карточках и inlline allert
Light Status/Error background
#ffecef
$color-status-warning
Для подчеркивания статуса компонента. Состояние предупреждения
Light Status/Warning
#ff9419
$color-status-warning-background
Используется для фонов в баннерах, карточках и inlline allert
Light Status/Warning background
#fff4e1
$color-status-success
Для подчеркивания статуса компонента. Состояние успешности
Light Status/Success
#2ca853
$color-status-success-background
Используется для фонов в баннерах, карточках и inlline allert
Light Status/Success background
#e7f6eb
$color-status-info
Для подчеркивания статуса компонента. Состояние информирования
Light Status/Info
#1a73e8
$color-status-info-background
Используется для фонов в баннерах, карточках и inlline allert
Light Status/Info background
#e3f2ff
$color-status-neutral
Для подчеркивания статуса компонента. Состояние нейтральности
Light Status/Neutral
#5e6071
$color-status-neutral-background
Используется для фонов в баннерах, карточках и inlline allert
Light Status/Neutral background
#f1f1f3
Text
Token name
Pixso name
Value
Example
$color-text-active
Для акцентного текста и символов
Light Text/Active
rgba(9, 11, 22, 0.94)
$color-text-active-inverse
Light Text/Active inverse
#ffffff
$color-text-inactive
Для дополнительного текста и символов (Прим. Helper Text)
Light Text/Inactive
rgba(25, 28, 52, 0.7)
$color-text-inactive-inverse
Light Text/Inactive inverse
rgba(255, 255, 255, 0.6)
$color-text-disabled
Для незначительных объектов, или недоступного текста (Состояние Disabled)
Light Text/Disabled
rgba(25, 28, 52, 0.48)
$color-text-disabled-inverse
Light Text/Disabled inverse
rgba(255, 255, 255, 0.38)
$color-text-link
Для ссылок
Light Text/Link
#1a73e8
$color-text-link-visited
Для пройденных ссылок
Light Text/Link visited
#7e00ed
$color-text-logo
Цвет текста в логотипе билайн
Light Text/Logo
#000000
Utilities
Token name
Pixso name
Value
Example
$color-utilities-scroll
Light Utilities/Scroll
#b6b7bf
$color-utilities-scroll-hover
Light Utilities/Scroll hover
#999aa5
$color-utilities-scroll-pressed
Light Utilities/Scroll pressed
#7b7d8b
Dark
Accent
Token name
Pixso name
Value
Example
$color-accent-teal
Используется для акцентных элементов
Dark Accent/Teal
#4dd0e7
$color-accent-teal-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Accent/Teal background
#123035
$color-accent-purple
Используется для акцентных элементов
Dark Accent/Purple
#b16cf9
$color-accent-purple-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Accent/Purple background
#27113a
$color-accent-magenta
Используется для акцентных элементов
Dark Accent/Magenta
#df59d1
$color-accent-magenta-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Accent/Magenta background
#370f37
$color-accent-aquamarine
Используется для акцентных элементов
Dark Accent/Aquamarine
#30d7c2
$color-accent-aquamarine-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Accent/Aquamarine background
#18302b
$color-accent-lemon-background
Используется для фонов в баннерах, карточках и inlline allert. *Оттенок наследуется от цвета Brand
Dark Accent/Lemon background
#494635
Background
Token name
Pixso name
Value
Example
$color-background-base
Дефолтный цвет фона
Dark Background/Base
#141414
$color-background-base-hover
Dark Background/Base hover
rgba(255, 255, 255, 0.06)
$color-background-base-focused
Dark Background/Base focused
rgba(255, 255, 255, 0.12)
$color-background-base-pressed
Dark Background/Base pressed
rgba(255, 255, 255, 0.12)
$color-background-base-dragged
Dark Background/Base dragged
rgba(255, 255, 255, 0.08)
$color-background-base-selected
Dark Background/Base selected
rgba(255, 255, 255, 0.08)
$color-background-base-activated
Dark Background/Base activated
rgba(255, 255, 255, 0.12)
$color-background-inverse
Dark Background/Inverse
#e0e0e0
$color-background-low
Dark Background/Low
#212121
$color-background-medium
Dark Background/Medium
#2e2f33
$color-background-high
Dark Background/High
#36383c
$color-background-secondary
Dark Background/Secondary
#36383c
Border
Token name
Pixso name
Value
Example
$color-border
Для обозначения границы карточек и контроллов
Dark Border/undefined
rgba(255, 255, 255, 0.48)
$color-border-focused
Для компонентов с обводкой, в состоянии Focused
Dark Border/Focused
#ffffff
$color-border-focus
Dark Border/Focus
#ffffff
$color-border-error
Для обводки контроллов в состоянии Error
Dark Border/Error
#f37678
Button
Token name
Pixso name
Value
Example
$color-button-plain
Для текста в кнопках Plain
Dark Button/Plain
#5cb5ff
$color-button-plain-background-hover
Для фона кнопки Plain
Dark Button/Plain background hover
rgba(92, 181, 255, 0.12)
$color-button-plain-background-pressed
Для фона кнопки Plain
Dark Button/Plain background pressed
rgba(92, 181, 255, 0.16)
$color-button-overlay-background
Для фона кнопки Overlay
Dark Button/Overlay background
#f9f9f9
$color-button-overlay-background-hover
Для фона кнопки Overlay
Dark Button/Overlay background hover
#f1f1f3
$color-button-overlay-background-pressed
Для фона кнопки Overlay
Dark Button/Overlay background pressed
#e3e3e6
Chart
Token name
Pixso name
Value
Example
$color-chart-red
Для диаграмм и графиков
Dark Chart/Red
#e78687
$color-chart-red-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Red active
#db5858
$color-chart-orange
Для диаграмм и графиков
Dark Chart/Orange
#f2bb64
$color-chart-orange-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Orange active
#d9922d
$color-chart-green
Для диаграмм и графиков
Dark Chart/Green
#6ad682
$color-chart-green-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Green active
#3e9652
$color-chart-blue
Для диаграмм и графиков
Dark Chart/Blue
#5ca7e5
$color-chart-blue-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Blue active
#457bc1
$color-chart-grey
Для диаграмм и графиков
Dark Chart/Grey
#bababa
$color-chart-grey-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Grey active
#808187
$color-chart-teal
Для диаграмм и графиков
Dark Chart/Teal
#4ae5dc
$color-chart-teal-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Teal active
#359e8b
$color-chart-purple
Для диаграмм и графиков
Dark Chart/Purple
#b16cf9
$color-chart-purple-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Purple active
#803fc1
$color-chart-magenta
Для диаграмм и графиков
Dark Chart/Magenta
#cc74b9
$color-chart-magenta-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Magenta active
#b153a7
$color-chart-aquamarine
Для диаграмм и графиков
Dark Chart/Aquamarine
#50c09e
$color-chart-aquamarine-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Aquamarine active
#1b9881
$color-chart-yellow
Для диаграмм и графиков
Dark Chart/Yellow
#edd460
$color-chart-yellow-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Yellow active
#c5a537
$color-chart-saphire
Для диаграмм и графиков
Dark Chart/Saphire
#8186f4
$color-chart-saphire-active
Для диаграмм и графиков. Активное состояние
Dark Chart/Saphire active
#6266bc
Control
Цвета, специфичные для контролов форм: Textfield, Textarea, Selection Control
Token name
Pixso name
Value
Example
$color-control-background
Dark Control/Background
rgba(255, 255, 255, 0.14)
$color-control-background-hover
Dark Control/Background hover
rgba(255, 255, 255, 0.2)
$color-control-background-pressed
Dark Control/Background pressed
rgba(255, 255, 255, 0.26)
$color-control-background-error
Dark Control/Background error
rgba(243, 118, 120, 0.12)
Divider
Token name
Pixso name
Value
Example
$color-divider
Для полос-раделителей. Не подходит для обводок карточек и контроллов
Dark Divider/undefined
rgba(255, 255, 255, 0.2)
Gradient
Token name
Pixso name
Value
Example
$color-gradient-right
Dark Gradient/Right
linear-gradient(-90deg, #21212100 0%, #212121 33.71%)
$color-gradient-left
Dark Gradient/Left
linear-gradient(-90deg, #212121 64.58%, #21212100 100%)
Status
Цвета, отвечающие за передачу статусного состояния элемента.
Token name
Pixso name
Value
Example
$color-status-error
Для подчеркивания статуса компонента. Состояние ошибки
Dark Status/Error
#f37678
$color-status-error-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Status/Error background
#371313
$color-status-warning
Для подчеркивания статуса компонента. Состояние предупреждения
Dark Status/Warning
#ffbd55
$color-status-warning-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Status/Warning background
#3d392a
$color-status-success
Для подчеркивания статуса компонента. Состояние успешности
Dark Status/Success
#78ce8e
$color-status-success-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Status/Success background
#10301a
$color-status-info
Для подчеркивания статуса компонента. Состояние информирование
Dark Status/Info
#5cb5ff
$color-status-info-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Status/Info background
#132338
$color-status-neutral
Для подчеркивания статуса компонента. Состояние нейтральности
Dark Status/Neutral
#d1d2d6
$color-status-neutral-background
Используется для фонов в баннерах, карточках и inlline allert
Dark Status/Neutral background
#36383c
Text
Token name
Pixso name
Value
Example
$color-text-active
Для акцентного текста и символов
Dark Text/Active
rgba(255, 255, 255, 0.87)
$color-text-active-inverse
Dark Text/Active inverse
rgba(9, 11, 22, 0.94)
$color-text-inactive
Для дополнительного текста и символов (Прим. Helper Text)
Dark Text/Inactive
rgba(255, 255, 255, 0.6)
$color-text-inactive-inverse
Dark Text/Inactive inverse
rgba(0, 0, 0, 0.6)
$color-text-disabled
Для незначительных объектов, или недоступного текста (Состояние Disabled)
Dark Text/Disabled
rgba(255, 255, 255, 0.38)
$color-text-disabled-inverse
Dark Text/Disabled inverse
rgba(0, 0, 0, 0.38)
$color-text-link
Для ссылок
Dark Text/Link
#5cb5ff
$color-text-link-visited
Для пройденных ссылок
Dark Text/Link visited
#b16cf9
$color-text-logo
Цвет текста в логотипе билайн
Dark Text/Logo
#ffffff
Utilities
Token name
Pixso name
Value
Example
$color-utilities-scroll
Dark Utilities/Scroll
#7b7d8b
$color-utilities-scroll-hover
Dark Utilities/Scroll hover
#b6b7bf
$color-utilities-scroll-pressed
Dark Utilities/Scroll pressed
#f1f1f3
Elevation
Тени позволяют показать многоуровневость интерфейса, где каждый слой указывает на приоритетность для пользователя. Мы используем один тип тени — внешнюю, с разной интенсивностью и удаленностью элемента от первого слоя интерфейса: low, medium и high.
Token name
Value
Example
$elevation-low
0px 2px 10px rgba(0, 0, 0, 0.08), 0px 2px 8px rgba(0, 0, 0, 0.08)
$elevation-medium
0px 4px 30px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1)
$elevation-high
0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08)
Font
Font Family
Token name
Value
Example
$font-family-header
'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
билайн
$font-family-text
'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
билайн
$font-family-code
'Roboto Mono', monospace
билайн
$font-family-system
'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
билайн
$font-family-mono
'Roboto Mono', monospace
билайн
Variant Numeric
Token name
Value
Example
$font-variant-numeric-table-numbers
tabular-nums
Weight
Token name
Value
Example
$font-weight-medium
500
$font-weight-regular
400
$font-weight-bold
700
Typeset
Типографика выступает ярким визуальным представлением бренда билайн. Все продукты используют уникальный фирменный шрифт DS Beeline, разработанный специально для компании. В Дизайн-платформе выстроена типографическая визуальная иерархия с помощью разных стилей и веса заголовков, подзаголовков, текста и подписей.
Typeset
Token name
Value
Example
H1
$font-letter-spacing-h1
$font-line-height-h1
$font-size-h1
$font-weight-h1
0.3px
66px
54px
500
билайн
H2
$font-letter-spacing-h2
$font-line-height-h2
$font-size-h2
$font-weight-h2
0.3px
56px
44px
500
билайн
H3
$font-letter-spacing-h3
$font-line-height-h3
$font-size-h3
$font-weight-h3
0.3px
44px
34px
400
билайн
H4
$font-letter-spacing-h4
$font-line-height-h4
$font-size-h4
$font-weight-h4
0.2px
32px
26px
500
билайн
H5
$font-letter-spacing-h5
$font-line-height-h5
$font-size-h5
$font-weight-h5
0.2px
28px
20px
700
билайн
H6
$font-letter-spacing-h6
$font-line-height-h6
$font-size-h6
$font-weight-h6
0.2px
22px
17px
700
билайн
Subtitle1
$font-letter-spacing-subtitle1
$font-line-height-subtitle1
$font-size-subtitle1
$font-weight-subtitle1
0.2px
24px
19px
500
билайн
Subtitle2
$font-letter-spacing-subtitle2
$font-line-height-subtitle2
$font-size-subtitle2
$font-weight-subtitle2
0.2px
22px
17px
500
билайн
Subtitle3
$font-letter-spacing-subtitle3
$font-line-height-subtitle3
$font-size-subtitle3
$font-weight-subtitle3
0.2px
20px
15px
500
билайн
Body1
$font-letter-spacing-body1
$font-line-height-body1
$font-size-body1
$font-weight-body1
0.2px
24px
19px
400
билайн
Body2
$font-letter-spacing-body2
$font-line-height-body2
$font-size-body2
$font-weight-body2
0.2px
22px
17px
400
билайн
Body3
$font-letter-spacing-body3
$font-line-height-body3
$font-size-body3
$font-weight-body3
0.2px
18px
15px
400
билайн
Caption
$font-letter-spacing-caption
$font-line-height-caption
$font-size-caption
$font-weight-caption
0.2px
16px
13px
400
билайн
Overline
$font-letter-spacing-overline
$font-line-height-overline
$font-size-overline
$font-weight-overline
1.2px
16px
10px
700
билайн
ProductName
$font-letter-spacing-product-name
$font-line-height-product-name
$font-size-product-name
$font-weight-product-name
0px
28px
25px
500
билайн
Size
Border
Border Radius
В зависимости от типа, размера и функциональности элемента используются разные по интенсивности скругления. Базовое значение, кратно которому строится шкала: 2px.
Token name
Value
Example
$size-border-radius-x1
2px
$size-border-radius-x2
4px
$size-border-radius-x3
6px
$size-border-radius-x4
8px
$size-border-radius-x5
10px
$size-border-radius-x6
12px
$size-border-radius-x8
16px
$size-border-radius-x10
20px
$size-border-radius-x12
24px
$size-border-radius-x15
30px
$size-border-radius-circle
50%
Border Width
Token name
Value
Example
$size-border-width-regular
1px
Control
Размерность контролов в интерфейсе: текстовых полей, кнопок, иконочных кнопок и т.д. Используется для обеспечения консистентности высоты элементов при выстраивании их в одну строку.
Token name
Value
Example
$size-control-height-small
40px
$size-control-height-medium
48px
$size-control-height-large
56px
Icon
Размер иконки обозначает одновременно ее высоту, ширину и, в случае использования иконочного шрифта, размер шрифта.
Token name
Value
Example
$size-icon-small
18px
$size-icon-medium
20px
$size-icon-large
24px
Spacing
В дизайн-платформе используется 4px-ая сетка и 4px-й интервальный шаг. То есть для интервалов между элементами подходящими являются значения, кратные 4 (например, 8, 12, 16, 20, 24 и т.д.). Это позволяет упорядочить элементы интерфейса и создать универсальный ритм для разных типов продуктов, а также упростить и ускорить разработку.
Token name
Value
Example
$size-spacing-x1
4px
$size-spacing-x2
8px
$size-spacing-x3
12px
$size-spacing-x4
16px
$size-spacing-x5
20px
$size-spacing-x6
24px
$size-spacing-x7
28px
$size-spacing-x8
32px
$size-spacing-x9
36px
$size-spacing-x10
40px
Color
Elevation
Font
Size