Перейти до основного вмісту

Дизайн-система

Scoutello має справляти враження теплого, компетентного продукту, орієнтованого на користь. Бажаний стиль — світлий, вільний, округлий та редакційний: спочатку чіткий контент, потім ненав’язливий фірмовий колір, м’які поверхні й спокійна анімація, яка робить продукт чутливим до дій, але не перетворюється на декоративний шум.

Маркетингова лендінг-сторінка є найкращим публічним орієнтиром поточного візуального напрямку. Поверхні продукту мають якомога ширше використовувати спільні дизайн-токени й ставати виразнішими лише тоді, коли поверхня безпосередньо пов’язана з брендом або маркетингом.

Логотип і фірмові ресурси​

Використовуйте логотип Scoutello з публічної URL-адреси ресурсу документації, коли агенту, інтеграції або згенерованій сторінці потрібен багаторазово використовуваний фірмовий знак:

Надавайте перевагу SVG-версії для чіткого відображення на екранах будь-якого розміру. Використовуйте PNG-версію, коли інструмент або платформа не підтримує SVG. Залишайте навколо знака достатньо вільного простору, не розтягуйте й не змінюйте його колір. Розміщуйте логотип на білих, теплих кремових або інших спокійних поверхнях, що зберігають контраст.

Фірмові кольори​

Основний колір: #ff8d49

Використовуйте основний помаранчевий як акцентний колір Scoutello: для основних закликів до дії, станів фокусу, активної навігації, невеликих фонів іконок, виділеного тексту, м’якого світіння та теплих градієнтів. У коді продукту цьому відповідає --primary: 24 100% 64%, а також такі класи Tailwind, як bg-primary, text-primary, border-primary/15 і shadow-primary/10.

Вторинний колір: #145466

Використовуйте насичений темно-бірюзовий як опорний колір. Він найкраще працює в градієнтах з основним помаранчевим, на темних панелях із закликами до дії, для створення візуальної глибини та в окремих акцентних фірмових елементах. Він не має замінювати основний помаранчевий як стандартний колір дії.

Додаткові кольори:

  • Теплі кремові фони: #fff8f1, #fff4ea, #fcf6f1 і м’які поверхні orange-50 / amber-50.
  • Нейтральні кольори продукту: білі картки, темний текст переднього плану, приглушений текст із непрозорістю близько 70–75% і світлі рамки.
  • Третинний синій: hsl(205 100% 51%) доступний як допоміжний токен, але його слід використовувати ощадливо, щоб помаранчевий і бірюзовий залишалися впізнаваною фірмовою парою.

Візуальний стиль​

Надавайте перевагу чистому, преміальному стилю SaaS із достатньою теплотою, щоб він не здавався шаблонним. Лендінг-сторінка поєднує кремові сітчасті фони, білі картки, великі знімки екрана продукту, округлені кути та стримані градієнти.

Використовуйте:

  • Округлені картки й панелі, часто від rounded-2xl до rounded-[2rem].
  • М’які рамки, як-от border-primary/10, border-primary/15, ring-black/5, а також світлі нейтральні рамки.
  • Багатошарові білі або кремові поверхні замість великих суцільних кольорових блоків.
  • Ненав’язливі тіні на кшталт shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 або власні тіні з низькою непрозорістю.
  • Великі знімки екрана продукту або макети інтерфейсу як доказ, особливо в маркетингових матеріалах і розповідях про функції.
  • Невеликі фірмові акценти: помаранчевий виділений текст, чипи з іконками, кільця, світіння та градієнтні CTA.

Уникайте:

  • Гучних помаранчевих фонів на всю сторінку.
  • Надмірного використання бірюзового для звичайних елементів керування.
  • Щільних, перевантажених компонувань.
  • Різких тіней, гострих прямокутників або холодних монохромних дашбордів.
  • Декоративної анімації, яка заважає читанню або виконанню завдань.

Типографіка​

На маркетинговому сайті використовуються:

  • Space Grotesk для заголовків через клас landing-display.
  • Manrope для основного маркетингового тексту.

Спільні поверхні застосунку та документації використовують системну UI-типографіку, яка наразі ближча до Inter. Мета стилю однакова для всіх поверхонь: упевнені заголовки, щільний трекінг у заголовках, читабельний основний текст і достатня висота рядка.

Рекомендації щодо заголовків:

  • Використовуйте великі, збалансовані заголовки на маркетингових сторінках.
  • Виділяйте основним помаранчевим лише важливу фразу.
  • Контролюйте довжину рядків за допомогою max-w-* і text-balance, якщо вони доступні.

