Буд Двір: UI-кіт кольорів

Зараз у стилях сайту суцільних кольорів 62, напівпрозорих 64 (20 базових кольорів з різною прозорістю). Нижче вони зведені в одну систему: 21 токен, у кожного одна роль. Три гами відрізняються тим, кому дістається жовтий і який колір у посилань. Знімки зроблені з живого стенда, перефарбованого під кожну гаму; сам стенд поки не змінювався.

A і D поруч

Однакові сторінки стенда: ліворуч A (твої рішення як є, кнопки одного кольору), праворуч D (те саме, але без жовтого на картках і повзунку).

AD

A, телефонD, телефон

Зараз: 62 кольорів

Кожен квадрат є окремим кольором у CSS, число показує, скільки разів він трапляється. Сірих і майже чорних 44 (фони, рамки, текст): багато з них на око не відрізняються, але в коді це різні кольори. Фіолетових 9, жовтих 4.

Фони 17

#FFFFFF452×

#EBEDF192×

#EAECF081×

#F8F9FA39×

#F4F5F730×

#EFF0F413×

#EAECF18×

#F1F2F58×

#F4F5F87×

#FFFCE04×

#F2F5F94×

#E9EDF34×

#E9DEFB4×

#F3EBFF4×

#F2F3F54×

#FBFBFC3×

#ECEDF23×

Рамки 8

#CED1D950×

#DDE0E832×

#E5E8ED32×

#D9DCE46×

#C9CBCA4×

#AEB6C44×

#B8BBC33×

#CFC3E81×

Текст 19

#636569102×

#00000056×

#3E404439×

#71737722×

#0C0C0C16×

#1F273612×

#41434711×

#7A7C8010×

#2B2B2B8×

#98A1B08×

#29313D8×

#36383C7×

#5052566×

#33405A4×

#9BA5B44×

#171D274×

#93A0AF4×

#A0A3A94×

#8A8D934×

Фіолетові 9

#2D0073344×

#753CBD162×

#C7AAF035×

#A98FD424×

#DCCBF612×

#43109A12×

#5F2FA04×

#B9A9DC2×

#B79BE42×

Жовті 4

#FAE600151×

#E5D4009×

#FFF3A64×

#E8D6001×

Інші 5

#1E7A3E4×

#2DB55D4×

#1A66D64×

#0E4BA84×

#C0392B4×

A. Фіолетові дії, твої рішення як є

Усі кнопки дій фіолетові (на фіолетовому тлі білі), посилання сині, жовтий: бренд (логотип, кнопка каталогу, банери) і підсвітка наявності. Твої рішення 14-15.10 збережені: м’яка жовта смужка «Самовивіз сьогодні», зелені прозорі мітки з блюром, жовті кружки повзунка. Змінюється лише те, що кнопки дій і відтінки сірого стають одного кольору.

Не скасовує жодного твого рішення.

#2D0073Основний: шапка, кнопки дій, вибране

#43109AОсновний при наведенні

#FAE600Бренд-жовтий

#1A66D6Посилання

#EDEFF3Фон сторінки

#FFFFFFКартки й острови

#F5F6F8Поля вводу, сірі підкладки

#E3E6EBРамка

#16131FТекст

#5C5F67Другорядний текст

#6B6E76Підписи, лічильники

#1E7A3EНаявність

#C62828Помилка

#EFEAFAСвітла фіолетова підкладка (наведення на білій кнопці)

Шапка

Буд Двір▦ Каталог товарівЗнайти товар…ЗнайтиЗамовити дзвінок

Кнопка дії «Замовити»

Замовити

звичайна

Замовити

наведення

Замовити

натиснута

Замовити

фокус з клавіатури

Замовити

вимкнена

Жовта кнопка каталогу

Каталог товарів

звичайна

Каталог товарів

наведення

Другорядна кнопка

Фільтри

звичайна

Фільтри

наведення

Обговорити умови

контурна

Обговорити умови

контурна, наведення

Посилання

Перейти в категорію

у тексті

Перейти в категорію

наведення

Перейти в категорію

фокус з клавіатури

Головна › Плитка

крихти

Чипи підкатегорій і сортування

Клей

звичайний

Клей

наведення

Клей

вибраний

Клей

фокус

дорожчі

сортування

дешевші

сортування, вибране

Фільтри

Cersanit (91)

галочка

Cersanit (91)

наведення

Cersanit (91)

вибрана

300×600

плитка

300×600

плитка, наведення

300×600

плитка, вибрана

300×600

плитка, фокус

Cersanit (91)

галочка, фокус

повзунок ціни

Керамограніт ✕

вибране над товаром

