Перейти к основному содержимому

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

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 продукта сначала используйте существующие общие UI-компоненты и токены, а не создавайте отдельные стили для каждого случая. При создании маркетингового UI используйте примитивы и классы лендингов там, где они подходят.

Анимация​

Анимация должна придавать интерфейсу ощущение продуманности, а не перегружать его. На лендинге используются короткие анимации появления, эффекты подъёма устройств, свечения и небольшого подъёма элементов при наведении.

Рекомендуемая анимация:

  • Появление снизу с перемещением на 12–24 пикселя и мягким изменением прозрачности.
  • Подъём карточек при наведении всего на несколько пикселей.
  • Состояния CTA при наведении: лёгкий подъём и более глубокая тень.
  • Последовательное появление секций, если оно помогает воспринимать повествование при сканировании страницы.

Всегда учитывайте настройки уменьшения анимации. Избегайте анимаций, которые могут скрывать контент, блокировать взаимодействие или создавать ощущение, что без них невозможно понять страницу.

Стиль и структура контента​

Визуальная система лучше всего работает с прямыми и конкретными текстами. Предпочитайте формулировки, которые объясняют, что организация может публиковать, управлять или автоматизировать в Scoutello.

Используйте:

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

Избегайте:

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

Практические правила​

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

Связанные концепции: Маршруты и поверхности, Лендинги и плитки, Впечатления гостей в браузере.