«Кав'ярня» — це демонстраційний сайт для кафе українською мовою. Ми зробили його як приклад того, як проєктуємо сайти на власній дизайн-системі: від токенів і компонентів до готових сторінок із меню, кошиком і оформленням замовлення.
Що це за проєкт
Сайт для кав'ярні з вітриною меню, картками товарів, кошиком і оформленням замовлення — побудований на наскрізній дизайн-системі. Окрема сторінка демонструє самі токени і компоненти, на яких зібрано весь сайт.
Для кого і навіщо
Підходить кав'ярням, кафе, пекарням і закладам, які хочуть сучасний сайт із меню та онлайн-замовленням. На прикладі видно, що отримує клієнт: апетитну вітрину, зрозуміле меню, робочий кошик і єдиний стиль, який легко перефарбувати під бренд.
Дизайн-система — головна ідея
В основі — дизайн-токени (кольори, типографіка, відступи, радіуси, тіні) і бібліотека UI-компонентів. Це дає візуальну цілісність і швидкий ребрендинг: змінюєш токени — оновлюється весь сайт.
- тепла «кавова» палітра, чистий сучасний стиль;
- крупна типографіка, багато «повітря», м'які тіні, скруглення;
- mobile-first і повна адаптивність, мобільне меню-оверлей;
- доступність (фокус-стани, клавіатура), семантичний HTML;
- зображення у WebP, іконки — інлайновий SVG без сторонніх бібліотек;
- окрема сторінка «Дизайн-система» — вітрина токенів і компонентів.
Сайт: що вміє
- головна: hero, переваги, хіти меню, блок «про нас», відгуки, заклик до дії;
- меню: картки товарів за категоріями (кава, холодні напої, зерно, десерти);
- сторінка товару: фото, опис, ціна, вибір кількості, кошик, схожі позиції;
- кошик: список позицій, зміна кількості, розрахунок суми й доставки, оформлення;
- «Про нас» і «Контакти»: історія, цінності, форма зв'язку з валідацією, години роботи, локація.
Технічні фішки
Єдина дизайн-система на CSS-змінних, SEO-оптимізація (унікальні meta, Open Graph, семантична розмітка), швидке завантаження (WebP, мінімум скриптів) і бездоганна адаптивність.
Потрібен сайт для закладу?
Зробимо сайт для кафе чи бізнесу на власній дизайн-системі — від мінімального сайту до магазину. Подивіться рішення під вашу нішу або одразу отримайте оцінку проєкту.
