Pular para o conteúdo principal

Sistema de design

A Scoutello deve transmitir uma sensação acolhedora, competente e focada no produto. O visual preferido é claro, espaçoso, arredondado e editorial: primeiro, conteúdo claro; depois, cores sutis da marca, superfícies suaves e animações discretas que tornam o produto responsivo sem criar ruído decorativo.

A landing page de marketing é a referência pública mais clara da direção visual atual. Sempre que possível, as superfícies do produto devem reutilizar os tokens de design compartilhados e só se tornar mais expressivas quando a superfície for explicitamente orientada à marca ou ao marketing.

Logotipo e ativos da marca​

Use o logotipo Scoutello disponível na URL pública de ativos da documentação quando um agente, uma integração ou uma página gerada precisar de um elemento de marca reutilizável:

Dê preferência à versão SVG para obter uma renderização nítida em diferentes tamanhos de tela. Use a versão PNG quando a ferramenta ou o destino não for compatível com SVG. Mantenha espaço livre suficiente ao redor do elemento, evite esticá-lo ou alterar suas cores e posicione-o sobre superfícies brancas, creme quente ou outras superfícies suaves que preservem o contraste.

Cores da marca​

Cor primária: #ff8d49

Use o laranja primário como cor de destaque da Scoutello: chamadas para ação principais, estados de foco, navegação ativa, fundos de pequenos ícones, textos em destaque, brilhos suaves e gradientes quentes. No código do produto, ele corresponde a --primary: 24 100% 64% e a classes do Tailwind como bg-primary, text-primary, border-primary/15 e shadow-primary/10.

Cor secundária: #145466

Use o teal escuro secundário como cor de equilíbrio. Ele funciona melhor em gradientes com o laranja primário, painéis escuros de chamadas para ação, elementos que criam profundidade visual e momentos ocasionais de maior destaque da marca. Não deve substituir o laranja primário como cor padrão das ações.

Cores de apoio:

  • Fundos creme quentes: #fff8f1, #fff4ea, #fcf6f1 e superfícies suaves orange-50 / amber-50.
  • Neutros do produto: cartões brancos, texto escuro em primeiro plano, texto atenuado com cerca de 70–75% de opacidade e bordas claras.
  • Azul terciário: hsl(205 100% 51%) está disponível como token de apoio, mas deve ser usado com moderação para que o laranja e o teal continuem reconhecíveis como a dupla de cores da marca.

Estilo visual​

Dê preferência a um visual SaaS limpo e premium, com calor suficiente para evitar uma aparência genérica. A landing page combina fundos de malha em tons creme, cartões brancos, grandes capturas de tela do produto, cantos arredondados e gradientes discretos.

Use:

  • Cartões e painéis arredondados, geralmente de rounded-2xl a rounded-[2rem].
  • Bordas suaves, como border-primary/10, border-primary/15, ring-black/5 e bordas neutras claras.
  • Superfícies brancas ou creme em camadas, em vez de blocos grandes com cores intensas.
  • Sombras discretas, como shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ou sombras personalizadas com baixa opacidade.
  • Grandes capturas de tela do produto ou mockups de UI como prova, especialmente em materiais de marketing e narrativas de funcionalidades.
  • Pequenos elementos de marca, como textos destacados em laranja, chips de ícones, anéis, brilhos e CTAs com gradiente.

Evite:

  • Fundos laranja intensos em páginas inteiras.
  • Usar teal em excesso em controles comuns.
  • Layouts densos e apertados.
  • Sombras marcadas, retângulos rígidos ou dashboards monocromáticos e frios.
  • Animações decorativas que disputem a atenção com a leitura ou a conclusão de tarefas.

Tipografia​

O site de marketing usa:

  • Space Grotesk para títulos de destaque, por meio da classe landing-display.
  • Manrope para o texto corrido de marketing.

As superfícies compartilhadas do app e da documentação usam uma tipografia de UI alinhada ao sistema, atualmente mais próxima de Inter. O objetivo é manter consistência entre as superfícies: títulos confiantes, espaçamento entre letras mais compacto nos títulos, texto corrido legível e altura de linha generosa.

Orientações para títulos:

  • Use títulos grandes e equilibrados nas páginas de marketing.
  • Destaque apenas a frase importante com o laranja primário.
  • Controle o comprimento das linhas com max-w-* e text-balance quando disponíveis.

