White, Gray10, Gray90, Gray100 темы

White Цветовой токен White обозначает чисто белый цвет (#FFFFFF) и является базовым элементом цветовой палитры Carbon. Используется преимущественно для фона компонентов, контрастного текста на тёмных панелях и выделения интерактивных элементов. В Svelte его применение часто реализуется через CSS-переменные или через пропсы компонентов, например:

Ключевые моменты использования White:

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

Gray10 Gray10 — это светло-серый оттенок (#F4F4F4), применяемый в интерфейсах для создания мягких фонов, разделителей и нейтральных панелей. Он обеспечивает визуальное разграничение блоков без резких контрастов. В Svelte компонентах Carbon его можно использовать напрямую через CSS-классы или переменные:


  Контейнер с серым фоном

Основные сценарии применения Gray10:

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

Gray90 Gray90 (#262626) — тёмный серый цвет, используемый для текста, иконок и элементов с высоким контрастом. Он обеспечивает хорошую читаемость на светлом фоне и менее агрессивен, чем чистый чёрный (#000000). В Svelte компонентах Carbon применяется для основного текста и заголовков:


  Основной текст на светлом фоне

Рекомендации по использованию Gray90:

  • Текст, требующий высокой читаемости.
  • Иконки и интерактивные элементы на светлом фоне.
  • Можно сочетать с Gray10 для создания визуальной иерархии элементов.

Gray100 Gray100 (#161616) — почти чёрный цвет, используется для акцентного текста, элементов интерфейса с максимальным контрастом и в тёмных режимах интерфейса. В Svelte компонентах Carbon его применяют через стили или переменные для создания визуальной силы элементов:


  Заголовок высокой контрастности

Особенности применения Gray100:

  • Высококонтрастный текст и элементы управления.
  • Часто используется в сочетании с белым (White) или светлыми оттенками серого для создания контрастной визуальной структуры.
  • Предпочтителен для выделения ключевых элементов интерфейса.

Практическое сочетание токенов в Svelte

Использование токенов White, Gray10, Gray90 и Gray100 позволяет создавать слоистые интерфейсы с чёткой визуальной иерархией:


  
Заголовок секции

  

    Основной текст на светлом фоне с использованием серого 90.
  

  

    Карточка с белым фоном

Эти четыре токена обеспечивают баланс между контрастностью, нейтральностью и читаемостью, создавая основу для любой дизайн-системы на Carbon Components Svelte.

Оглавление