Aplicação preferencial sobre fundo claro, com área de respiro e sem efeitos adicionais que distorçam leitura, cores ou proporção.
Território da marca
Confiança operacional para navios estrangeiros no Brasil.
O sistema organiza a base visual da SSBG em uma linguagem marítima, técnica e orientada a RFQ: menos ruído de selos, mais prova operacional, contraste corrigido e componentes preparados para aquisição B2B internacional.
Identidade e logomarca
A marca deve aparecer como selo de confiança, não como ruído repetido.
A logomarca oficial do site foi incorporada ao manual como referência visual. O uso recomendado é preservar o símbolo circular, manter contraste limpo e evitar repetição excessiva no hero, rodapé e blocos de prova.
Usar em container claro ou com contraste controlado. A versão disponível tem base clara; não inverter cores manualmente sem arquivo oficial de variante negativa.
Usar
Topo do site, capa de apresentação, assinatura institucional, materiais comerciais e seção de prova quando houver contexto.
Evitar
Repetir a logomarca no mesmo bloco junto com certificações, clientes e CTAs, porque isso reduz hierarquia e clareza.
Bloqueado
Aplicar sombra pesada, trocar cores, recortar o círculo, usar baixa resolução ou sobrepor em fundo complexo sem respiro.
Tokens de cor
Azul de confiança, laranja de ação e neutros técnicos.
A paleta preserva a leitura marítima atual, mas corrige a aplicação do laranja: quando usado em botão com texto branco, a versão recomendada é mais escura para atender contraste.
Cor principal para CTA, links, navegação ativa e sinalização institucional.
Uso restrito a prioridade, urgência, ícones, destaques e CTAs secundários de alta intenção.
Tipografia
Escala densa, legível e preparada para procurement.
Inter foi adotada como recomendação provisória por falta de tipografia oficial documentada. A escala privilegia leitura de RFQ, provas, categorias e conteúdo técnico em desktop e mobile.
Display | 64 / 1.02 / 800
Port-ready supply
--type-display
H1 | 48 / 1.08 / 800
Ship supply confiável no Brasil
--type-h1
H2 | 36 / 1.14 / 760
Prova operacional perto do hero
--type-h2
H3 | 28 / 1.2 / 740
RFQ, categorias e cobertura
--type-h3
Body | 16 / 1.58 / 450
Texto de leitura técnica com ritmo calmo, boa altura de linha e contraste suficiente para jornadas B2B internacionais.
--type-body
Label | 13 / 1.2 / 760
Brazilian port
--type-label
Componentes base
Componentes orientados à decisão, não a decoração.
O sistema troca CTAs genéricos por ações de cotação, padroniza cards de prova e mantém um raio máximo de 8px para aparência técnica e robusta.
Altura mínima de 44px no mobile. Azul para ação principal, contorno para apoio, laranja escuro para urgência com contraste.
Tags ajudam a escanear categoria, urgência e estado documental sem criar ruído visual.
Brazil ports
Urgent ETA
Documented
Technical supply
Use para explicar cobertura real em portos brasileiros, com precisão sobre base própria, parceira ou rede operacional.
Prova de controle documental, certificações e conformidade. Não usar selo sem contexto.
Prova de entrega, conferência, embalagem, janela operacional e redução de risco no cais.
Suporte de urgência, mas sempre com rota de RFQ estruturada para CRM e operação.
Padrão RFQ
O formulário deixa de ser contato genérico e vira qualificação operacional.
A auditoria encontrou o formulário tarde na página e sem campos críticos. Este componente deve entrar próximo ao topo, depois da prova operacional.
Short RFQ
Start a quotation with the minimum operational context.
Campos recomendados: empresa, e-mail corporativo, navio ou IMO, porto brasileiro, janela de entrega, categoria, urgência e lista de suprimentos.
Direção de imagem
O visual precisa provar operação, não apenas ambientar o setor.
Porto, navio e escala continuam relevantes. A evolução é aproximar imagem de processo, entrega, conferência e documentação, sem depender de prints do site.
Regras de uso
- Priorizar imagens reais de porto, entrega no cais, conferência, embalagem, documentação e equipe em contexto marítimo.
- Usar selos em bloco de prova com legenda, nunca como vitrine central do hero.
- Evitar produto isolado sem bordo, porto ou processo, exceto em catálogo técnico.
- Reduzir slides e imagens pesadas no hero para proteger leitura mobile e performance internacional.
- Adicionar texto alternativo descritivo em imagens relevantes para acessibilidade e manutenção.
Governança
O que fica bloqueado até validação.
O design system organiza a expressão visual, mas não resolve sozinho claims, arquitetura de grupo, CRM ou banco de imagens reais.
Claims fortes
Usar 98% on-time, 50,000+ items, 12 strategic bases e 35 years apenas com fonte, período e método.
Logo oficial
Substituir o marcador provisório pelo arquivo oficial da marca em SVG ou PNG com fundo transparente.
Uso imediato
Tokens, botões, RFQ, cards de prova e regras de imagem já podem orientar site, landing pages e criativos.