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

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

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, або власні тіні з низькою прозорістю.
  • Великі скріншоти продукту або макети інтерфейсу як доказ, особливо для маркетингу та розповіді про функції.
  • Невеликі брендові елементи, такі як помаранчевий виділений текст, іконки-чіпси, кільця, світіння та градієнтні заклики до дії.

Уникайте:

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

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

Маркетинговий сайт використовує:

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

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

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

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

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

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

Макет та інтервали​

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

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

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

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

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

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

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

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

Рух​

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

Бажаний рух:

  • Поява знизу на 12-24 пікселі з м'якою прозорістю.
  • Картки при наведенні піднімаються лише на кілька пікселів.
  • Стани наведення на заклик до дії, які трохи піднімають та поглиблюють тінь.
  • Послідовна поява секцій, де це підтримує сканування розповіді.

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

Голос та дизайн контенту​

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

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

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

Уникайте:

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

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

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

Пов'язані концепції: Маршрути та поверхні, Цільові сторінки та плитки, Досвід гостей, що базується на браузері.