Orientações para texto corrido:

  • Mantenha os parágrafos tranquilos e diretos.
  • Use texto atenuado em primeiro plano para descrições, geralmente text-foreground/70 ou text-foreground/75.
  • Prefira seções fáceis de escanear, parágrafos curtos e rótulos claros.

Layout e espaçamento​

Os layouts devem transmitir espaço e estabilidade. A landing page usa um contêiner max-w-7xl com espaçamento horizontal responsivo e seções verticais amplas.

Padrões comuns:

  • Espaçamento interno de seção em torno de py-16, py-20 ou maior em seções de marketing importantes.
  • Cartões organizados em grades responsivas com espaçamento consistente.
  • Seções hero com uma coluna de conteúdo forte à esquerda e capturas de tela do produto ou composições de dispositivos à direita.
  • Cabeçalhos de seção centralizados para promessas amplas do produto; cabeçalhos alinhados à esquerda para seções sobre histórias ou fluxos de trabalho.
  • Layouts mobile-first que se empilham de forma organizada antes de se tornarem colunas múltiplas em telas maiores.

Use o espaço em branco como parte do design. Se uma seção parecer confusa, simplifique o conteúdo e aumente o espaço antes de adicionar mais elementos decorativos.

Componentes e superfícies​

As superfícies da Scoutello devem parecer táteis, mas leves:

  • Botões: pílulas arredondadas para CTAs de marketing em destaque; botões de produto padrão nas demais áreas.
  • Cartões: brancos ou creme, arredondados, com bordas e leve elevação.
  • Ícones: pequenos ícones lineares e simples em chips com tons de laranja.
  • Estatísticas e elementos de confiança: cartões discretos com bordas ou gradientes em tons de laranja.
  • Formulários: rótulos claros, texto auxiliar direto e espaçamento suficiente para uso em dispositivos móveis.
  • Capturas de tela: grandes, nítidas e levemente elevadas. Use-as como evidência concreta do produto.

Ao criar a interface do produto, comece pelos componentes e tokens de UI compartilhados existentes, em vez de criar estilos personalizados para casos isolados. Ao criar a interface de marketing, use os primitivos e as classes de landing page quando forem adequados.

Movimento​

O movimento deve tornar a interface mais refinada, não mais agitada. A landing page usa animações curtas de revelação, efeitos de elevação de dispositivos, efeitos de brilho difuso e pequenos deslocamentos ao passar o cursor.

Movimentos preferenciais:

  • Revelação para cima a partir de 12–24 px, com opacidade suave.
  • Cards que se elevam apenas alguns pixels ao passar o cursor.
  • Estados de hover dos CTAs que se elevam levemente e intensificam a sombra.
  • Entradas escalonadas das seções quando ajudarem na leitura da narrativa.

Respeite sempre as preferências de redução de movimento. Evite animações que possam ocultar conteúdo, bloquear a interação ou parecer necessárias para compreender a página.

Diretrizes de voz e conteúdo​

O sistema visual funciona melhor com textos diretos e concretos. Prefira uma linguagem que explique o que uma organização pode publicar, gerenciar ou automatizar no Scoutello.

Use:

  • Substantivos específicos do produto: landing pages, tiles, tours, eventos, organizações, dashboard, convidados, códigos QR, traduções.
  • Descrições orientadas a resultados que conectem as experiências dos convidados aos fluxos de trabalho das equipes operacionais.
  • Linguagem neutra em termos de gênero em alemão e nos demais textos localizados.

Evite:

  • Linguagem vaga sobre a plataforma, sem exemplos.
  • Jargão empresarial excessivamente formal.
  • Parágrafos longos quando uma seção fácil de examinar funcionaria melhor.

Regras práticas​

  • Use #ff8d49 como o principal destaque da marca e #145466 como a cor secundária de base.
  • Prefira classes baseadas em tokens (primary, secondary, foreground, muted, border) em vez de cores codificadas diretamente nas superfícies do produto.
  • Mantenha as páginas de marketing acolhedoras, espaçosas, arredondadas, orientadas por capturas de tela e levemente animadas.
  • Mantenha o dashboard e as superfícies operacionais mais tranquilos e densos apenas quando necessário, com foco maior nas tarefas.
  • Permita que as experiências dos convidados pertencentes aos clientes incorporem a identidade visual da organização quando o produto já oferecer controles de branding, mas mantenha as superfícies pertencentes ao Scoutello alinhadas a este sistema.

Conceitos relacionados: Rotas e superfícies, Landing pages e tiles, Experiências de convidados baseadas no navegador.