Saltar para o conteúdo principal

Sistema de design

Scoutello deve parecer acolhedor, capaz e focado no produto. A aparência preferida é clara, generosa, arredondada e editorial: primeiro o conteúdo claro, depois a cor sutil da marca, superfícies suaves e movimento calmo que faz o produto parecer responsivo sem se tornar ruído decorativo.

A página de destino de marketing é a referência pública mais clara para a direção visual atual. As superfícies do produto devem reutilizar os tokens de design compartilhados sempre que possível e tornar-se mais expressivas apenas quando a superfície for explicitamente orientada para a marca ou marketing.

Logo e Ativos da Marca​

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

Prefira a versão SVG para renderização nítida em todos os tamanhos de tela. Use a versão PNG quando uma ferramenta ou destino não puder lidar com SVG. Mantenha espaço livre suficiente ao redor da marca, evite esticá-la ou mudar sua cor, e coloque-a em superfícies brancas, creme quente ou outras superfícies calmas que preservem o contraste.

Cores da Marca​

Cor primária: #ff8d49

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

Cor secundária: #145466

Use o azul petróleo profundo secundário como cor de base. Funciona melhor em gradientes com o laranja primário, painéis escuros de chamada para ação, profundidade visual e momentos ocasionais de marca de alta ênfase. Não deve substituir o laranja primário como cor de ação padrão.

Cores de apoio:

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

Estilo Visual​

Prefira um visual SaaS limpo e premium com calor suficiente para evitar parecer genérico. A página de destino combina fundos de malha creme, cartões brancos, capturas de tela grandes do produto, cantos arredondados e gradientes restritos.

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 de cores pesados.
  • Sombras sutis como shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ou sombras personalizadas de baixa opacidade.
  • Capturas de tela grandes do produto ou maquetes de interface do usuário como prova, especialmente para marketing e narrativa de recursos.
  • Pequenos momentos de marca, como texto destacado em laranja, chips de ícones, anéis, brilhos e CTAs em gradiente.

Evite:

  • Fundos laranja altos em página inteira.
  • Uso excessivo de azul petróleo para controles comuns.
  • Layouts densos e apertados.
  • Sombras duras, retângulos afiados ou painéis monocromáticos frios.
  • Movimento decorativo que compete com a leitura ou a conclusão de tarefas.

Tipografia​

O site de marketing usa:

  • Space Grotesk para títulos de exibição através da classe landing-display.
  • Manrope para texto de corpo de marketing.

As superfícies compartilhadas de aplicativos e documentos usam tipografia de interface do usuário alinhada ao sistema, atualmente mais próxima do Inter. O objetivo do estilo é consistente em todas as superfícies: títulos confiantes, rastreamento de títulos apertado, texto de corpo legível e altura de linha generosa.

Orientação de títulos:

  • Use títulos grandes e equilibrados em páginas de marketing.
  • Destaque apenas a frase importante com laranja primário.
  • Mantenha o comprimento da linha controlado com max-w-* e text-balance onde disponível.

Orientação de texto de corpo:

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

Layout e Espaçamento​

Os layouts devem parecer espaçosos e estáveis. A página de destino usa um contêiner max-w-7xl com preenchimento horizontal responsivo e seções verticais grandes.

Padrões comuns:

  • Preenchimento de seção em torno de py-16, py-20 ou maior para seções de marketing importantes.
  • Cartões organizados em grades responsivas com espaçamento consistente.
  • Seções de herói com uma forte coluna de conteúdo à esquerda e capturas de tela do produto ou composições de dispositivos à direita.
  • Cabeçalhos de seção centralizados para promessas amplas de produto; cabeçalhos alinhados à esquerda para seções de história ou fluxo de trabalho.
  • Layouts mobile-first que se empilham de forma limpa antes de se tornarem multi-coluna em telas maiores.

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

Componentes e Superfícies​

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

  • Botões: pílulas arredondadas para CTAs de marketing proeminentes; botões de produto padrão em outros lugares.
  • Cartões: brancos ou creme, arredondados, com bordas e levemente elevados.
  • Ícones: pequenos ícones de linha simples em chips com tonalidade laranja.
  • Estatísticas e elementos de confiança: cartões restritos com bordas com tonalidade laranja ou gradientes.
  • Formulários: rótulos claros, texto de ajuda direto e espaço suficiente para uso em dispositivos móveis.
  • Capturas de tela: grandes, nítidas e levemente elevadas. Use-as como prova concreta do produto.

Ao construir a interface do produto, comece a partir de componentes de interface do usuário compartilhados e tokens existentes, em vez de estilos personalizados únicos. Ao construir a interface de marketing, use os primitivos de página de destino e as classes de página de destino onde eles se encaixam.

Movimento​

O movimento deve fazer a interface parecer polida, não agitada. A página de destino usa animações curtas de revelação, efeitos de elevação de dispositivo, efeitos de brilho e pequenas elevações ao passar o mouse.

Movimento preferido:

  • Revelar para cima de 12-24px com opacidade suave.
  • Cartões ao passar o mouse levantando apenas alguns pixels.
  • Estados de hover de CTA que levantam e aprofundam ligeiramente a sombra.
  • Entradas de seção escalonadas onde elas suportam a leitura narrativa.

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

Voz e Design de Conteúdo​

O sistema visual funciona melhor com cópia direta e concreta. Prefira linguagem que explique o que uma organização pode publicar, gerenciar ou automatizar no Scoutello.

Use:

  • Substantivos específicos do produto: páginas de destino, blocos, tours, eventos, organizações, painel, convidados, códigos QR, traduções.
  • Descrições orientadas a resultados que conectam experiências de convidados com fluxos de trabalho de operadores.
  • Linguagem neutra em termos de gênero em alemão e outras cópias localizadas.

Evite:

  • Linguagem vaga de plataforma sem exemplos.
  • Jargão corporativo excessivamente formal.
  • Parágrafos longos onde uma seção escaneável funcionaria melhor.

Regras Práticas​

  • Use #ff8d49 como o principal destaque da marca e #145466 como a cor secundária de base.
  • Prefira classes tokenizadas (primary, secondary, foreground, muted, border) em vez de cores codificadas em superfícies de produto.
  • Mantenha as páginas de marketing quentes, espaçosas, arredondadas, lideradas por capturas de tela e levemente animadas.
  • Mantenha as superfícies de painel e operacionais mais calmas, densas apenas onde necessário e mais focadas em tarefas.
  • Deixe as experiências de convidados de propriedade do cliente apoiarem a marca da organização onde o produto já expõe controles de marca, mas mantenha as superfícies de propriedade do Scoutello alinhadas a este sistema.

Conceitos relacionados: Rotas e superfícies, Páginas de destino e blocos, Experiências de convidados baseadas no navegador.