Поле вводу і вкладки

від 500

поле

від 500

поле, фокус

067 12⚠ Номер з 10 цифр, наприклад 067 123 45 67

поле, помилка

Суміші

вкладка

Плитка

вкладка, вибрана

Картка товару

В наявності

🚚 Самовивіз сьогодні

Керамограніт Cersanit 60×60612 ₴ / м²Бренд: CersanitЗамовити

Під замовлення

🚚 Доставка на об’єкт

Клей для плитки Ceresit CM 11Ціна за запитомБренд: CeresitДізнатись ціну

D. Спокійна: кнопки як в A, без жовтого на картках

Проміжна між A і B (Влад 15.10.2026: «зроби четверту гаму, покажи поруч з A»). Кнопки дій фіолетові, як в A, посилання сині. Жовтий лишається тільки брендом: логотип, кнопка каталогу, банери. Смужка «Самовивіз сьогодні» і мітки наявності нейтральні, наявність показує зелена крапка, повзунок фіолетовий.

Скасовує твої рішення:жовту смужку «Самовивіз сьогодні» (14.10) стає сірою
зелені прозорі мітки з блюром (14.10) стають білими з зеленою крапкою
жовті кружки повзунка (15.10) стають білими з фіолетовим

#2D0073Основний: шапка, кнопки дій, вибране

#43109AОсновний при наведенні

#FAE600Бренд-жовтий

#1A66D6Посилання

#EDEFF3Фон сторінки

#FFFFFFКартки й острови

#F5F6F8Поля вводу, сірі підкладки

#E3E6EBРамка

#16131FТекст

#5C5F67Другорядний текст

#6B6E76Підписи, лічильники

#1E7A3EНаявність

#C62828Помилка

#EFEAFAСвітла фіолетова підкладка (наведення на білій кнопці)

Шапка

Буд Двір▦ Каталог товарівЗнайти товар…ЗнайтиЗамовити дзвінок

Кнопка дії «Замовити»

Замовити

звичайна

Замовити

наведення

Замовити

натиснута

Замовити

фокус з клавіатури

Замовити

вимкнена

Жовта кнопка каталогу

Каталог товарів

звичайна

Каталог товарів

наведення

Другорядна кнопка

Фільтри

звичайна

Фільтри

наведення

Обговорити умови

контурна

Обговорити умови

контурна, наведення

Посилання

Перейти в категорію

у тексті

Перейти в категорію

наведення

Перейти в категорію

фокус з клавіатури

Головна › Плитка

крихти

Чипи підкатегорій і сортування

Клей

звичайний

Клей

наведення

Клей

вибраний

Клей

фокус

дорожчі

сортування

дешевші

сортування, вибране

Фільтри

Cersanit (91)

галочка

Cersanit (91)

наведення

Cersanit (91)

вибрана

300×600

плитка

300×600

плитка, наведення

300×600

плитка, вибрана

300×600

плитка, фокус

Cersanit (91)

галочка, фокус

повзунок ціни

Керамограніт ✕

вибране над товаром

Поле вводу і вкладки

від 500

поле

від 500

поле, фокус

067 12⚠ Номер з 10 цифр, наприклад 067 123 45 67

поле, помилка

Суміші

вкладка

Плитка

вкладка, вибрана

Картка товару

В наявності

🚚 Самовивіз сьогодні

Керамограніт Cersanit 60×60612 ₴ / м²Бренд: CersanitЗамовити

Під замовлення

🚚 Доставка на об’єкт

Клей для плитки Ceresit CM 11Ціна за запитомБренд: CeresitДізнатись ціну

B. Жовті кнопки дій, як gost

Усі кнопки дій жовті з фіолетовим текстом (на фіолетовому тлі теж жовті), фіолетовий лишається за шапкою, футером і вибраними станами, посилання сині. Щоб жовтий не мав трьох ролей одразу, смужка карток нейтральна, а повзунок фіолетовий.

Скасовує твої рішення:жовту смужку «Самовивіз сьогодні» (14.10) стає сірою
жовті кружки повзунка (15.10) стають білими з фіолетовим

#2D0073Основний: шапка, кнопки дій, вибране

#43109AОсновний при наведенні

#FAE600Бренд-жовтий

#1A66D6Посилання

#EDEFF3Фон сторінки

#FFFFFFКартки й острови

#F5F6F8Поля вводу, сірі підкладки

#E3E6EBРамка

#16131FТекст

#5C5F67Другорядний текст

#6B6E76Підписи, лічильники

#1E7A3EНаявність

#C62828Помилка

#EFEAFAСвітла фіолетова підкладка (наведення на білій кнопці)

