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

Система дизайна

Описание: Цвета бренда Scoutello, визуальное направление, типографика, макет и рекомендации по взаимодействию.

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 для основного текста маркетинговых материалов.

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

Рекомендации по заголовкам:

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

Рекомендации по основному тексту:

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

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

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

Общие шаблоны:

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

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

Компоненты и поверхности​

Поверхности Scoutello должны казаться тактильными, но легкими:

  • Кнопки: закругленные таблетки для заметных маркетинговых CTA; стандартные кнопки продукта в других местах.
  • Карточки: белые или кремовые, закругленные, с рамками и легким возвышением.
  • Значки: маленькие, простые линейные значки в чипах с оранжевым оттенком.
  • Статистика и элементы доверия: сдержанные карточки с рамками или градиентами оранжевого оттенка.
  • Формы: четкие метки, прямые вспомогательные тексты и достаточное пространство для использования на мобильных устройствах.
  • Скриншоты: крупные, четкие и слегка приподнятые. Используйте их как конкретное доказательство продукта.

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

Движение​

Движение должно делать интерфейс отполированным, а не суетливым. Целевая страница использует короткие анимации появления, эффекты подъема устройства, эффекты расцвета свечения и небольшие подъемы при наведении.

Предпочтительное движение:

  • Появление снизу на 12-24 пикселя с мягкой непрозрачностью.
  • Карточки при наведении поднимаются всего на несколько пикселей.
  • Состояния CTA при наведении, которые слегка поднимают и углубляют тень.
  • Поэтапное появление разделов, где они поддерживают сканирование повествования.

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

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

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

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

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

Избегайте:

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

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

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

Связанные концепции: Маршруты и поверхности, Целевые страницы и плитки, Гостевые приложения, основанные на браузере.