Claro
Neve, superfície névoa, tarja laranja.
data-tema="claro"
Chesslab · Design system
Francesa, campanha e impacto
A Francesa desenha a campanha da Chesslab em bloco chapado. O cartaz é Plus Jakarta Sans 800. O índice, o selo e o dado são DM Mono. A tarja tem 6px e a sombra é seca, 6px por 6px, sem desfoque.
Como a página se organiza
Entra
- Cartaz monumental, uma ideia por bloco.
- Tarja franca de 6px no topo do bloco.
- Sombra sólida, sem desfoque.
- Grafite como texto sobre Laranja e sobre Pistache.
- Seis temas no atributo
data-tema.
Fica de fora
- Corte diagonal e malha de tabuleiro. Os tokens existem na marca e não desenham componente.
- Foto grande com texto na área calma.
- Filete fino separando lista.
- Neve como texto sobre Laranja ou sobre Pistache.
- Número de resultado de cliente. A marca entra só com o nome.
Cores e temas
A paleta --cl-* é a da marca. O componente usa o token semântico --fr-*, que muda com o tema. Nenhum hex fica no componente.
Paleta da marca
Neve
--cl-snowNévoa
--cl-mistPistache
--cl-pistachioVerde
--cl-forestGrafite
--cl-inkLaranja
--cl-orangeTexto suave
--cl-text-mutedTexto suave no escuro
--cl-text-muted-darkBorda
--cl-borderTrama
--cl-tramaSeis temas
data-tema
A barra no topo troca o tema de cada palco marcado com data-tema-livre. O cromo do guia permanece claro, e a lateral permanece escura.
Pistache
Pistache, texto grafite, tarja grafite.
data-tema="pistache"
Escuro
Grafite, superfície verde, texto neve.
data-tema="escuro"
Verde
Verde, superfície grafite, tarja pistache.
data-tema="verde"
Névoa
Névoa, superfície neve, tarja verde.
data-tema="nevoa"
Laranja
Laranja, superfície neve, texto grafite.
data-tema="laranja"
Tipografia
Plus Jakarta Sans, pesos 400 a 800, para cartaz e texto. DM Mono, pesos 400 e 500, para rótulo, índice e placar. As duas famílias estão embutidas, licença OFL.
.fr-cartaz-xl
Foco em lucro.
.fr-cartaz
Vamos conversar sobre a sua loja.
.fr-d-xl
Três frentes da Chesslab
.fr-d-l
Aceleração de e-commerce
.fr-d-m
Head de marketing
.fr-h3
Squad dedicado
.fr-lead
Tráfego pago, criativo e rotina diária de metas com squad dedicado.
.fr-corpo
Um planejamento completo para a sua loja e uma rotina que você acompanha, dia a dia.
.fr-pequeno
Toda semana um resumo das campanhas.
.fr-mono
03 frentes · 09 documentos · 15 dias
.fr-rotulo
Campanha de aceleração
.fr-grifo
Foco em lucro, não só faturamento.
Medidas e movimento
A unidade é 8px. O container chega a 1328px. O movimento é uma batida curta: o bloco entra e a tarja abre. O botão Repetir esconde sem transição, força reflow e, no quadro seguinte, mostra de novo.
Régua
Unidade 8
Borda 2
Bloco 3
Tarja 6
Sombra 6×6
Grade de 12
.fr-grade
| Token | Papel |
|---|---|
--fr-container | Largura máxima do miolo |
--fr-gutter | Margem lateral da seção |
--fr-col-gap | Intervalo da grade |
--fr-secao-y | Respiro vertical da seção |
--fr-altura-cabecalho | Altura da barra de navegação |
Tempos
160
--fr-m-curto220
--fr-m-botao280
--fr-m-entrada420
--fr-m-blocoA tarja abre e o bloco entra.
Símbolos
O sprite fica inline no documento, com prefixo fr-. O acento do wordmark usa a cor de realce do tema.
fr-logo
fr-simbolo
fr-seta-direita
fr-seta-ne
fr-seta-cima
fr-check
fr-fechar
fr-mais
fr-repetir
Botões
Conversão, contorno, ação, compacto e ícone. Um botão de conversão por bloco, e ao lado dele vai o contorno. O ícone sozinho leva nome acessível.
O laranja sólido não encosta em verde sólido. A conversão é laranja no claro, na névoa e no escuro, com anel grafite no claro e na névoa. Sobre verde, inclusive no bloco verde do escuro, ela vira pistache com rótulo grafite. No pistache e no laranja ela é grafite. No escuro e no verde, a borda, a sombra e o hover da conversão são neve. No escuro, o anel também.
Cartazes
O bloco de cartaz carrega selo, título, lead e a ação. O grifo marca a palavra que a campanha não pode perder.
Campanha de aceleração
Squad dedicado
Aceleração de e-commerce com foco em lucro.
Tráfego pago, criativo e rotina diária de metas com squad dedicado. Um planejamento completo para a sua loja e uma rotina que você acompanha, dia a dia.
Head de marketing · Gestor de tráfego · Time criativo
Faixas
A faixa alinha quatro momentos da loja. A chave é mono. O valor é o texto da campanha.
Momento 01
Invisto em anúncios e quero mais retorno.
Momento 02
Vou criar ou refazer a minha loja.
Momento 03
Quero que quem já comprou volte a comprar.
Momento 04
Vendo no atacado e preciso organizar o comercial.
Placares
O número do placar descreve a estrutura do serviço, não um resultado de cliente.
03frentes
Aceleração, loja Shopify e CRM
As três frentes da Chesslab para aquisição, conversão e recompra no e-commerce.
09documentos
Registro da operação
Plano de metas, concorrentes, relatórios mensais, feedbacks semanais, atas, planejamento, sazonalidade, influenciadores e manual de anúncios.
15dias
Resumo semanal e reunião quinzenal
Toda semana um resumo das campanhas. A cada quinze dias, reunião para olhar resultados e planejar as próximas ações.
Quadros de serviço
Cada frente da Chesslab ocupa um quadro. O primeiro pode receber a sombra do bloco.
01
Performance e criação
Aceleração de e-commerce
Tráfego pago, criativo e rotina diária de metas com squad dedicado. Foco em lucro, não só faturamento.
02
Shopify sob medida
Desenvolvimento de site
Loja sob medida na Shopify, sem tema pronto: design exclusivo no Figma e performance em qualquer dispositivo.
03
Varejo e atacado
CRM
E-mail, cashback e comercial organizado para transformar compra única em recompra, no varejo e no atacado.
Comparativo sem / com
O contraste descreve o ponto de corte do custo de aquisição. Não promete um número de loja.
Acima do ponto de corte
Quando o custo por cliente ignora a margem
- Campanhas rodam sem ponto de corte definido a partir do custo fixo e variável da loja.
- Acima do ponto de corte, o custo de aquisição de cliente compromete a margem de lucro.
- Falta visibilidade sobre o que a equipe está executando em cada dia do mês.
Dentro do ponto de corte
Planejamento completo e margem preservada
- Equipe de tráfego define o CAC máximo com base no custo fixo e variável da operação.
- Cronograma diário mostra aos gestores quais campanhas precisam de otimização.
- Calendário mensal registra o que a equipe faz pelo projeto em cada dia do mês.
Etapas
O ciclo de conteúdo da operação, em cinco passos, do planejamento à leitura do que ficou.
-
01
Planejar
Definir editorias, pilares de conteúdo e linhas criativas a partir do objetivo de negócio.
-
02
Criar
Desenvolver os textos das peças, roteiros de vídeo, legendas e chamadas de ação.
-
03
Colaborar
Criar briefings para designers e editores de vídeo junto aos times Comercial e Performance.
-
04
Publicar
Programar publicações e executar ajustes de edição com ritmo acompanhado.
-
05
Aprender
Analisar retenção, alcance e conversão para orientar o que manter, testar ou descartar.
Marcas
Nome e frente. Sem métrica ao lado. A lista reúne marcas já citadas nos materiais da Chesslab.
- AceleraçãoRebeca Duarte
- AceleraçãoAZ Moda Fitness
- AceleraçãoO2 Arts
- AceleraçãoAndressa Kids
- AceleraçãoFelicittá
- Loja ShopifyHeyMu
- Loja ShopifyPé Direito
- Loja ShopifyPureUp
- Loja ShopifyElGato
- Loja Shopify · AceleraçãoFromVix
Abas
Setas, Home e End trocam a aba e levam o foco. O painel escondido não entra na tabulação.
Quem lidera o planejamento de marketing
Com base nos dados coletados ao fim de cada mês de trabalho, cria projeções de faturamento para o mês seguinte, define a meta e organiza o calendário do que precisa ser feito para buscá-la.
Quem cuida dos anúncios pagos
Define o ponto de corte de CAC com base no custo fixo e variável da loja e acompanha o cronograma diário de otimização das campanhas sem comprometer a margem de lucro.
Quem cria e edita os vídeos e as imagens
Editores de vídeo e de imagem da própria Chesslab preparam o material dos anúncios e mantêm a biblioteca de referências para orientar gravações da marca.
Acordeão
O acordeão é details. Funciona sem JavaScript. O ícone gira quando o item abre.
O que é CAC?
CAC é o custo para conquistar um cliente novo. A equipe de tráfego define o valor máximo que dá para gastar por cliente, com base no custo fixo e no custo variável da loja, para não comprometer a margem de lucro.
A aceleração inclui fazer um site novo?
A aceleração inclui uma auditoria do seu site, com correções ou orientação sobre o que resolver. Criar uma loja nova é a frente de Desenvolvimento de site.
Posso falar com a Chesslab antes de escolher uma frente?
Pode. A Chesslab tem três frentes: Desenvolvimento de site, Aceleração de e-commerce e CRM. Se ainda não sabe qual faz sentido, fale com a gente sem escolher.
Formulário
O envio confere os campos obrigatórios no próprio documento. O aviso confirma o recebimento e não inventa um protocolo.
Modal
A janela lista os documentos da área do projeto. Escape, o botão fechar e o clique no véu devolvem o foco a quem abriu.
Chamada
O fechamento oferece conversa sem obrigar a escolha da frente. O e-mail é o publicado no site da Chesslab.
Três frentes · Uma operação
Vamos conversar sobre a sua loja.
Se ainda não sabe qual frente faz mais sentido agora, fale com a Chesslab sem precisar escolher antes.
contato@chesslab.com.br
Resposta comercial organizada por squad
Cabeçalho
No site, a barra gruda no topo. Neste palco ela fica no fluxo, para não cobrir a troca de tema. Abaixo de 850px o menu recolhe e o botão abre.