Приступая к вёрстке, страницы или модального окна (далее просто целевая страница)
Последовательная дорожная карта:
1. Открываем 2 макета в фигме с целевой страницей и с UI KIT всего дизайна.
2. Визуально и при помощи мыши, оцениваем, какие на целевой странице используются цвета (палитра), шрифты, кнопки, ссылки, поля ввода и т.п. элементы, которые есть в UI KIT дизайнера. Это БАЗИС.
3. Правим sass переменные https://getbootstrap.com/docs/5.3/customize/sass/ (та же наша палитра только кодом), вносим в них всё необходимое что создал дизайнер для целевой страницы, правим/подгоняем компоненты.
4. Верстаем(добавляем) использованные на целевой странице компоненты в UI-KIT.html (просто в столбик и без логики, примеры элементов). Никто не требует создавать подобное https://designrevision.com/demo/shards-dashboard-lite/form-components.html а просто требуют ПРИМИТИВ!
5. Верстаем целевую страницу, собирая на ней использованные компоненты. Это НАДСТРОЙКА.
6. Сверяем с макетом, если нужно правим.
Базис определяет надстройку, её особенности, структуру, т. е. надстройка строится не произвольно, а в соответствии со своим базисом.