Manual de Marca & Design System

A identidade da Sales 3S, escrita como sistema.

Esta é a fonte primária de verdade para cores, tipografia, componentes e voz da marca Sales 3S e dos quatro módulos do seu ecossistema. Use o seletor acima para ver cada módulo reskinnar os tokens em tempo real.

Versão 1.0 · Set 2026 Tokens 44 de marca · 12 neutros · 4 CHAEA Tipografia Red Hat Display · Poppins · Hurricane

Baixar design system completo Ver os tokens

Tipografia e escala

Três famílias, cada uma com um papel estrito. Nunca misture pesos fora dos especificados para não diluir a hierarquia.

Red Hat Display

Títulos e headings

Exclusiva para h1–h6. Pesos: Regular 400 e Medium 500. Cor padrão #3F3E3F.

Poppins

Interface e corpo

Texto corrido, botões, inputs, rótulos. Pesos 300 a 800.

Hurricane

Assinatura

Somente linha de assinatura em certificados impressos e digitais (PDF).

Token	Tamanho	Line height	Peso	Aplicação	Amostra
text-h1	48px	120%	700 Poppins / 500 Red Hat	Título de página (hero)	Aa
text-h2	36px	120%	700 Poppins / 400 Red Hat	Títulos de seção	Aa
text-h3	28px	130%	600 SemiBold	Subtítulos de seção	Aa
text-card-title	26px	130%	600 SemiBold	Títulos de cards de destaque	Aa
text-subtitle	20px	140%	500 Medium	Apoio de títulos	Aa
text-body	18px	160%	400 Regular	Corpo de texto (base)	Aa
text-secondary	16px	160%	400 Regular	Apoio e descrições	Aa
text-caption	14px	150%	400 Regular	Legendas, selos, rodapés	Aa
text-label	13px	150%	500 Medium · UPPERCASE	Rótulos de campo e badges	Aa
text-btn	16px	100%	600 SemiBold	Texto em botões (lg, xl)	Aa

Cores e tokens

Clique em qualquer amostra para copiar o valor. A escala de marca abaixo reflete o módulo selecionado no seletor do topo.

Escala de marca — módulo ativo (Sales 3S · Core)

Neutros da aplicação

Semânticas CHAEA — estilos de aprendizagem

As quatro escalas de marca do ecossistema

Ecossistema de produtos

#F94317

Marca Mãe & Consultoria

Metodologia especializada em facilitação de vendas complexas B2B, combinando estratégia, ética e foco em resultado.

#103778

Treinamentos Corporativos B2B

Capacitação de equipes de vendas em vários idiomas, unindo teoria e prática para profissionais técnicos.

#000000

Arquitetura de Comunicação & Branding

Diagnóstico, planejamento e execução com visão 360°, integrando marketing, tecnologia e comunicação.

#30343F

Gestão Comercial Centralizada

Centraliza a estratégia comercial num só lugar, eliminando tarefas repetitivas para focar na expansão do negócio.

Componentes-base

Todos os componentes lêem os tokens do módulo ativo. Troque o módulo no topo e observe os estados de botão acompanharem.

Variantes

Tamanhos — sm · md · lg · xl

Raio de borda

sm 8px · base 10px · lg 12px · xl 18px · full 9999px

Superfícies

card · fundo neutro, borda line, sombra shadow-card

card-subtle · fundo card-subtle

card-dark · fundo navy, texto claro

Pills e badges

Token Rótulo Ativo

Sombra e movimento

Transições em 220ms com easing cubic-bezier(.22,1,.36,1). Hover de card eleva -3px.

Stack tecnológica de desenvolvimento

Como os tokens deste manual são consumidos em código. Os temas de módulo entram por classe no :root — .gw-theme, .martech-theme, .platform-theme.

Arquitetura frontend

