Основа

Цвета и контраст

Какие цвета есть, для чего каждый и как проверить читаемость

Источник: tokens/ в формате W3C Design Tokens 2025.10, сборка Style Dictionary. Образцы ниже собраны из тех же переменных, что ставятся в продукт

Поверхности и текст

Окно, плитка, вложенное и текст: нейтральная основа, на которой цвет появляется только с ролью Слева светлая тема, справа тёмная; значение копируется по клику

--window

Фон окна (рамка вокруг плиток)

Плитка

Плитка

--tile

Плитка

Вложенное

Вложенное

--nested

Вложенная поверхность внутри плитки, чипы, поля

ЭкспортПереименовать
ЭкспортПереименовать
--popover

Меню, подсказки, сплошной вариант стекла

АаОсновной текст
АаОсновной текст
--text

Текст

АаПодпись, мета
АаПодпись, мета
--text-muted

Подписи, второстепенное

Поле ввода
Поле ввода
--border

Только для полей ввода и редких разделителей

--nav-active

Выбранный пункт сайдбара (таблетка, белая иконка)

--nav-active-foreground

Иконка и текст на выбранном пункте сайдбара

Обрабатываем
Обрабатываем
--loader

Дуга спиннера

--skeleton

Скелетоны

Акцент продукта

Единственное, что продукт задаёт сам: главное действие, выбор и фокус Слева светлая тема, справа тёмная; значение копируется по клику

--primary

Акцент: главное действие, выбор, фокус. Лайм

--primary-foreground

Текст на акценте

Сохранено
Сохранено
--primary-ink

Акцент как текст и иконка на нейтральной плитке

--primary-edge

Рамка выбранного чипа на белом

Фокус
Фокус
--ring

Кольцо фокуса: акцент как чернила

Роли

Indigo это всё, что делает ИИ, Giants это предупреждение. Текст роли на мягком тоне, на насыщенном только знак Слева светлая тема, справа тёмная; значение копируется по клику

--indigo

Роль «ИИ»: итоги, всё, что делает модель. На насыщенном тоне текста нет, только иконки

Итоги

Бета в пятницу

Итоги

Бета в пятницу

--indigo-soft

Мягкий тон ИИ для текста: Indigo 60 % с белым

Итоги ИИ
Итоги ИИ
--indigo-ink

Чернила ИИ на нейтральной плитке: иконки (Lc 45) и крупный полужирный текст (Lc 60)

--giants

Роль «Предупреждение»: «не распознано», внимание. На насыщенном тоне текста нет, только иконки

Не распознано

Проверьте микрофон

Не распознано

Проверьте микрофон

--giants-soft

Мягкий тон предупреждения для текста: Giants 45 % с белым (Lc 76 с #111)

Внимание
Внимание
--giants-ink

Чернила предупреждения на нейтральной плитке: иконки (Lc 45) и крупный полужирный текст (Lc 60)

Итоги

Бета в пятницу

Итоги

Бета в пятницу

--on-role

Текст на акценте, Indigo и Giants

Опасное и запись

Красный только для записи и удаления, знак и текст на нём белые Слева светлая тема, справа тёмная; значение копируется по клику

--destructive

Опасное: удаление

--destructive-foreground

Текст на опасном

--record

Роль «Запись»: кнопка «Остановить», точка записи. Текст и знак на нём --record-foreground; тот же красный у опасного в тёмной теме

--record-foreground

Знак и текст на красном записи: белый в обеих темах