Calendly
Темно-синє чорнило на холодному мармурі
Calendly сприймається як спокійний, впевнений робочий простір для планування: майже біле полотно з великим простором для дихання, чіткі білі картки товарів, що ширяють на прохолодному сірому фоні, і вся друкарня, виконана темно-синім чорнилом, а не суто чорним. Визначальним елементом є темно-синій колір (#0b3558), що використовується скрізь, де з'являється текст - заголовки, кнопки, значки, посилання - що пом'якшує весь інтерфейс, роблячи його теплішим і стильнішим, ніж типова цільова сторінка SaaS-сервісу. Один яскравий синій колір (#006bff) використовується для всіх основних дій, а декоративні рожеві та блакитні плями, що виходять за макети товарів, додають тепла, не створюючи безладдя. Компоненти залишаються стриманими: тонкі межі 1px, ледь помітні тіні із синім відтінком, великі радіуси карток 24px та кути кнопок 8px, які виглядають продуманими, а не м'якими.
Максимальна ширина 1200px, центрування, широкі зовнішні поля на настільних комп'ютерах. Головний екран розділений на дві колонки: ліва колонка містить заголовок 80px + основний текст + кнопки входу, розташовані один над одним, права колонка містить картку віджету бронювання, на тлі якої знаходяться декоративні елементи. Під головним екраном розташована смуга з логотипом Trust у вигляді єдиної смуги на всю ширину. Наступні розділи чергуються між центрованими блоками заголовка (H2 + підтекст + необов'язковий заклик до дії), за якими йдуть двоколонні блоки з описом функцій (текст ліворуч/товар праворуч або товар ліворуч/текст праворуч) з декоративними акцентними елементами за кожним зображенням товару. Карткові сітки зустрічаються рідко - у макеті перевага надається парним розділам, розташованим поруч, а не багатоколоночним сіткам. Відстань між розділами складає 48-64px. Навігація являє собою 64px фіксовану верхню панель з логотипом зліва, центрованим меню та групою закликів до дії праворуч.
Основним візуальним елементом є скріншоти продукту - лаконічні макети інтерфейсу користувача календаря бронювання, виконані на білих картках з широкими закругленими кутами. Декоративне оформлення: кожна картка продукту оточена м'якою плямою коралово-пурпурового (#e55cff) або небесно-блакитного (#0099ff) кольору, злегка зміщеним та розмитим, що створює ефект колажу, а не плоский скріншот. Ніяких фотографій, жодних зображень у стилі лайфстайл — всі візуальні елементи є інтерфейсом користувача, абстрактними акцентними формами або монохромними логотипами партнерів на смузі довіри. Іконки виконані в лінійному стилі з товщиною лінії 1,5-2px, монохромні, у темно-синьому кольорі (Ink Navy) або синьому (Signal Blue).
Палітра
Бренд
- Ink Navy
#0b3558— Основний текст, заголовки, іконки, темний фон для дії, навігаційні посилання. - Signal Blue
#006bff— Основний заклик до дії (CTA), активна навігація, акценти для посилань, вибрані штати
Нейтральні
- Carbon
#0a0a0a— Текст в чисто чорний колір (резервний варіант), гліф логотип, заливка значок. - Slate Gray
#476788— Додатковий основний текст, допоміжний текст, приглушені позначки. - Mist Gray
#a6bbd1— Відключений текст, неактивні позначки функцій, світлі обведення значків - Cloud
#f8f9fb— Полотно сторінки, фон нижнього колонтитулу, додаткова поверхня - Paper
#ffffff— Картку поверхню виступає панелі, текст кнопок на темному тлі. - Pebble
#f0f3f8— Фонові зображення для значків, заливка полів введення, ледь помітні роздільники, ефекти при наведенні курсору.
Друкарня
від 12 до 80px · 10 ступенів
- Gilroy — заміна: Manrope · зображення 400, 500, 600, 700 · Весь текст інтерфейс. Gilroy – це геометричний гуманістичний шрифт без засічок з широкими апертурами та рівномірним контрастом штрихів; його жирні зображення (700) використовуються для заголовків, а 500-600 - для кнопок і підзаголовків. Замініть на Manrope чи Inter.
- Gilroy — заміна: Inter · зображення 400 · Основний текст і універсальні мітки користувальницького інтерфейсу - шрифт товщиною 400 забезпечує читання довгих текстів, не створюючи відчуття тяжкості.
- Gilroy — заміна: Inter · зображення 500 · Другорядні заголовки та виділений основний текст — шрифт 14/500 є основним інструментом для заголовків карток та вбудованих міток.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 8-16px |
| Радіус кнопок | 8px |
| Радіус карток | 24px |
| Тіні | ні — межі замість тіней |
| Між секціями | 48-64px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Calendly і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Monad — редакційний технічний журнал на теплому пергаменті
- Dub — матова панель управління Link на рисовому папері
- Seline Analytics — Тихий аналітичний стіл на теплий папір
- Notion — Теплий паперовий блокнот під полуденним сонцем
- Anthropic — Науковий польовий журнал на теплому пергаменті — спокійні поверхні кольору слонової кістки, редакційні заголовки із засічками та єдиний глиняний акцент, що з'являється лише тоді, коли потрібно діяти
- Augen Pro — Презентація Apple на білому тлі — клінічний, невагомий, електричний синій як єдиний акцент у монохромному просторі
- Antimetal — Редакційна хроніка на кремовому папері – тихий ранок у науковому журналі, де стриманість свідчить про впевненість, а засічки виконують основну роботу.
- Perk — Електричний лайм на теплому пергаментному папері
- Ditto — Залита сонцем майстерня зі створення зразків польових кольорів. Теплі кремові поверхні, яскравий жовтий основний колір, глибокі темно-сині чорнила, органічні колірні форми, що розквітають за виробом
- Officevibe — Редакційний журнал на папір теплого кремового кольору. Уявіть собі вдумливе есе з управління персоналом, оформлене у вигляді продукту — курсивний шрифт із засічками, що ніби шепоче крізь сучасний синій інтерфейс.