Цвет

Цвет, шрифт, иконки
токенов: 106

Цвет — то место, где дизайн-систему чаще всего принимают за палитру. Здесь нет цветов, здесь роли: поверхность, текст на ней, заливка, текст на заливке. Одна и та же роль несёт в каждом режиме своё значение, и оба стоят в таблице.

Источник: @feugene/granularity 3.7.2, tokens/*.json

На этой странице

Основа: нейтральная палитра
Роли поверхностей
Роли состояний
Роли действий
Роли статусов
Роли плотных заливок
Роли визуализации данных
Тени

Насыщенный тон не бывает цветом текста. У каждого тона есть режим, где он проваливает AA на обычной подложке; парная роль -text держит порог везде. Правило стережётся двумя гейтами библиотеки, а не вычиткой.
Там, где коэффициент контраста осмыслен, он посчитан функцией contrast() из пакета токенов самой дизайн-системы — той же, которой пользуются её гейты, а не второй реализацией.

Основа: нейтральная палитра

Токен	Значение	Роль
`--gr-slate-0`--gr-slate-0	`#ffffff`	Нейтральный оттенок slate 0 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-50`--gr-slate-50	`#f8fafc`	Нейтральный оттенок slate 50 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-100`--gr-slate-100	`#f1f5f9`	Нейтральный оттенок slate 100 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-200`--gr-slate-200	`#e2e8f0`	Нейтральный оттенок slate 200 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-300`--gr-slate-300	`#cbd5e1`	Нейтральный оттенок slate 300 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-400`--gr-slate-400	`#94a3b8`	Нейтральный оттенок slate 400 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-500`--gr-slate-500	`#64748b`	Нейтральный оттенок slate 500 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-600`--gr-slate-600	`#475569`	Нейтральный оттенок slate 600 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-700`--gr-slate-700	`#334155`	Нейтральный оттенок slate 700 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-800`--gr-slate-800	`#1e293b`	Нейтральный оттенок slate 800 для базовой palette scale, поверхностей и бордеров.
`--gr-slate-900`--gr-slate-900	`#0f172a`	Нейтральный оттенок slate 900 для базовой palette scale, поверхностей и бордеров.

Роли поверхностей

Токен	Светлая	Тёмная	Контраст	Роль
`--gr-bg`--gr-bg	`#f8fafc`	`#0f172a`		Базовый фон приложения и крупных layout-поверхностей текущей темы.
`--gr-fg`--gr-fg	`#0f172a`	`#f8fafc`	17.06 / 17.06против `--gr-bg`	Основной цвет текста и иконок поверх базового фона текущей темы.
`--gr-card`--gr-card	`#ffffff`	`#1e293b`		Фон карточек, панелей и других поднятых поверхностей.
`--gr-card-fg`--gr-card-fg	`#0f172a`	`#f8fafc`	17.85 / 13.98против `--gr-card`	Цвет контента внутри карточек и raised surface-блоков.
`--gr-popover`--gr-popover	`#ffffff`	`#1e293b`		Фон popover-, dropdown- и overlay-поверхностей.
`--gr-popover-fg`--gr-popover-fg	`#0f172a`	`#f8fafc`	17.85 / 13.98против `--gr-popover`	Цвет текста и иконок внутри popover-слоёв.
`--gr-muted`--gr-muted	`#f1f5f9`	`#334155`		Приглушённая поверхность для вторичных блоков, плашек и заполнений.
`--gr-muted-fg`--gr-muted-fg	`#556275`	`#aab6c7`	5.65 / 5.04против `--gr-muted`	Вторичный текстовый цвет для helper-копии и менее важных подписей.
`--gr-secondary`--gr-secondary	`#e2e8f0`	`#334155`		Нейтральная secondary action/surface-подложка без сильного бренд-акцента.
`--gr-secondary-fg`--gr-secondary-fg	`#1e293b`	`#f1f5f9`	11.87 / 9.45против `--gr-secondary`	Контрастный текст для secondary-кнопок и поверхностей.
`--gr-overlay-bg`--gr-overlay-bg	`rgb(15 23 42 / 0.45)`	`rgb(2 6 23 / 0.65)`		Подложка модальных слоёв (модалка, drawer): затемняет страницу, оставляя её узнаваемой.
`--gr-brd`--gr-brd	`#e2e8f0`	`#334155`		Базовый цвет бордеров и разделителей текущей темы.
`--gr-brd-strong`--gr-brd-strong	`var(--gr-brd)`	`var(--gr-brd)`		Граница плотнее разделителя: пунктир и точки `GrDivider`, черта невыбранной вкладки под указателем. Тема ставит её и в токены компонентов — рамку `outline`-сообщения, разделитель пути. Тема без второй ступени границы ставит сюда `--gr-brd`.
`--gr-input`--gr-input	`#e2e8f0`	`#334155`		Рамка поля ввода в покое — у `GrInput`, `GrTextarea`, `GrNumberInput`, `GrInputTag`, `GrAutocomplete`, `GrOtpInput` и триггеров `GrSelect`, `GrTreeSelect`, `GrColorPicker`. Тема, у которой рамка поля темнее разделителя, разводит её с `--gr-brd`.
`--gr-input-hover`--gr-input-hover	`var(--gr-input)`	`var(--gr-input)`		Рамка поля ввода под указателем. Тема без отклика рамки ставит сюда `--gr-input`.
`--gr-input-focus-brd`--gr-input-focus-brd	`var(--gr-input)`	`var(--gr-input)`		Рамка поля в фокусе, вместе с кольцом `--gr-ring`. Тема без своего решения ставит `--gr-input`: рамка в фокусе не меняется.
`--gr-input-readonly-bg`--gr-input-readonly-bg	`var(--gr-bg)`	`var(--gr-bg)`		Подложка поля только для чтения. Тема, у которой такое поле читается текстом на поверхности, ставит `transparent`; без своего решения — `--gr-bg`, как у рабочего поля.
`--gr-input-readonly-brd`--gr-input-readonly-brd	`var(--gr-input)`	`var(--gr-input)`		Рамка поля только для чтения. Без своего решения — `--gr-input`, как у рабочего поля.
`--gr-control-brd`--gr-control-brd	`#64748b`	`#94a3b8`		Граница переключаемого контрола в покое — коробки чекбокса, кружка радио, дорожки выключенного переключателя. Держит 3:1 к странице, карточке и `--gr-muted` (WCAG 1.4.11): у такого контрола граница — единственное, по чему его видно.
`--gr-control-brd-hover`--gr-control-brd-hover	`var(--gr-control-brd)`	`var(--gr-control-brd)`		Граница переключаемого контрола под указателем: коробка отметки, кружок радио. Тема без отклика ставит сюда `--gr-control-brd`.
`--gr-ring`--gr-ring	`#6366f1`	`#818cf8`		Цвет focus-ring и акцентного outline для интерактивных компонентов.

Роли состояний

Токен	Светлая	Тёмная	Контраст	Роль
`--gr-disabled-bg`--gr-disabled-bg	`#f1f5f9`	`#273548`		Фон недоступного контрола: гасит его поверхностью, а не прозрачностью — `opacity` разбавляет выверенные на AA токены текста.
`--gr-disabled-fg`--gr-disabled-fg	`#94a3b8`	`#64748b`		Цвет текста и иконок недоступного контрола.
`--gr-disabled-brd`--gr-disabled-brd	`#e2e8f0`	`#334155`		Цвет рамки недоступного контрола.
`--gr-invalid-brd`--gr-invalid-brd	`var(--gr-danger)`	`var(--gr-danger)`		Цвет рамки контрола, не прошедшего валидацию.
`--gr-invalid-ring`--gr-invalid-ring	`var(--gr-danger)`	`var(--gr-danger)`		Цвет focus-ring контрола, не прошедшего валидацию.
`--gr-invalid-text`--gr-invalid-text	`var(--gr-danger-text)`	`var(--gr-danger-text)`	7.94 / 9.41против `--gr-bg`	Цвет текста ошибки и метки обязательного поля.

Роли действий

Токен	Светлая	Тёмная	Контраст	Роль
`--gr-primary`--gr-primary	`#4f46e5`	`#9d8bfa`		Главный brand/action цвет темы для primary CTA и ключевых акцентов.
`--gr-primary-fg`--gr-primary-fg	`#ffffff`	`#0f172a`	6.29 / 6.38против `--gr-primary`	Контрастный текст и иконки поверх primary-заливки.
`--gr-accent`--gr-accent	`#eef2ff`	`#1e1b4b`		Мягкая акцентная поверхность для selected/hovered областей и подсветок.
`--gr-accent-fg`--gr-accent-fg	`#3730a3`	`#c7d2fe`	8.88 / 10.72против `--gr-accent`	Цвет текста поверх accent-подложек.
`--gr-selected`--gr-selected	`var(--gr-primary)`	`var(--gr-primary)`		Цвет выбранного: заливка и рамка отметки и радио, дорожка включённого переключателя, черта вкладки, заливка слайдера, текущая страница пагинации, кольцо выбранного цвета; подмесом — подсветка выбранной строки и узла дерева. Тема, где выбор — бренд, ставит сюда `--gr-primary`.
`--gr-selected-fg`--gr-selected-fg	`var(--gr-primary-fg)`	`var(--gr-primary-fg)`	6.29 / 6.38против `--gr-selected`	Знак на заливке `--gr-selected`: галочка отметки, точка радио, номер текущей страницы.
`--gr-selected-hover`--gr-selected-hover	`var(--gr-selected)`	`var(--gr-selected)`		Выбранное под указателем: заливка отмеченной коробки и выбранного радио. Тема без отклика ставит сюда `--gr-selected`.

Роли статусов

Токен	Светлая	Тёмная	Контраст	Роль
`--gr-success`--gr-success	`#10b981`	`#34d399`		Основной semantic success-цвет для статусов, бейджей и уведомлений.
`--gr-success-light`--gr-success-light	`#d1fae5`	`#194536`		Облегчённая success-подложка для мягких статусов и подсветок.
`--gr-success-fg`--gr-success-fg	`#0f172a`	`#0f172a`	7.04 / 9.29против `--gr-success`	Контрастный текст и иконки поверх success-заливки.
`--gr-primary-text`--gr-primary-text	`#3730a3`	`#c7d2fe`	9.49 / 11.97против `--gr-bg`	Основной тон как ЦВЕТ ТЕКСТА на фоне страницы: насыщенный `--gr-primary` под текст не рассчитан и не проходит по контрасту.
`--gr-success-text`--gr-success-text	`#065f46`	`#6ee7b7`	7.34 / 11.71против `--gr-bg`	Текстовый оттенок для success-сообщений на светлой подложке.
`--gr-warning`--gr-warning	`#f97316`	`#fb923c`		Основной semantic warning-цвет для предупреждений и промежуточных статусов.
`--gr-warning-light`--gr-warning-light	`#ffedd5`	`#672e1c`		Облегчённая warning-подложка для мягких warning-состояний.
`--gr-warning-fg`--gr-warning-fg	`#0f172a`	`#0f172a`	6.37 / 7.89против `--gr-warning`	Контрастный текст и иконки поверх warning-заливки.
`--gr-warning-text`--gr-warning-text	`#7c2d12`	`#fdba74`	8.96 / 10.59против `--gr-bg`	Текстовый оттенок для warning-сообщений на мягкой warning-подложке.
`--gr-danger`--gr-danger	`#dc2626`	`#f87171`		Semantic danger-цвет для ошибок, рисков и критических сообщений.
`--gr-danger-light`--gr-danger-light	`#fee2e2`	`#6a2522`		Облегчённая danger-подложка для мягких error-состояний.
`--gr-danger-fg`--gr-danger-fg	`#ffffff`	`#0f172a`	4.83 / 6.45против `--gr-danger`	Контрастный текст и иконки поверх danger-заливки.
`--gr-danger-text`--gr-danger-text	`#991b1b`	`#fca5a5`	7.94 / 9.41против `--gr-bg`	Текстовый оттенок для error-сообщений на мягкой danger-подложке.
`--gr-info`--gr-info	`#2563eb`	`#60a5fa`		Semantic info-цвет для нейтральных уведомлений и информационных акцентов.
`--gr-info-light`--gr-info-light	`#dbeafe`	`#213771`		Облегчённая info-подложка для спокойных информационных блоков.
`--gr-info-fg`--gr-info-fg	`#ffffff`	`#0f172a`	5.17 / 7.02против `--gr-info`	Контрастный текст и иконки поверх info-заливки.
`--gr-info-text`--gr-info-text	`#1e40af`	`#bfdbfe`	8.34 / 12.56против `--gr-bg`	Текстовый оттенок для спокойных info-сообщений и подсказок.
`--gr-slate`--gr-slate	`#475569`	`#94a3b8`		Нейтральный semantic slate-цвет для subdued индикаторов и secondary статусов.
`--gr-slate-light`--gr-slate-light	`#e2e8f0`	`#313b4a`		Облегчённая slate-подложка для мягких нейтральных состояний.
`--gr-slate-fg`--gr-slate-fg	`#ffffff`	`#0f172a`	7.58 / 6.96против `--gr-slate`	Контрастный текст и иконки поверх slate-заливки.
`--gr-slate-text`--gr-slate-text	`#334155`	`#cbd5e1`	9.90 / 12.02против `--gr-bg`	Текстовый оттенок для нейтральных slate-сообщений и плашек.
`--gr-azure`--gr-azure	`#0077b6`	`#38bdf8`		Semantic azure-цвет для информационных акцентов и вспомогательных статусов.
`--gr-azure-light`--gr-azure-light	`#e0f2fe`	`#1b425c`		Облегчённая azure-подложка для мягких informational поверхностей.
`--gr-azure-fg`--gr-azure-fg	`#ffffff`	`#0f172a`	4.87 / 8.33против `--gr-azure`	Контрастный текст и иконки поверх azure-заливки.
`--gr-azure-text`--gr-azure-text	`#075985`	`#bae6fd`	7.23 / 13.45против `--gr-bg`	Текстовый оттенок для azure-плашек и спокойных informational блоков.

Роли плотных заливок

Токен	Светлая	Тёмная	Контраст	Роль
`--gr-primary-solid`--gr-primary-solid	`var(--gr-primary)`	`#595ce6`		Сплошная заливка кнопочного веса тона `primary`.
`--gr-primary-solid-hover`--gr-primary-solid-hover	`var(--gr-primary-hover)`	`#5053dd`		Заливка `--gr-primary-solid` под курсором.
`--gr-primary-solid-active`--gr-primary-solid-active	`var(--gr-primary-active)`	`#474acf`		Заливка `--gr-primary-solid` в момент нажатия.
`--gr-primary-solid-fg`--gr-primary-solid-fg	`var(--gr-primary-fg)`	`var(--gr-slate-0)`	6.29 / 5.12против `--gr-primary-solid`	Текст и иконки на заливке `--gr-primary-solid`.
`--gr-success-solid`--gr-success-solid	`#047857`	`#047857`		Сплошная заливка кнопочного веса тона `success`.
`--gr-success-solid-hover`--gr-success-solid-hover	`#036c4d`	`#036c4d`		Заливка `--gr-success-solid` под курсором.
`--gr-success-solid-active`--gr-success-solid-active	`#025f44`	`#025f44`		Заливка `--gr-success-solid` в момент нажатия.
`--gr-success-solid-fg`--gr-success-solid-fg	`var(--gr-slate-0)`	`var(--gr-slate-50)`	5.48 / 5.24против `--gr-success-solid`	Текст и иконки на заливке `--gr-success-solid`.
`--gr-warning-solid`--gr-warning-solid	`#c2410c`	`#c2410c`		Сплошная заливка кнопочного веса тона `warning`.
`--gr-warning-solid-hover`--gr-warning-solid-hover	`#b53b0a`	`#b53b0a`		Заливка `--gr-warning-solid` под курсором.
`--gr-warning-solid-active`--gr-warning-solid-active	`#9f3307`	`#9f3307`		Заливка `--gr-warning-solid` в момент нажатия.
`--gr-warning-solid-fg`--gr-warning-solid-fg	`var(--gr-slate-0)`	`var(--gr-slate-50)`	5.18 / 4.95против `--gr-warning-solid`	Текст и иконки на заливке `--gr-warning-solid`.
`--gr-danger-solid`--gr-danger-solid	`var(--gr-danger)`	`#b91c1c`		Сплошная заливка кнопочного веса тона `danger`.
`--gr-danger-solid-hover`--gr-danger-solid-hover	`var(--gr-danger-hover)`	`#a91919`		Заливка `--gr-danger-solid` под курсором.
`--gr-danger-solid-active`--gr-danger-solid-active	`var(--gr-danger-active)`	`#931515`		Заливка `--gr-danger-solid` в момент нажатия.
`--gr-danger-solid-fg`--gr-danger-solid-fg	`var(--gr-danger-fg)`	`var(--gr-slate-50)`	4.83 / 6.18против `--gr-danger-solid`	Текст и иконки на заливке `--gr-danger-solid`.
`--gr-info-solid`--gr-info-solid	`var(--gr-info)`	`#1d4ed8`		Сплошная заливка кнопочного веса тона `info`.
`--gr-info-solid-hover`--gr-info-solid-hover	`var(--gr-info-hover)`	`#1e40af`		Заливка `--gr-info-solid` под курсором.
`--gr-info-solid-active`--gr-info-solid-active	`var(--gr-info-active)`	`#1e3a8a`		Заливка `--gr-info-solid` в момент нажатия.
`--gr-info-solid-fg`--gr-info-solid-fg	`var(--gr-info-fg)`	`var(--gr-slate-50)`	5.17 / 6.41против `--gr-info-solid`	Текст и иконки на заливке `--gr-info-solid`.
`--gr-slate-solid`--gr-slate-solid	`var(--gr-slate)`	`var(--gr-slate-600)`		Сплошная заливка кнопочного веса тона `slate`.
`--gr-slate-solid-hover`--gr-slate-solid-hover	`var(--gr-slate-hover)`	`var(--gr-slate-700)`		Заливка `--gr-slate-solid` под курсором.
`--gr-slate-solid-active`--gr-slate-solid-active	`var(--gr-slate-active)`	`var(--gr-slate-800)`		Заливка `--gr-slate-solid` в момент нажатия.
`--gr-slate-solid-fg`--gr-slate-solid-fg	`var(--gr-slate-fg)`	`var(--gr-slate-50)`	7.58 / 7.24против `--gr-slate-solid`	Текст и иконки на заливке `--gr-slate-solid`.
`--gr-azure-solid`--gr-azure-solid	`#0369a1`	`#0369a1`		Сплошная заливка кнопочного веса тона `azure`.
`--gr-azure-solid-hover`--gr-azure-solid-hover	`#075985`	`#075985`		Заливка `--gr-azure-solid` под курсором.
`--gr-azure-solid-active`--gr-azure-solid-active	`#0c4a6e`	`#0c4a6e`		Заливка `--gr-azure-solid` в момент нажатия.
`--gr-azure-solid-fg`--gr-azure-solid-fg	`var(--gr-slate-0)`	`var(--gr-slate-50)`	5.93 / 5.67против `--gr-azure-solid`	Текст и иконки на заливке `--gr-azure-solid`.

Роли визуализации данных

Токен	Светлая	Тёмная	Роль
`--gr-chart-1`--gr-chart-1	`#4f46e5`	`#6366f1`	Первый цвет серии для графиков и data-visualization элементов.
`--gr-chart-2`--gr-chart-2	`#059669`	`#34d399`	Второй цвет серии для графиков и data-visualization элементов.
`--gr-chart-3`--gr-chart-3	`#ea580c`	`#fb923c`	Третий цвет серии для графиков и data-visualization элементов.
`--gr-chart-4`--gr-chart-4	`#0284c7`	`#38bdf8`	Четвёртый цвет серии для графиков и data-visualization элементов.
`--gr-chart-5`--gr-chart-5	`#db2777`	`#f472b6`	Пятый цвет серии для графиков и data-visualization элементов.

Тени

Токен	Светлая	Тёмная	Роль
`--gr-shadow-1`--gr-shadow-1	`0 1px 2px rgba(15, 23, 42, 0.08)`	`0 1px 2px rgba(0, 0, 0, 0.45)`	Уровень elevation `1`. Синеватая полупрозрачная тень читается на светлом фоне мягче чёрной.
`--gr-shadow-2`--gr-shadow-2	`0 8px 24px rgba(15, 23, 42, 0.14)`	`0 8px 24px rgba(0, 0, 0, 0.55)`	Уровень elevation `2` для всплывающих слоёв.
`--gr-shadow-3`--gr-shadow-3	`0 16px 48px rgba(15, 23, 42, 0.20)`	`0 16px 48px rgba(0, 0, 0, 0.65)`	Уровень elevation `3` для модальных слоёв.