Названия и применение цветовых стилей в проекте

Привет! Мы решили навести порядок с цветовыми стилями в проекте.
Проблема: изначально старались использовать семантические названи, но что-то пошло не так. Появились названия, которые описывают и внешний вид (например, gray-blue-color), и место применения (например, main-bg-color).

Что хотим сделать:

  1. Синхронизировать нейминг слоёв в фигме и сторибуке.
  2. Сделать так, чтобы дизайнеры чётко понимали, где какой стиль используем.
  3. Не раздувать количество стилей до бесконечности.
  4. Легко поддерживать тёмную тему.

Какие есть варианты сейчас:

  1. Одна часть команды предлагает использовать палитру из нескольких основных цветов и их оттенки. С неймингом типа такого: “primary-bright300”, “secondary-dark200” и так далее. Плюс: получится компактный набор стилей. Минус: негибко.
  2. Другая – семантические названия, которые говорят о месте применения, типа “text-main”, “text-success” и так далее. Плюсы: легко назначать стили и делать макеты тёмной темы в 1 клик. Минусы: может получится раздутая библиотека стилей.

Расскажите пожалуйста, как вы поступаете в своих проектах. Какие есть проблемы? Какой способ – меньшее зло?) Или может есть какой-то третий?

Возьмите меня к себе работать )) Хоть посмотрю на монстров этих, которые цветовые стили))

По теме: я бы предложила называть стили по названиям элементов, для которых они применяются.

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