Шапка

Буд Двір▦ Каталог товарівЗнайти товар…ЗнайтиЗамовити дзвінок

Кнопка дії «Замовити»

Замовити

звичайна

Замовити

наведення

Замовити

натиснута

Замовити

фокус з клавіатури

Замовити

вимкнена

Жовта кнопка каталогу

Каталог товарів

звичайна

Каталог товарів

наведення

Другорядна кнопка

Фільтри

звичайна

Фільтри

наведення

Обговорити умови

контурна

Обговорити умови

контурна, наведення

Посилання

Перейти в категорію

у тексті

Перейти в категорію

наведення

Перейти в категорію

фокус з клавіатури

Головна › Плитка

крихти

Чипи підкатегорій і сортування

Клей

звичайний

Клей

наведення

Клей

вибраний

Клей

фокус

дорожчі

сортування

дешевші

сортування, вибране

Фільтри

Cersanit (91)

галочка

Cersanit (91)

наведення

Cersanit (91)

вибрана

300×600

плитка

300×600

плитка, наведення

300×600

плитка, вибрана

300×600

плитка, фокус

Cersanit (91)

галочка, фокус

повзунок ціни

Керамограніт ✕

вибране над товаром

Поле вводу і вкладки

від 500

поле

від 500

поле, фокус

067 12⚠ Номер з 10 цифр, наприклад 067 123 45 67

поле, помилка

Суміші

вкладка

Плитка

вкладка, вибрана

Картка товару

В наявності

🚚 Самовивіз сьогодні

Керамограніт Cersanit 60×60612 ₴ / м²Бренд: CersanitЗамовити

Під замовлення

🚚 Доставка на об’єкт

Клей для плитки Ceresit CM 11Ціна за запитомБренд: CeresitДізнатись ціну

C. Ризикова: фіолетовий моно

Свідомо ризикована: усе в одній фіолетовій родині. Кнопки дій фіолетові, посилання фіолетові, смужки й мітки світло-фіолетові, жовтий тільки в логотипі й кнопці каталогу. Найцілісніша, але скасовує кілька твоїх рішень.

Скасовує твої рішення:сині посилання, як на Prom (14.10)
жовту смужку «Самовивіз сьогодні» (14.10)
зелені мітки наявності (14.10)
жовті кружки повзунка (15.10)

#2D0073Основний: шапка, кнопки дій, вибране

#43109AОсновний при наведенні

#FAE600Бренд-жовтий

#5B2BB5Посилання

#F0EEF6Фон сторінки

#FFFFFFКартки й острови

#F6F4FAПоля вводу, сірі підкладки

#E4E0EEРамка

#16131FТекст

#5C5F67Другорядний текст

#6B6E76Підписи, лічильники

#1E7A3EНаявність

#C62828Помилка

#EFEAFAСвітла фіолетова підкладка (наведення на білій кнопці)

Шапка

Буд Двір▦ Каталог товарівЗнайти товар…ЗнайтиЗамовити дзвінок

Кнопка дії «Замовити»

Замовити

звичайна

Замовити

наведення

Замовити

натиснута

Замовити

фокус з клавіатури

Замовити

вимкнена

Жовта кнопка каталогу

Каталог товарів

звичайна

Каталог товарів

наведення

Другорядна кнопка

Фільтри

звичайна

Фільтри

наведення

Обговорити умови

контурна

Обговорити умови

контурна, наведення

Посилання

Перейти в категорію

у тексті

Перейти в категорію

наведення

Перейти в категорію

фокус з клавіатури

Головна › Плитка

крихти

Чипи підкатегорій і сортування

Клей

звичайний

Клей

наведення

Клей

вибраний

Клей

фокус

дорожчі

сортування

дешевші

сортування, вибране

Фільтри

Cersanit (91)

галочка

Cersanit (91)

наведення

Cersanit (91)

вибрана

300×600

плитка

300×600

плитка, наведення

300×600

плитка, вибрана

300×600

плитка, фокус

Cersanit (91)

галочка, фокус

повзунок ціни

Керамограніт ✕

вибране над товаром

Поле вводу і вкладки

від 500

поле

від 500

поле, фокус

067 12⚠ Номер з 10 цифр, наприклад 067 123 45 67

поле, помилка

Суміші

вкладка

Плитка

вкладка, вибрана

Картка товару

В наявності

🚚 Самовивіз сьогодні

Керамограніт Cersanit 60×60612 ₴ / м²Бренд: CersanitЗамовити

Під замовлення

🚚 Доставка на об’єкт

Клей для плитки Ceresit CM 11Ціна за запитомБренд: CeresitДізнатись ціну