Дизайн-система Radix Themes.

Визуальная тема и атмосфера дизайн-системы Radix Themes

Рабочий интерфейс, а не доска настроения

Radix Themes — полезный ориентир для продуктов, в которых люди читают, принимают решения, вводят информацию и возвращаются к незавершённой работе. Визуальный характер формируют выверенные интервалы, сдержанные поверхности, чёткая типографическая иерархия и предсказуемые состояния компонентов. Используйте это руководство, чтобы создать рабочую область проекта, раздел аккаунта, экран настроек или сценарий проверки данных. Цель — цельный рабочий экран с реальным содержимым, а не набор привлекательных компонентов, расположенных без учёта задачи.

Выберите подходящую отправную точку

Для приложения на React начните с настоящего пакета Radix Themes и используйте его компоненты, прежде чем создавать собственные замены. Для визуальной концепции на другом стеке используйте эти принципы как ориентир и описывайте результат как созданный под влиянием этой системы. Radix Themes и Radix Primitives — разные отправные точки: это руководство посвящено библиотеке Themes со встроенным оформлением. Руководство по OpenDesign не превращает произвольный макет на HTML в нативную реализацию Radix.

Стройте интерфейс вокруг конкретной задачи

1. Выберите одно основное действие для первого экрана, например создание проекта или сохранение настроек аккаунта.
2. Разместите сведения, необходимые для принятия решения, перед действием.
3. Визуально разделяйте навигацию, метаданные объектов, редактируемые поля и обратную связь.
4. При проектировании используйте реалистичные длинные заголовки, разные значения статусов и пустое состояние.
5. Если экран работает только с тремя короткими текстами-заполнителями, значит, пригодная для использования система ещё не создана.

Тон и содержание

Используйте короткие описательные подписи, конкретные глаголы и прямые объяснения. Текст кнопки должен описывать следующее действие: «Сохранить изменения», «Пригласить участника» или «Создать проект». Заголовок должен обозначать тему раздела; не превращайте каждый небольшой элемент управления в рекламный слоган. Если действие не удаётся выполнить, объясните, что можно исправить, и сохраните работу пользователя. Это редакционные рекомендации OpenDesign по применению справочника, а не дополнительные API, предоставляемые Radix.

Цветовая палитра и роли дизайн-системы Radix Themes

Отделяйте фирменный цвет от смыслового

Используйте тему, а не задавайте оформление экранов напрямую

В официальной конфигурации Theme доступны параметры accentColor и grayColor. Задайте их в корневом элементе, чтобы все компоненты следовали одним решениям. В собственных компонентах обращайтесь к переменным CSS текущей темы, а не копируйте цвет со снимка экрана. В справочнике токенов ниже приведён компактный набор для работы. Токен — это роль в настроенной теме, а не гарантия неизменности конкретного шестнадцатеричного значения в светлом и тёмном режимах или при любом выборе акцента.

Иерархия поверхностей и границ

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

Светлое и тёмное оформление

Для нативных компонентов используйте официальную настройку внешнего вида и проверяйте оба режима на одном и том же содержимом. Не создавайте тёмный экран простым инвертированием цветов и не переносите тени из светлого режима без изменений. Отдельно проверьте наложения, неактивные поля, разделители, выбранные строки и текст на акцентном фоне. Интерактивный пример на этой странице демонстрирует несколько вариантов темы; официальный интерактивный стенд служит справочником по всей библиотеке и её нативному поведению.

Контраст и дополнительные сигналы

Проверяйте итоговые сочетания цветов текста и фона после смены акцента или поверхности. Обозначайте статусы «Ожидает», «Завершено» и «Не удалось» не только цветом, но и текстом. Для выбранных параметров добавляйте галочку или другое заметное отличие. Не считайте, что доступная библиотека компонентов автоматически делает доступным любое сочетание содержимого и темы: подписи, вложенность, собственные компоненты CSS и порядок информации по-прежнему влияют на удобство всего экрана.

Правила типографики дизайн-системы Radix Themes

Продуманная иерархия текста