Framework core: React / Next.js com TypeScript estrito.
Estilização: Tailwind CSS com CSS Variables no :root para injeção dinâmica de temas via classes (ex.: .gw-theme, .martech-theme).
Composição de classes: utilitário cn() combinando clsx + tailwind-merge.
Ícones & acessibilidade: Lucide Icons (lucide-react) e Radix UI / Shadcn UI para primitives acessíveis.

Componentes mapeados na stack

React Next.js TypeScript Tailwind CSS Shadcn UI Lucide React clsx / tailwind-merge jsPDF

Uso do logotipo

Espaço e superfícies

Área de respiro: mantenha sempre um espaço livre ao redor do logotipo, sem textos ou elementos gráficos.
Tamanho mínimo: nunca abaixo de 32px de altura em tela, para não comprometer a legibilidade.
Fundo claro vs. escuro: versão padrão em fundos claros; variante com texto/monograma claro em superfícies escuras.

Integridade da marca

Presença proeminente: deve aparecer com clareza em todas as peças, comunicações e apresentações.
Kit oficial: use exclusivamente os arquivos vetorizados/SVG do kit de marca.

Proibições: não altere as cores oficiais, não distorça ou incline, não aplique sombras não autorizadas nem sobreponha a imagens de baixo contraste.

Aplicações da marca

Material impresso

Cartões, papéis timbrados, envelopes e folhetos com logotipo proeminente e tipografia oficial.

Mídia digital

Sites, redes sociais e assinaturas de e-mail padronizadas para consistência visual e de tom.

Merchandising

Brindes, banners e sinalização de eventos, sempre respeitando a área de respiro do logotipo.

Apresentações

Templates corporativos e relatórios com a paleta, Poppins/Red Hat e estrutura limpa.

Tom de voz e comunicação

Como a Sales 3S fala

Profissional e confiante: reflete autoridade, solidez e experiência em vendas complexas B2B.
Claro e direto: linguagem objetiva, compreensão rápida, sem ambiguidades.
Inspirador e motivador: demonstra a paixão por capacitar e transformar o setor de vendas.

Faça: voz ativa, verbos que dizem exatamente o que acontece, dados concretos e imagens de alta definição alinhadas aos tokens de cor.

Alinhamento de mensagem

Missão e visão: toda mensagem reforça o compromisso de ser a primeira escolha para simplificar processos comerciais.
Qualidade gráfica: imagens relevantes, nítidas e em sintonia com a paleta da marca.

Evite: jargão vazio, promessas vagas, tom hesitante ou pedidos de desculpa; imagens genéricas de banco fora da paleta.

Liderança e autoridade

Gisele Tacchi

Especialista em Vendas Complexas B2B · Cofundadora e CEO da Sales 3S

Com mais de 25 anos de experiência em consultoria e treinamento em vendas complexas B2B, Gisele contribuiu para o desenvolvimento de mais de 15 mil profissionais e liderou projetos em indústria, logística, química, farmacêutico, financeiro, automotivo, serviços, bens de consumo e varejo — no Brasil e em México, Argentina, Chile, Colômbia, Peru e Portugal.

Hoje dedica-se a levar sua bagagem prática a profissionais técnicos que precisam transformar conhecimento em resultado comercial — com método, ética e respeito à própria essência.

Gisele Tacchi

Contatos e presença digital

WhatsApp comercial +55 (21) 98545-9211

E-mail corporativo contato@sales3s.com

Canais oficiais

Baixar o design system

Feito para colar em IAs de código

Os arquivos abaixo empacotam todos os tokens, a escala tipográfica, as quatro escalas de marca, as receitas de componentes e a voz — num formato pronto para usar como contexto no Claude Code, Codex, Cursor e afins.

Guia completo — Markdown

Documento único com tudo. Ideal como CLAUDE.md ou anexo de contexto.

Tokens — JSON

Estrutura legível por máquina: brand, neutral, chaea, type, radius, shadow.

Variáveis — CSS

Bloco :root com os quatro módulos como [data-brand], pronto para importar.

Pacote completo

Os três arquivos acima de uma vez, mais este manual em HTML.