Рекомендації щодо основного тексту:

  • Пишіть спокійно й прямо.
  • Для описів використовуйте приглушений колір тексту, зазвичай text-foreground/70 або text-foreground/75.
  • Надавайте перевагу зручним для сканування секціям, коротким абзацам і чітким підписам.

Компонування та відступи​

Компонування має бути просторим і стабільним. На лендінг-сторінці використовується контейнер max-w-7xl з адаптивними горизонтальними відступами та великими вертикальними секціями.

Поширені шаблони:

  • Відступи секцій близько py-16, py-20 або більші для основних маркетингових секцій.
  • Картки, розміщені в адаптивних сітках із рівномірними проміжками.
  • Hero-секції з виразною лівою колонкою контенту та знімками продукту або композиціями пристроїв праворуч.
  • Центровані заголовки секцій для широких продуктових обіцянок; вирівняні ліворуч заголовки для секцій із розповіддю або описом робочих процесів.
  • Компонування за принципом mobile-first, які спочатку акуратно складаються в один стовпчик, а на великих екранах переходять до кількох колонок.

Використовуйте вільний простір як частину дизайну. Якщо секція здається незрозумілою, спочатку спростіть контент і збільшіть простір, а вже потім додавайте декор.

Компоненти та поверхні​

Поверхні Scoutello мають бути тактильними, але легкими:

  • Кнопки: округлені пігулки для помітних маркетингових CTA; стандартні продуктові кнопки в інших випадках.
  • Картки: білі або кремові, округлені, з рамкою та легкою тінню.
  • Іконки: невеликі прості контурні іконки в чипах із помаранчевим відтінком.
  • Статистика та елементи довіри: стримані картки з помаранчевими рамками або градієнтами.
  • Форми: чіткі підписи, прямий допоміжний текст і достатні відступи для використання на мобільних пристроях.
  • Знімки екрана: великі, чіткі, з легкою тінню. Використовуйте їх як конкретний доказ можливостей продукту.

Під час створення інтерфейсу продукту спочатку використовуйте наявні спільні компоненти UI і токени, а не створюйте унікальні стилі для окремих випадків. Під час створення маркетингового інтерфейсу використовуйте примітиви й класи для лендінгів там, де це доречно.

Анімація​

Анімація має робити інтерфейс виразним, а не перевантаженим. На лендінгу використовуються короткі анімації появи, ефекти підняття пристроїв, розсіювання світіння та легке підняття елементів під час наведення.

Рекомендовані анімації:

  • Поява знизу на 12–24 пікселі з плавною зміною прозорості.
  • Підняття карток під час наведення лише на кілька пікселів.
  • Стани CTA під час наведення з легким підняттям і посиленням тіні.
  • Поетапна поява секцій, якщо це допомагає послідовно переглядати зміст.

Завжди враховуйте налаштування зменшення анімації. Уникайте анімацій, які можуть приховувати вміст, блокувати взаємодію або створювати враження, що без них неможливо зрозуміти сторінку.

Стиль і дизайн контенту​

Візуальна система найкраще працює з прямим і конкретним текстом. Віддавайте перевагу формулюванням, які пояснюють, що організація може публікувати, керувати або автоматизувати в Scoutello.

Використовуйте:

  • Специфічні для продукту іменники: лендінги, плитки, тури, події, організації, панель керування, гості, QR-коди, переклади.
  • Описи, орієнтовані на результат і пов’язують досвід гостей із робочими процесами операторів.
  • Гендерно нейтральні формулювання німецькою та іншими локалізованими мовами.

Уникайте:

  • Розмитих описів платформи без прикладів.
  • Надмірно формального корпоративного жаргону.
  • Довгих абзаців там, де краще підійде структурована для швидкого перегляду секція.

Практичні правила​

  • Використовуйте #ff8d49 як основний акцентний колір бренду, а #145466 — як додатковий базовий колір.
  • У поверхнях продукту надавайте перевагу класам із токенами (primary, secondary, foreground, muted, border), а не жорстко заданим кольорам.
  • Маркетингові сторінки мають бути теплими, просторими, округленими, орієнтованими на скриншоти та містити помірну анімацію.
  • Панель керування й операційні поверхні мають бути спокійнішими, щільнішими лише за потреби та більше орієнтованими на виконання завдань.
  • Дозволяйте досвіду гостей, яким керує клієнт, підтримувати брендинг організації там, де продукт уже надає засоби керування брендингом, але поверхні, якими володіє Scoutello, мають відповідати цій системі.

Пов’язані поняття: Маршрути й поверхні, Лендінги та плитки, Досвід гостей у браузері.