SYSLED
Diretrizes de identidade visual, marca e experiência de usuário para o Sistema Integrado de Automação, Logística e Inteligência Operacional.
Sobre a Marca
A Sysled é uma solução tecnológica modular voltada à digitalização, automação e otimização de processos industriais. A plataforma integra dados operacionais, logísticos e produtivos em tempo real, atuando como um hub central de inteligência que conecta sistemas legados, bancos de dados, sensores, processos logísticos e regras de negócio específicas de cada indústria.
Posicionada no segmento de IndTech (Tecnologia Industrial), a Sysled atua nas áreas de Indústria 4.0 e 5.0, Automação Industrial, Internet das Coisas (IoT), Engenharia de Software e Business Intelligence Industrial. A marca transmite confiança, inovação tecnológica e eficiência operacional.
Missão
Transformar a gestão industrial por meio de soluções digitais inteligentes que conectam dados, automatizam processos e potencializam a tomada de decisão, tornando a indústria mais eficiente, rastreável e competitiva.
Valores da Marca
| Valor | Descrição |
|---|---|
| Inovação | Tecnologia de ponta aplicada à realidade do chão de fábrica |
| Confiabilidade | Dados precisos e sistemas robustos para decisões seguras |
| Integração | Conexão harmoniosa entre sistemas, pessoas e processos |
| Eficiência | Otimização contínua de recursos e operações |
| Adaptabilidade | Soluções flexíveis para diferentes realidades industriais |
Personalidade da Marca
A Sysled se comunica de forma profissional, técnica e acessível. Não é uma marca fria ou distante — é uma parceira tecnológica que entende a realidade da indústria. O tom é confiante sem ser arrogante, técnico sem ser incompreensível, inovador sem ser futurista demais.
Fundamentos Estratégicos
Os fundamentos estratégicos definem o núcleo da marca SYSLED, orientando como nos posicionamos no mercado, comunicamos nosso valor e interagimos com nossos públicos. Eles são a base para todas as decisões de branding, marketing e produto.
Posicionamento por Público-Alvo
A SYSLED se posiciona de forma distinta para cada segmento de seu público, abordando suas dores específicas com diferenciais competitivos claros. Nosso objetivo é ser percebida como a parceira tecnológica essencial para a modernização e eficiência da indústria.
| Público-Alvo | Dores e Necessidades | Diferencial Competitivo SYSLED |
|---|---|---|
| Gestores de Produção/Planta | Falta de visibilidade em tempo real, dificuldade em rastrear a produção, processos manuais e propensos a erros. | Oferecemos dashboards intuitivos com dados em tempo real, rastreabilidade ponta a ponta e automação de tarefas repetitivas, aumentando a eficiência do chão de fábrica. |
| Diretores de Operações (COO) | Sistemas legados desconectados, baixa eficiência operacional, dificuldade em escalar a produção e garantir conformidade. | Nossa plataforma integra sistemas heterogêneos, otimiza fluxos de trabalho e fornece relatórios consolidados para decisões estratégicas, garantindo escalabilidade e governança. |
| Gerentes de Logística | Controle de inventário impreciso, falhas na cadeia de suprimentos, falta de rastreabilidade de ativos e produtos. | Módulos de logística avançada com WMS, controle de pátio e rastreamento por RFID/sensores, garantindo acuracidade e visibilidade total da cadeia logística. |
| Executivos C-Level (CEO, CIO) | Dificuldade em obter dados consolidados para planejamento estratégico, alto custo de manutenção de sistemas legados, riscos de segurança. | Atuamos como um hub de Business Intelligence industrial, transformando dados brutos em insights estratégicos e garantindo uma infraestrutura moderna, segura e escalável. |
Proposta de Valor
Nossa proposta de valor é a promessa que fazemos aos nossos clientes. Ela articula de forma clara e concisa os benefícios que a SYSLED entrega.
Esta mensagem central se desdobra em três pilares fundamentais:
Automatizamos processos, eliminamos gargalos e otimizamos o uso de recursos.
Garantimos a integridade dos dados e a visibilidade completa de cada etapa da produção e logística.
Transformamos dados operacionais em insights estratégicos que impulsionam o crescimento do negócio.
Tom de Voz Abrangente
Expandindo a seção de Tom de Voz, detalhamos os atributos da nossa comunicação com exemplos práticos para garantir consistência e clareza em todos os pontos de contato da marca.
| Atributo do Tom | Descrição | Exemplo de Aplicação (Certo vs. Errado) |
|---|---|---|
| Técnico e Preciso | Usamos a terminologia correta da indústria, mas sempre de forma clara e sem jargões desnecessários. A precisão gera confiança. |
✔ Certo: "Nosso sistema utiliza um barramento de serviços (ESB) para garantir a integração desacoplada com sistemas ERP como SAP e Totvs." ✘ Errado: "A gente conecta tudo com uma mágica que faz os sistemas conversarem." |
| Confiante e Visionário | Demonstramos segurança em nossa solução e apresentamos uma visão de futuro para a indústria do cliente, sem sermos arrogantes. |
✔ Certo: "Com a SYSLED, sua indústria não apenas resolve os desafios de hoje, mas se prepara para a próxima geração da manufatura inteligente." ✘ Errado: "Somos a única solução que funciona, as outras são perda de tempo." |
| Acessível e Parceiro | Somos uma parceira de tecnologia, não um fornecedor distante. Nossa comunicação é aberta, didática e focada em resolver o problema do cliente. |
✔ Certo: "Entendemos que cada indústria tem suas particularidades. Vamos agendar uma demonstração para configurar um fluxo que se adapte à sua realidade?" ✘ Errado: "O sistema é esse. O cliente precisa se adaptar a ele." |
| Orientado a Resultados | Nossa comunicação foca nos benefícios e resultados tangíveis que a solução proporciona, traduzindo tecnologia em valor de negócio. |
✔ Certo: "A implementação do nosso módulo de WMS resultou em uma redução de 30% no tempo de separação de pedidos para clientes do setor farmacêutico." ✘ Errado: "Nosso software de WMS é muito rápido e tem muitas funcionalidades legais." |
Mensagens-Chave por Contexto
Além dos atributos de tom, cada contexto de comunicação possui mensagens-chave que devem ser priorizadas para garantir a efetividade da comunicação.
| Contexto | Mensagem-Chave | Formato Recomendado |
|---|---|---|
| Pitch Comercial | "A SYSLED digitaliza e integra sua operação industrial, gerando eficiência, controle e inteligência de ponta a ponta — do chão de fábrica à nuvem." | Apresentações, reuniões de vendas, propostas comerciais |
| Site e Landing Pages | "Inteligência que conecta sua indústria. Automatize processos, integre sistemas e tome decisões baseadas em dados reais." | Hero sections, CTAs, páginas de produto |
| Redes Sociais | "Sua indústria mais inteligente, conectada e eficiente. Descubra como a SYSLED transforma operações." | Posts, stories, carrosséis educativos |
| E-mail Marketing | "Veja como empresas do seu setor estão reduzindo custos e aumentando a produtividade com a SYSLED." | Newsletters, nurturing, cases de sucesso |
| Documentação Técnica | "Guia completo de integração e configuração do módulo [X] da plataforma SYSLED." | Manuais, APIs, wikis técnicas |
Logotipo
O logotipo da Sysled é composto por dois elementos: o ícone da nuvem estilizada e o logotipo tipográfico "SYSLED". A nuvem representa a conectividade, a computação em nuvem e a integração de dados — pilares fundamentais da plataforma. As formas orgânicas e esféricas dentro da nuvem simbolizam os múltiplos módulos e dados que convergem em um único ecossistema.
Versões do Logotipo
Principal — Fundo Claro
Versão padrão para uso em fundos brancos ou claros.
Branca — Fundo Escuro
Versão para uso em fundos escuros ou coloridos.
Monocromática
Para impressão em preto e branco ou aplicações de baixo custo.
Ícone — Nuvem
Para favicons, avatares de redes sociais e espaços reduzidos.
Área de Proteção
A área de proteção (clearspace) garante que o logotipo mantenha sua legibilidade e impacto visual. A distância mínima ao redor do logotipo deve ser equivalente à altura da letra "S" do logotipo. Nenhum elemento gráfico, texto ou borda deve invadir essa área.
Tamanhos Mínimos
| Aplicação | Largura Mínima | Observação |
|---|---|---|
| Digital (logo completa) | 160px | Abaixo disso, usar apenas o ícone |
| Digital (ícone) | 32px | Para favicons e avatares |
| Impresso (logo completa) | 40mm | Garantir legibilidade do texto |
| Impresso (ícone) | 10mm | Para cartões e materiais pequenos |
Paleta de Cores
A paleta de cores da Sysled é fundamentada em tons de azul, que transmitem confiança, tecnologia e profissionalismo. Os azuis variam do profundo ao claro, criando uma hierarquia visual rica. Cores complementares neutras garantem equilíbrio e legibilidade em todas as aplicações.
Cores Primárias
Azul Primário
RGB: 43, 108, 176
CMYK: 76, 39, 0, 31
Azul Médio
RGB: 58, 143, 214
CMYK: 73, 33, 0, 16
Azul Claro
RGB: 91, 184, 245
CMYK: 63, 25, 0, 4
Azul Celeste
RGB: 126, 206, 244
CMYK: 48, 16, 0, 4
Cores Secundárias
Ciano / Turquesa
RGB: 72, 201, 176
CMYK: 64, 0, 12, 21
Azul Pálido
RGB: 168, 224, 248
CMYK: 32, 10, 0, 3
Cores Neutras
Escuro Primário
RGB: 26, 26, 46
CMYK: 43, 43, 0, 82
Texto Principal
RGB: 44, 62, 80
CMYK: 45, 23, 0, 69
Texto Secundário
RGB: 74, 85, 104
CMYK: 29, 18, 0, 59
Cinza Claro
RGB: 226, 232, 240
CMYK: 6, 3, 0, 6
Fundo Claro
RGB: 247, 250, 252
CMYK: 2, 1, 0, 1
Branco
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
Proporção de Uso
A paleta deve ser utilizada com predominância dos tons neutros (branco e cinzas) como base, com os azuis primários como cor de destaque e ação. A proporção recomendada é de 60% neutros, 30% azul primário/médio e 10% cores de acento (ciano, azul claro).
Tipografia
O sistema tipográfico da Sysled utiliza duas famílias complementares: Montserrat para títulos e elementos de destaque, e Inter para corpo de texto e interfaces. Ambas são fontes open-source com excelente legibilidade em telas e impressão.
Montserrat — Títulos e Destaques
Inter — Corpo e Interface
Escala Tipográfica
| Elemento | Fonte | Peso | Tamanho | Line-height |
|---|---|---|---|---|
| Display / Hero | Montserrat | 900 | 3rem — 4rem | 1.1 |
| H1 | Montserrat | 800 | 2.5rem | 1.2 |
| H2 | Montserrat | 700 | 2rem | 1.3 |
| H3 | Montserrat | 700 | 1.5rem | 1.3 |
| H4 | Montserrat | 600 | 1.125rem | 1.4 |
| Body | Inter | 400 | 1rem | 1.7 |
| Body Small | Inter | 400 | 0.875rem | 1.6 |
| Caption | Inter | 500 | 0.75rem | 1.5 |
| Label / Overline | Montserrat | 700 | 0.7rem | 1.4 |
Slogan
O slogan da Sysled sintetiza a proposta de valor da marca em uma frase memorável. Ele deve ser utilizado em materiais institucionais, apresentações, site e redes sociais, sempre acompanhando ou próximo ao logotipo.
O slogan reforça os dois pilares centrais da marca: a inteligência (dados, automação, BI) e a conexão (integração de sistemas, IoT, nuvem). A palavra "sua" personaliza a mensagem, posicionando a Sysled como parceira direta do cliente industrial.
Slogans Alternativos
| Opção | Slogan | Contexto de Uso |
|---|---|---|
| Principal | Inteligência que conecta sua indústria. | Uso geral e institucional |
| Alternativo 1 | Do chão de fábrica à nuvem. | Feiras, eventos e apresentações técnicas |
| Alternativo 2 | A inteligência por trás da sua operação. | Materiais comerciais e propostas |
| Alternativo 3 | Conectando dados, automatizando o sucesso. | Campanhas digitais e redes sociais |
Uso do Logotipo
Para manter a consistência e integridade da marca, é fundamental seguir as diretrizes de uso do logotipo. Abaixo estão as práticas recomendadas e as que devem ser evitadas.
Fundos Permitidos
| Versão do Logo | Fundos Recomendados | Fundos Proibidos |
|---|---|---|
| Principal (colorida) | Branco, cinza claro (#F7FAFC), bege claro | Escuros, azuis, imagens complexas |
| Branca | Azul primário, escuro (#1A1A2E), gradientes azuis | Branco, cores claras |
| Monocromática | Branco, cinza claro | Escuros (sem contraste) |
Tom de Voz
A comunicação da Sysled deve ser sempre clara, profissional e orientada a resultados. O tom varia conforme o contexto, mas mantém uma base consistente de confiança técnica e proximidade com o cliente.
| Contexto | Tom | Exemplo |
|---|---|---|
| Institucional | Profissional e inspirador | "Transformamos dados em decisões que movem a indústria." |
| Técnico | Preciso e acessível | "O módulo de rastreabilidade integra-se via API REST com seu ERP existente." |
| Comercial | Confiante e orientado a benefícios | "Reduza em até 40% os erros operacionais com automação inteligente." |
| Redes Sociais | Próximo e informativo | "Sua indústria já está conectada? Descubra como a Sysled pode ajudar." |
Palavras-chave da Marca
Ao comunicar sobre a Sysled, priorize o uso das seguintes palavras e conceitos: inteligência operacional, automação, integração, eficiência, rastreabilidade, dados em tempo real, indústria conectada, otimização, confiabilidade.
Aplicações Externas
A consistência da marca SYSLED se estende a todos os pontos de contato externos, desde materiais de papelaria até apresentações comerciais. Esta seção estabelece as diretrizes para a aplicação da identidade visual em diversos formatos, garantindo uma imagem profissional e unificada.
Cartão de Visita
O cartão de visita é uma ferramenta de networking fundamental. O design deve ser limpo, profissional e direto, refletindo a clareza e a eficiência da marca. São disponibilizadas versões física (impressa) e digital (formato vCard e imagem para WhatsApp).
+55 (11) 99999-8888
nome@sysled.site
www.sysled.site
| Elemento | Especificação |
|---|---|
| Dimensões | 90mm × 50mm (padrão brasileiro) |
| Papel | Couchê fosco 300g com laminação fosca soft-touch |
| Frente | Fundo branco, logotipo centralizado, slogan abaixo em Inter Italic 8pt |
| Verso | Fundo azul primário (#2B6CB0), nome em Montserrat Bold 12pt, cargo em Inter Regular 9pt, contato em Inter Regular 9pt |
| Versão Digital | Imagem PNG 1080×600px para WhatsApp/LinkedIn + arquivo .vcf (vCard) |
Assinatura de E-mail
A assinatura de e-mail deve ser padronizada para todos os colaboradores, reforçando a identidade visual da marca em cada comunicação. O layout utiliza uma estrutura horizontal com separador visual e o slogan como elemento de fechamento.
| Elemento | Especificação |
|---|---|
| Logo | Versão principal, largura máxima de 120px |
| Nome | Montserrat Bold 14pt, cor escura (#1A1A2E) |
| Cargo e Contato | Inter Regular 10pt, cor cinza (#4A5568) |
| Divisor | Borda vertical esquerda de 2px, cor azul claro (#5BB8F5) |
| Links | Cor azul primário (#2B6CB0), sem sublinhado |
| Slogan | Inter Italic 9pt, cor cinza (#A0AEC0) |
Papelaria Institucional
O papel timbrado, envelopes e pastas seguem um design minimalista e elegante, com o logotipo como ponto focal e uso estratégico do gradiente azul SYSLED para criar uma identidade visual marcante e profissional.
Papel Timbrado
Envelope
Pasta
| Material | Especificação |
|---|---|
| Papel Timbrado | A4 (210×297mm), papel offset 90g, logotipo no canto superior esquerdo, faixa de gradiente azul no rodapé, margens de 25mm |
| Envelope | Envelope saco 229×324mm (C4), logotipo no canto superior esquerdo, faixa lateral direita em gradiente azul |
| Pasta | Pasta com bolso interno, couchê 250g, fundo em gradiente azul com logotipo branco no canto inferior direito |
Templates Comerciais
Templates para propostas comerciais, relatórios e PDFs institucionais devem seguir uma estrutura padronizada, garantindo consistência visual e profissionalismo em todos os documentos gerados pela equipe.
| Tipo de Documento | Estrutura | Elementos Visuais |
|---|---|---|
| Proposta Comercial | Capa com logotipo e título, sumário executivo, escopo, cronograma, investimento, termos | Capa com gradiente azul, títulos em Montserrat Bold, tabelas com cabeçalho azul, rodapé com logotipo e numeração |
| Relatório Técnico | Capa, índice, introdução, desenvolvimento, conclusão, anexos | Faixa superior com gradiente azul, gráficos com paleta SYSLED, códigos de cores consistentes |
| PDF Institucional | Layout de uma página (one-pager) ou múltiplas páginas | Margens generosas, uso de ícones do sistema, blocos de destaque com fundo cinza claro |
Pitch Deck Visual
O pitch deck da SYSLED deve seguir uma estrutura visual padronizada que transmita profissionalismo, inovação e clareza. Cada slide deve respeitar a hierarquia tipográfica e a paleta de cores da marca.
Slide de Abertura
Slide de Conteúdo
One-Pager Institucional
| Slide | Conteúdo | Diretrizes Visuais |
|---|---|---|
| Abertura | Título da apresentação, nome do apresentador, data | Fundo com gradiente escuro-azul (mesmo da capa do brandbook), logotipo centralizado, título em Montserrat ExtraBold branco |
| Conteúdo | Título + corpo de texto ou gráficos | Fundo branco, título em Montserrat Bold azul escuro, corpo em Inter Regular, logotipo pequeno no rodapé |
| Dados/Gráficos | Gráficos, tabelas, KPIs | Gráficos com paleta SYSLED, números de destaque em Montserrat ExtraBold, fundo cinza claro para contraste |
| Encerramento | Agradecimento, contato, CTA | Fundo com gradiente azul, logotipo branco centralizado, dados de contato em Inter Regular branco |
Documentos Institucionais
Documentos como one-pagers e apresentações corporativas devem sintetizar a proposta de valor da SYSLED de forma visual e impactante, seguindo as diretrizes de marca.
| Documento | Formato | Conteúdo Essencial |
|---|---|---|
| One-Pager | A4, frente e verso, PDF | Visão geral da empresa, proposta de valor, módulos da plataforma, diferenciais, cases de sucesso (resumo), contato |
| Apresentação Corporativa | 16:9, 10-15 slides, PPTX/PDF | Quem somos, problema que resolvemos, solução, módulos, tecnologia, cases, equipe, contato |
| Fact Sheet | A4, uma página, PDF | Dados da empresa, números-chave, setores atendidos, tecnologias, certificados |
Aplicações em Apresentações (PowerPoint / Google Slides)
Para garantir consistência em todas as apresentações, os templates devem ser disponibilizados nos formatos PowerPoint (.pptx) e Google Slides, com os seguintes elementos pré-configurados:
| Elemento | Diretriz |
|---|---|
| Proporção | Widescreen 16:9 (1920×1080px) |
| Fontes | Montserrat para títulos (24-36pt), Inter para corpo (14-18pt) |
| Cores de Fundo | Branco (#FFFFFF) para slides de conteúdo, cinza claro (#F7FAFC) para dados, gradiente azul para abertura/encerramento |
| Logotipo | Versão principal no slide de abertura (centralizado), versão reduzida (48px) no rodapé dos demais slides |
| Gráficos | Usar exclusivamente as cores da paleta SYSLED: azul primário, ciano, azul claro, cinzas |
| Imagens | Fotos com filtro azulado sutil, border-radius de 8px, sombra suave |
| Rodapé | Logotipo à esquerda, título da apresentação ao centro, número do slide à direita |
| Ícones | Estilo outline, 24px, cor azul primário ou cinza escuro, do sistema de iconografia SYSLED |
Redes Sociais & Presença Digital
A presença digital da SYSLED deve ser coesa, profissional e alinhada à identidade da marca. Esta seção define as diretrizes e templates para as principais plataformas de redes sociais, garantindo uma comunicação visual consistente e impactante em todos os canais digitais.
Como principal plataforma profissional, o LinkedIn deve refletir a expertise e a liderança da SYSLED no setor de tecnologia industrial. O design é sóbrio, informativo e focado em conteúdo de valor.
| Elemento | Especificação |
|---|---|
| Banner (1128×191px) | Fundo com gradiente sutil (azul escuro para azul primário), logotipo branco à esquerda e slogan “Inteligência que conecta sua indústria.” à direita. |
| Post Quadrado (1080×1080px) | Estrutura com margem de 60px. Título em Montserrat Bold 48pt, texto de apoio em Inter Regular 24pt. Logotipo no canto inferior direito. |
| Post Vertical (1080×1350px) | Ideal para infográficos e conteúdo detalhado. Manter a mesma hierarquia tipográfica e margens. |
| Carrossel | Até 10 slides, com capa impactante e slides de conteúdo seguindo o template padrão. Último slide com CTA e contato. |
| Cores | Paleta principal da SYSLED, com branco e cinza claro para fundos, e azul primário para destaques e CTAs. |
No Instagram, a comunicação é mais visual e dinâmica. Os templates são projetados para capturar a atenção rapidamente, com uso de blocos de cor, tipografia impactante e uma paleta vibrante, mas controlada.
| Formato | Diretrizes |
|---|---|
| Feed (Quadrado) | Templates com blocos de cor (azul primário, ciano), títulos em Montserrat ExtraBold e imagens que ocupam parte do layout. Uso de ícones para ilustrar dados. |
| Carrossel | Capa com título impactante, slides internos com conteúdo educativo, último slide com CTA. Manter consistência visual entre slides. |
| Stories / Reels | Layout vertical com área de segurança (250px topo, 350px base) para interface do app. Títulos curtos e impactantes na parte superior, com legendas e CTAs na parte inferior. |
| Paleta de Destaque | Uso do azul claro e ciano para elementos gráficos, stickers e fundos de texto, criando um contraste energético. |
| Tipografia | Montserrat para títulos (60-90pt), Inter para textos de apoio (24-32pt). Priorizar legibilidade em telas pequenas. |
Comunidades (Twitter/X & YouTube)
Para plataformas como Twitter/X e YouTube, a identidade visual é focada na clareza e reconhecimento rápido. Os banners são minimalistas e o avatar é sempre o ícone da nuvem SYSLED, garantindo consistência em todos os pontos de contato.
| Plataforma | Diretrizes de Identidade |
|---|---|
| Avatar (Todas) | Ícone da nuvem SYSLED (sem o texto) em fundo branco ou azul primário, garantindo máxima legibilidade em tamanhos pequenos (110×110px mínimo). |
| Banner Twitter/X (1500×500px) | Fundo com gradiente azul, logotipo completo à esquerda, slogan ou tagline da campanha à direita. Manter área de segurança de 60px para o avatar. |
| Banner YouTube (2560×1440px) | Design minimalista com logotipo e slogan na área de segurança central (1546×423px). Fundo pode conter imagem de tecnologia abstrata com sobreposição de cor azul. |
| Thumbnails YouTube (1280×720px) | Títulos grandes em Montserrat Bold, fundo com cores contrastantes (azul, ciano, branco), logotipo no canto inferior direito (48px). |
| Tom de Comunicação | Twitter/X: técnico e direto, com foco em insights e novidades da indústria. YouTube: educativo e demonstrativo, com tutoriais e cases de sucesso. |
Materiais Comerciais & Marketing
A comunicação comercial e de marketing da SYSLED deve ser consistente, profissional e alinhada com os mais altos padrões de qualidade. Esta seção define as diretrizes para materiais de apoio essenciais, garantindo que a marca seja representada de forma coesa em todos os pontos de contato com clientes, parceiros e imprensa.
E.1.1 — Folder Institucional (Digital e Impresso)
O folder é uma ferramenta de apresentação concisa e impactante, ideal para eventos, reuniões comerciais e como material de apoio digital. O design segue um formato de 3 dobras (tri-fold), organizando a informação de forma lógica e visualmente atraente, seguindo rigorosamente a identidade visual da SYSLED.
Capa (Frente)
Interior (3 Painéis)
| Elemento | Especificação |
|---|---|
| Formato | A4 (297 x 210 mm) com 3 dobras (tri-fold), resultando em 3 painéis de 99 x 210 mm cada. |
| Papel (Impresso) | Couchê fosco 170g com laminação fosca para toque premium e sofisticado. |
| Capa | Fundo com gradiente azul escuro (#0a1628 para #1565C0), logotipo SYSLED centralizado e slogan na base. Visual limpo e impactante. |
| Painel 1 — Sobre Nós | Missão, visão e proposta de valor da marca. Texto conciso com hierarquia tipográfica clara. |
| Painel 2 — Soluções | Principais módulos da plataforma com ícones e descrições curtas. Destaque visual para cada solução. |
| Painel 3 — Diferenciais | Diferenciais competitivos e CTA com QR code para o site ou landing page. |
| Contracapa | Informações de contato completas: telefone, e-mail, website, endereço e QR code. |
| Versão Digital | PDF interativo com links clicáveis, otimizado para envio por e-mail (máximo 5MB) e download no site. |
| Tipografia | Títulos em Montserrat Bold, corpo em Inter Regular. Tamanhos: títulos 14pt, corpo 9pt, legendas 7pt. |
| Cores | Paleta principal da SYSLED. Fundo escuro na capa, fundo branco no interior com acentos em azul primário. |
E.1.2 — Kit de Imprensa (Media Kit)
O Media Kit é um recurso centralizado e profissional destinado a jornalistas, parceiros de mídia, influenciadores e stakeholders. Deve ser disponibilizado em uma área dedicada do site (ex: sysled.site/imprensa) e conter todos os ativos necessários para a cobertura e divulgação da marca de forma precisa e consistente.
Estrutura de Arquivos
Página de Imprensa (Web)
| Componente do Media Kit | Descrição e Conteúdo |
|---|---|
| 1. Visão Geral da Empresa | Documento de uma página (one-pager) com a história da SYSLED, missão, visão, mercado de atuação, público-alvo e números relevantes (clientes atendidos, módulos, etc.). |
| 2. Biografias dos Executivos | Fotos profissionais em alta resolução (fundo neutro, mínimo 1200x1200px) e biografias concisas (máximo 150 palavras) dos principais líderes da empresa. |
| 3. Logos e Ativos da Marca | Logotipos em alta resolução nos formatos SVG e PNG (fundo transparente) nas versões: principal, monocromática branca, monocromática preta e ícone. Incluir guia resumido de uso. |
| 4. Press Releases | Comunicados de imprensa organizados por data (mais recente primeiro). Formato padrão com título, subtítulo, corpo, boilerplate e contato de imprensa. |
| 5. Imagens e Vídeos | Galeria com screenshots da plataforma, fotos da equipe e escritório (mínimo 2400px de largura), e vídeo institucional (1080p ou 4K). |
| 6. Cases de Sucesso | PDFs com estudos de caso detalhados seguindo a estrutura: Desafio, Solução SYSLED, Resultados (com métricas) e Depoimento do cliente. |
| 7. Contato de Imprensa | Nome, cargo, e-mail direto e telefone do responsável pela comunicação com a imprensa. Tempo de resposta esperado: até 24h. |
Diretrizes de Formatação do Press Release
| Elemento | Diretriz |
|---|---|
| Cabeçalho | Logotipo SYSLED no topo, seguido de "PARA DIVULGAÇÃO IMEDIATA" e data. |
| Título | Montserrat Bold 18pt, máximo 2 linhas, direto e informativo. |
| Subtítulo | Inter Regular 12pt, complementa o título com contexto adicional. |
| Corpo | Inter Regular 10pt, parágrafos curtos (3-4 linhas), citações em itálico com atribuição. |
| Boilerplate | Parágrafo padrão "Sobre a SYSLED" com descrição fixa da empresa (máximo 80 palavras). |
| Contato | Nome, cargo, e-mail e telefone do porta-voz ou assessoria de imprensa. |
E.2.1 — Cases de Uso (Estudos de Caso)
Os estudos de caso são a prova social mais poderosa da SYSLED, demonstrando o valor tangível da nossa plataforma através de histórias de sucesso de clientes. Cada case deve seguir uma estrutura narrativa clara e ser visualmente alinhado à identidade da marca, focando em resultados mensuráveis.
Layout do Documento (PDF/Web)
Estrutura Narrativa
Deve resumir o principal benefício alcançado.
Um parágrafo com o cliente, o desafio e o resultado principal.
Breve introdução sobre a empresa-cliente e seu mercado.
Descrição detalhada dos problemas e dores que o cliente enfrentava.
Quais módulos foram implementados e como eles abordaram os desafios.
Apresentação dos KPIs e métricas de sucesso (gráficos e números).
Citação de um líder da empresa cliente validando o sucesso do projeto.
E.2.2 — Templates de Anúncio Digital
Os anúncios digitais são a linha de frente da nossa prospecção e devem capturar a atenção rapidamente, comunicando valor de forma clara e visualmente coesa. Os templates são otimizados para as principais plataformas (LinkedIn, Instagram) e focam em diferentes objetivos de campanha (reconhecimento, consideração, conversão).
LinkedIn Ad (Carrossel)
Instagram Ad (Stories)
| Tipo de Anúncio | Diretrizes e Especificações |
|---|---|
| LinkedIn (Feed/Carrossel) | Imagem: 1080x1080px. Usar blocos de cor sólida (azul primário ou escuro) com texto em Montserrat Bold. Copy: Foco em dor e solução para o público B2B. Usar hashtags relevantes (#Industria40, #AutomacaoIndustrial). CTA: "Saiba Mais", "Baixar Ebook", "Agendar Demo". |
| Instagram (Feed) | Imagem: 1080x1080px ou 1080x1350px. Priorizar imagens de alta qualidade do produto ou gráficos de dados. Sobreposição de texto mínima. Copy: Mais direta e visual. Usar emojis com moderação. Foco em benefícios rápidos. |
| Instagram (Stories/Reels) | Vídeo: 1080x1920px, 15-30 segundos. Iniciar com gancho visual forte. Legendas obrigatórias. Usar stickers interativos (enquete, quiz). CTA: "Arrasta pra Cima" ou link no sticker. |
| Google Ads (Display) | Formatos responsivos. Usar logo, título curto (ex: "Otimize Sua Indústria"), descrição e imagem limpa. Cores da marca devem ser predominantes. Foco em consistência visual. |
Princípios de Design
O design de interfaces da Sysled segue princípios que refletem os valores da marca e garantem uma experiência de usuário consistente, eficiente e profissional em todas as plataformas.
| Princípio | Descrição | Aplicação |
|---|---|---|
| Clareza | Informações devem ser apresentadas de forma direta e sem ambiguidade | Labels claros, hierarquia visual definida, feedback imediato |
| Consistência | Padrões visuais e de interação devem ser uniformes em toda a plataforma | Componentes reutilizáveis, tokens de design, nomenclatura padronizada |
| Eficiência | O usuário deve completar tarefas com o mínimo de esforço possível | Atalhos, autocompletar, valores padrão inteligentes, fluxos otimizados |
| Confiabilidade | O sistema deve transmitir segurança e previsibilidade | Estados de loading, confirmações, tratamento de erros, dados em tempo real |
| Acessibilidade | A interface deve ser utilizável por todos, independente de limitações | Contraste WCAG AA, navegação por teclado, textos alternativos, ARIA labels |
Sistema de Grid
A Sysled utiliza um sistema de grid de 12 colunas com gutters de 24px para layouts desktop e 16px para mobile. O grid garante alinhamento consistente e facilita a criação de layouts responsivos.
| Breakpoint | Largura | Colunas | Gutter | Margem |
|---|---|---|---|---|
| Mobile | 360px — 767px | 4 | 16px | 16px |
| Tablet | 768px — 1023px | 8 | 20px | 24px |
| Desktop | 1024px — 1439px | 12 | 24px | 32px |
| Large Desktop | 1440px+ | 12 | 24px | Auto (max 1200px) |
Sistema de Espaçamento
O sistema de espaçamento da Sysled é baseado em uma escala de 4px, garantindo consistência e harmonia visual em todos os componentes e layouts. Cada token de espaçamento é um múltiplo de 4px.
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
Border Radius
| Token | Valor | Uso |
|---|---|---|
| radius-sm | 4px | Badges, tags, chips |
| radius-md | 8px | Botões, inputs, dropdowns |
| radius-lg | 12px | Cards pequenos, tooltips |
| radius-xl | 16px | Cards grandes, modais, painéis |
| radius-full | 9999px | Avatares, pills, toggles |
Botões
Os botões são os principais elementos de ação da interface. Devem ser claramente distinguíveis e hierarquizados conforme a importância da ação que representam.
Hierarquia de Botões
Especificações
| Propriedade | Small | Default | Large |
|---|---|---|---|
| Padding | 8px 20px | 12px 28px | 16px 36px |
| Font Size | 0.8rem | 0.875rem | 1rem |
| Font Weight | 600 | 600 | 600 |
| Border Radius | 8px | 8px | 8px |
| Min Height | 32px | 40px | 48px |
Formulários e Inputs
Os campos de formulário devem ser claros, acessíveis e fornecer feedback visual imediato ao usuário. Labels devem estar sempre visíveis (não usar apenas placeholders como labels).
Especificações de Input
| Propriedade | Valor |
|---|---|
| Padding | 12px 16px |
| Border | 1.5px solid #E2E8F0 |
| Border (focus) | 1.5px solid #3A8FD6 |
| Border Radius | 8px |
| Font Size | 0.9rem (Inter) |
| Label Font Size | 0.8rem (Inter, weight 600) |
| Focus Ring | 0 0 0 3px rgba(58,143,214,0.15) |
| Min Height | 44px |
Cards
Cards são containers versáteis para agrupar informações relacionadas. Na plataforma Sysled, são utilizados para módulos, métricas, alertas e itens de lista. O design deve ser limpo, com hierarquia clara entre título, conteúdo e ações.
Gestão de Estoque
Controle inteligente de entradas, saídas e posições de estoque em tempo real com alertas automáticos.
Automação Logística
Automatize separações, alocações e movimentações com regras configuráveis por operação.
Especificações de Card
| Propriedade | Valor |
|---|---|
| Padding | 24px — 32px |
| Border | 1px solid #E2E8F0 |
| Border Radius | 16px |
| Background | #FFFFFF |
| Hover Shadow | 0 8px 32px rgba(0,0,0,0.08) |
| Hover Transform | translateY(-2px) |
| Transition | 0.3s ease |
Iconografia
A Sysled utiliza ícones no estilo outline (contorno) com espessura de 1.5px a 2px, alinhados ao estilo clean e moderno da marca. A biblioteca recomendada é a Lucide Icons ou Heroicons, ambas open-source e com estilo consistente.
Diretrizes de Ícones
| Propriedade | Valor |
|---|---|
| Estilo | Outline (contorno) |
| Stroke Width | 1.5px — 2px |
| Tamanho padrão | 24px x 24px |
| Tamanho pequeno | 16px x 16px |
| Tamanho grande | 32px x 32px |
| Cor padrão | currentColor (herda do texto) |
| Biblioteca recomendada | Lucide Icons / Heroicons |
Acessibilidade
A plataforma Sysled deve atender ao nível WCAG 2.1 AA como padrão mínimo de acessibilidade. Isso garante que a interface seja utilizável por pessoas com diferentes capacidades, incluindo deficiências visuais, motoras e cognitivas.
| Diretriz | Requisito | Implementação |
|---|---|---|
| Contraste de Texto | Mínimo 4.5:1 para texto normal, 3:1 para texto grande | Verificar com ferramentas como WebAIM Contrast Checker |
| Navegação por Teclado | Todos os elementos interativos acessíveis via Tab | Focus rings visíveis, ordem lógica de tabulação |
| Textos Alternativos | Todas as imagens com atributo alt descritivo | Alt text significativo, imagens decorativas com alt="" |
| ARIA Labels | Elementos interativos com labels acessíveis | aria-label, aria-describedby, roles semânticos |
| Tamanho de Toque | Mínimo 44px x 44px para elementos clicáveis | Botões, links e inputs com área de toque adequada |
| Hierarquia de Headings | Sequência lógica de h1 a h6 | Não pular níveis, um h1 por página |
Contraste das Cores Primárias
| Combinação | Ratio | Status |
|---|---|---|
| #1A1A2E sobre #FFFFFF | 16.2:1 | AAA |
| #2C3E50 sobre #FFFFFF | 10.7:1 | AAA |
| #2B6CB0 sobre #FFFFFF | 5.2:1 | AA |
| #FFFFFF sobre #2B6CB0 | 5.2:1 | AA |
| #FFFFFF sobre #1A1A2E | 16.2:1 | AAA |
Responsividade
Todas as interfaces da Sysled devem ser responsivas, adaptando-se fluidamente a diferentes tamanhos de tela. A abordagem recomendada é mobile-first, construindo a experiência base para telas menores e progressivamente aprimorando para telas maiores.
| Dispositivo | Breakpoint | Comportamento |
|---|---|---|
| Mobile | 360px+ | Layout em coluna única, menu hamburger, cards empilhados, tipografia reduzida |
| Tablet | 768px+ | Grid de 2 colunas, sidebar colapsável, tabelas com scroll horizontal |
| Desktop | 1024px+ | Layout completo com sidebar fixa, grid de 3-4 colunas, dashboards expandidos |
| Large Desktop | 1440px+ | Container centralizado (max 1200px), espaçamento ampliado, painéis laterais |
Diretrizes de Adaptação
Imagens e gráficos devem utilizar srcset para servir resoluções adequadas a cada dispositivo. Tabelas de dados devem implementar scroll horizontal em telas pequenas ou reorganizar-se em formato de cards. Menus de navegação devem colapsar em formato hamburger abaixo de 1024px. Modais devem ocupar tela cheia em mobile.
Brandbook & Manual de UX/UI — Versão 1.0 — Fevereiro 2026
Sysled Ltda — Todos os direitos reservados.
Este documento é confidencial e de uso exclusivo da equipe Sysled e parceiros autorizados.