Дайте экрану один чёткий заголовок, а затем разграничьте заголовки разделов, основной текст, подписи к полям и вспомогательные метаданные. Используйте минимум размеров, достаточный, чтобы показать эти взаимосвязи. На насыщенных экранах продукта читаемые подписи важнее крупного декоративного шрифта. Размещайте поясняющий абзац рядом с элементом управления, к которому он относится, а подписи оставляйте видимыми и после ввода значения. Текст-подсказка — это дополнение, а не замена подписи поля.

Типографическая шкала и насыщенность

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

Выбор шрифта и резервные варианты

Radix Themes по умолчанию использует системный стек шрифтов. Сохраняйте этот стек, если совместимость важнее конкретного фирменного шрифта, или настройте лицензированный шрифт с помощью документированного механизма кастомизации. На сайте OpenDesign используется Albert Sans; это не означает, что Albert Sans — официальный шрифт Radix. Для многоязычных приложений проверяйте типичные китайские, японские и корейские строки, а также длинные подписи на европейских языках с реальными резервными шрифтами.

Числа, код и переносы

Выравнивайте числовые столбцы, чтобы значения можно было сравнивать по вертикали. Для кода, идентификаторов и токенов, где важны границы символов, используйте моноширинное начертание. Позволяйте заголовкам и описаниям переноситься естественным образом; не обрезайте важные инструкции ради одинаковой высоты карточек. Для строки без пробелов, например идентификатора, предусмотрите контролируемый перенос или возможность копирования. На мобильных устройствах сохраняйте полный смысл содержимого, даже если компоновка меняется.

Длина текста — часть дизайна

Прежде чем считать компонент пригодным для повторного использования, проверьте его с длинным названием проекта, двухстрочной ролью участника и переведённой подписью действия. По возможности позволяйте кнопкам расширяться, а не задавайте всем фиксированную ширину. Ограничивайте ширину основного текста комфортной для чтения величиной, а когда нужно сравнить параллельные факты, используйте списки или таблицу. Не разбивайте пояснения на множество мелких декоративных карточек только ради более «дизайнерского» вида страницы.

Стили и состояния компонентов дизайн-системы Radix Themes

Кнопки и иерархия действий

В каждой группе действий определите основное решение и выделите его сильнее остальных. Второстепенные действия должны быть заметны, но не конкурировать на равных с основным. Отделяйте деструктивные действия от обычного подтверждения. Во время отправки блокируйте повторные операции и показывайте ход выполнения; после завершения показывайте фактический результат. Если причина недоступности кнопки не очевидна из формы, рядом должно быть понятное объяснение.

Поля ввода и формы

• Размещайте постоянную подпись над полем ввода или рядом с ним.
• Размещайте справочный текст рядом с соответствующим полем, а сообщения проверки привязывайте к самому полю, а не только выводите в общей плашке.
• Сохраняйте введённые значения, если проверка завершилась ошибкой.
• Объединяйте связанные поля под содержательным заголовком раздела.
• Используйте подходящий тип поля ввода и значение автозаполнения, чтобы браузер и вспомогательные инструменты могли помочь пользователю выполнить задачу.

Карточки, списки и таблицы

Используйте карточку для самостоятельного объекта с содержательным кратким описанием и действием. Для последовательности однотипных записей подойдёт список, а для сравнения атрибутов разных записей — таблица. Показывайте реальные поля, например владельца, время обновления и статус, а не декоративные фрагменты диаграмм. Не делайте карточку кликабельной так, чтобы это конфликтовало со вложенными ссылками или кнопками: выберите понятную область ссылки и сохраните стандартное поведение клавиатуры.

Навигация и выбор

Отделяйте глобальную навигацию от вкладок страницы и локальных фильтров. Активный раздел должен оставаться различимым и без опоры только на акцентный цвет. Для навигации используйте ссылки, а для изменений на месте — кнопки. Если реализуете шаблон вкладок, предусмотрите управление с клавиатуры; в противном случае используйте ясно подписанную группу обычных кнопок. Не придавайте ряду стилизованных визуально промежутков вид интерактивных элементов, если с ними нельзя взаимодействовать.

Меню, диалоговые окна и оверлеи

При создании продукта React для сложного поведения используйте штатный компонент библиотеки. У диалогового окна должны быть заголовок, понятный способ закрытия, корректное управление фокусом и возврат фокуса к элементу, который его открыл. Не создавайте модальное окно из карточки с абсолютным позиционированием, если не обеспечили такое поведение. Сосредоточьте диалог на одном решении; для продолжительных сценариев редактирования часто лучше выделить отдельную страницу, чем всё сильнее перегружать оверлей.

