Определение

Дизайн-токены – это объекты, которые хранят атрибуты визуального дизайна. Мы используем их вместо жестко запрограммированных значений, чтобы поддерживать масштабируемую и согласованную визуальную систему для разработки пользовательских интерфейсов.

Цвета уведомлений

Цвет

Токен

Описание

blue-60

сolor-success

Цвет успеха

red-60

сolor-error

Цвет ошибок в тексте, иконках, обводках, кнопках

orange-60

сolor-warning

Цвет предупреждения

blue-60

сolor-info

Цвет информации

Цвета текста

Цвет

Токен

Описание

black-80

сolor-text-heading

Цвет заголовка

black-60

сolor-text-body-primary

Цвет основного текста

gray-80

сolor-text-body-secondary

Цвет второстепенного текста и меток (label)

gray-50

сolor-text-disabled

Цвет не активного текста (плейсхолдер, кнопки)

Цвета фона

Цвет

Токен

Описание

white

сolor-bg

Белый фон

gray-10

сolor-bg-secondary

Серый фон

gray-20

сolor-bg-neutral

Темно-серый фон

green-10

сolor-bg-success

Цвет фона на сообщениях об успехе

orange-10

сolor-bg-warning

Цвет фона на сообщениях о предупреждении

red-10

сolor-bg-error

Цвет фона на сообщениях об ошибке

white

сolor-bg-input

Цвет фона для полей ввода

Цвета иконок

Цвет

Токен

Описание

black-60

сolor-icon

Цвет основных иконок

gray-70

сolor-icon-secondary

Цвет второстепенных иконок

red-60

сolor-icon-danger

Цвет иконки для критических действий и ошибок

blue-60

сolor-icon-active

Цвет активной иконки

gray-50

сolor-icon-disabled

Цвет не активной иконки

Цвета обводок

Цвет

Токен

Описание

gray-40

сolor-border

Цвет обводки

gray-50

сolor-border-hover

Цвет обводки при наведении

blue-60

сolor-border-active

Цвет обводки с активном состоянии

red-60

сolor-border-error

Цвет обводки при ошибке

gray-60

сolor-border-success

Цвет обводки успеха

gray-60

сolor-border-warning

Цвет обводки предупреждения

gray-30

сolor-border-separator

Цвет разделителя используемый по-умолчанию

Радиус

Параметры

Токен

Описание

0px

border-radius-0

Радиус 0px

2px

border-radius-2

Радиус 2px

4px

border-radius-4

Радиус 4px

8px

border-radius-8

Радиус 8px

12px

border-radius-12

Радиус 12px

16px

border-radius-16

Радиус 16px

50%

border-radius-circle

Круг

Тени