Загрузка, пустое состояние, ошибка и успех

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

Компоновка, отступы и плотность в дизайн-системе Radix Themes

Используйте единую шкалу отступов

Документированная шкала отступов включает девять базовых шагов: 4, 8, 12, 16, 24, 32, 40, 48 и 64 пикселя. Используйте небольшие шаги между тесно связанными элементами управления, а более крупные — между самостоятельными разделами. Сохраняйте визуальную связь заголовка с его содержимым. Не распределяйте пустое пространство равномерно только ради заполнения экрана: близость элементов должна показывать, какая информация относится друг к другу.

Плотность зависит от задачи

В каталоге ресурсов нужно показывать достаточно записей, чтобы их можно было сравнивать. Форме настроек требуется место для подписей, справочного текста и ошибок. На странице для чтения нужны стабильная ширина текстовой колонки и видимое содержание. Выбирайте плотность с учётом задачи, а не применяйте одинаковый размер карточек повсюду. В Radix также есть настройка масштабирования, которая согласованно меняет связанные размеры; прежде чем сделать компактный масштаб настройкой продукта по умолчанию, оцените читаемость и размеры интерактивных областей.

Сетка и поведение контейнера

Начните с контейнера страницы, затем задайте основную область содержимого и вспомогательную боковую панель, если она нужна. Даже при широкой внешней области размещайте длинный текст в колонке удобной для чтения ширины. На узких экранах перенесите вспомогательное содержимое под основное или преобразуйте длинную боковую панель в доступный элемент локальной навигации. Сохраняйте порядок элементов в исходном коде, чтобы последовательность на мобильном устройстве и порядок перехода клавишей Tab оставались понятными независимо от расположения в сетке для компьютеров.

Сначала строки, а не вложенные карточки

В компактном справочнике токенов разместите название, значение и применение в одной строке для быстрого просмотра. В каталоге держите вместе название, категорию, описание и ссылку. Многослойные вложенные блоки добавляют визуальный шум и занимают ширину, которая нужна содержимому. Между связанными строками лучше использовать тонкий разделитель; оставляйте рамку панели для действительно другого контекста, например интерактивного предпросмотра или примера кода.

Не скрывайте важное содержимое

Не сокращайте подробное руководство до кратких сводок только ради уменьшения длины страницы. Добавьте содержание и выразительные подзаголовки, чтобы читатели могли перейти к нужному разделу. Если фильтр или аккордеон меняет видимость содержимого, пустое и выбранное состояния должны быть понятны. Не создавайте отдельную прокручиваемую область для списка, если для этого нет реальной необходимости: для длинной подборки ресурсов обычно удобнее обычная прокрутка страницы.

Радиус, глубина и анимация в дизайн-системе Radix Themes

Радиусы должны сочетаться

В Radix есть именованные настройки радиуса и контекстное поведение компонентов. Выбирайте настройку на уровне темы, а не задавайте один произвольный радиус всем элементам. Кнопка, флажок и большая панель выполняют разные структурные роли. Сохраняйте согласованность их форм, не стирая различий между ролями. Если в собственном компоненте используется токен радиуса, сравните его со штатными кнопкой и полем ввода, прежде чем решать, что он подходит той же системе.

Глубина помогает различать слои

Используйте глубину, чтобы отличать наложенный элемент от страницы под ним, а интерактивную панель — от спокойного фона. Radix предлагает шестиступенчатую шкалу теней. Не воспринимайте индекс тени как декоративный рейтинг популярности карточек. В каталоге с большим количеством элементов часто достаточно одних границ. Проверяйте тени в обоих режимах оформления: размытие, скопированное из светлого режима на тёмную поверхность, может исчезнуть или создать ореол, который передаёт неверное ощущение глубины.

Анимация должна пояснять изменения

Используйте короткие переходы, чтобы показать выбор, открытие, ход выполнения или переход между связанными состояниями. Не задерживайте появление контента ради анимации входа. Не используйте непрерывное движение фона на экране для работы. Учитывайте настройки уменьшения движения и сохраняйте читаемость конечного состояния, когда переходы отключены. Выбор времени для пользовательской реализации — решение приложения; это руководство не придумывает официальные токены длительности Radix, если их существование не подтверждено.

Взаимодействие без украшательства

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

Radix Themes: что следует и чего не следует делать в дизайн-системе

Следует: создать один законченный экран

Создайте экран с реальной навигацией, содержательным контентом, основным действием и хотя бы одним нестандартным состоянием. Прежде чем извлекать десятки повторно используемых компонентов, проверьте экран целиком. Зафиксируйте осознанные решения: акцентный цвет, плотность, типографическую шкалу и текст для пустого состояния. Это даст агенту кодирования конкретные требования и упростит выявление отклонений в последующих итерациях.

Следует: обеспечить согласованность встроенных и пользовательских компонентов

По возможности используйте существующие компоненты библиотеки для уже поддерживаемого ею поведения. В пользовательских обёртках применяйте переменные темы и проверяйте их в обоих режимах оформления. Сохраняйте подписи и семантические HTML при стилизации. Если в проекте уже есть дизайн-система, сравните её с этим примером, прежде чем заменять: второй неконтролируемый слой темы может добавить несогласованности вместо того, чтобы её устранить.

Не следует: пытаться воссоздать бренд простой заменой цветов

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

Не следует: жертвовать смыслом ради более чистого скриншота

Radix Themes: адаптивность и доступность в дизайн-системе

Сначала перестраивайте структуру, а не уменьшайте её

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

Осмысленно используйте документированные контрольные точки

Официальные названия контрольных точек: initial, xs, sm, md, lg и xl. Их минимальная ширина — 0, 520, 768, 1024, 1280 и 1640 пикселей соответственно. Считайте их доступными инструментами, а не обязательными точками изменения макета на каждом шаге. Добавляйте контрольную точку, когда контенту нужна другая компоновка. Проверяйте не только сами контрольные точки, но и ширину между ними, чтобы обнаружить нестабильные промежуточные макеты.

Клавиатура и фокус

• Для всех значимых действий должен быть предусмотрен способ взаимодействия с клавиатуры.
• Сделайте видимое состояние фокуса отличным от состояния при наведении и не допускайте, чтобы оно обрезалось контейнером вместе с его содержимым.
• Избегайте положительных значений tabindex: они могут непредсказуемо менять порядок элементов управления.
• После изменения фильтра оставляйте фокус на элементе управления и сообщайте краткое количество результатов.
• После закрытия модального окна возвращайте фокус в подходящее место, а не в начало документа.

Подписи, области нажатия и вспомогательный текст

Задавайте действиям только со значком доступное имя, описывающее действие, а не форму значка. Обеспечьте удобный размер области нажатия, даже если визуально значок маленький. Исключайте декоративные значки из дерева доступности. Сообщайте об обновлениях, например о сохранённых изменениях или количестве результатов поиска, не объявляя повторно несвязанный контент. Если состояние обозначено и значком, и текстом, не допускайте дублирования сообщения для программ чтения с экрана.

Проверяйте на реальном контенте

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

Radix Themes: руководство по настройке агента и реализации дизайн-системы

Подготовьте контекст проекта

1. Расскажите агенту кодирования, что создаётся, кто будет этим пользоваться, какое действие является основным и в каких существующих файлах описан текущий дизайн.
2. Приложите это руководство как справочник, а не просите агента подражать неуказанному скриншоту.
3. При использовании React укажите, что следует отдавать предпочтение встроенным компонентам Radix Themes.
4. При использовании другого стека попросите явно обозначить свою интерпретацию и проверьте, какая дополнительная работа над взаимодействием потребуется.

Задайте требования к первой законченной версии

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

Проверяйте в порядке, позволяющем выявить реальные проблемы

1. Сначала убедитесь, что экран позволяет выполнить нужную задачу.
2. Затем сравните иерархию информации, отступы, типографику и цвета с выбранным образцом.
3. И наконец, проверьте интерактивные состояния и адаптивные макеты.
4. Не принимайте визуальное изменение только потому, что страница собирается или скриншот выглядит аккуратно.
5. Убедитесь, что после визуальных корректировок по-прежнему работают длинный контент, обработка ошибок и повторные действия.

Развивайте систему, фиксируя решения

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

Известные границы и источники