Brand guidelines · v1

LANSING.
Conversão é ciência.

A identidade da LANSING. Direta e confiante — como a tecnologia que entrega: Arquitetura LANSING, +60 funções nativas e 16 Agentes Autônomos de IA.

Explorar o sistemaDo / Don't
Sistema · Telemetria
Funções nativas0+
Agentes de IA0
ArquiteturaLANSING
01 — Essência

O que a LANSING é.

Visão

Ser referência em conversão de e-commerce no Brasil. Provar que conversão é ciência — e que tecnologia de ponta não precisa ser cara.

Propósito

Fazer pequenos e-commerces venderem mais com o tráfego que já têm — com a Arquitetura LANSING.

Diferencial

Consultoria e tecnologia juntas. O que agências de marketing e de desenvolvimento não entregam, a LANSING entrega de uma vez.

Valores
  • Performance acima de aparência
  • Transparência total
  • Sem amarras contratuais
  • Tecnologia proprietária
  • Resultados mensuráveis
Marca pessoal

Klarck Lansing

O especialista. Fala em primeira pessoa — em conteúdo, calls e análises públicas.

"Klarck Lansing — Especialista em Conversão de E-commerce"
Marca de serviço

Agência LANSING

Quem entrega o serviço. Fala em terceira pessoa em proposta, site e contrato.

Klarck é o engenheiro. A LANSING é a empreiteira.
Retrato

O rosto da marca pessoal.

Klarck Lansing é a marca pessoal — e marca pessoal tem rosto. São duas fotos oficiais, uma para cada fundo do sistema: a escura em peça dark, a clara em peça light. Fora dessas duas, não é foto oficial.

Klarck Lansing — retrato escuro
Retrato — escuro
Fundo #0a0a0a · avatar, bio e capa em peça dark
avatar 40 · 56 · 72
Baixar WEBP
Klarck Lansing — retrato claro
Retrato — claro
Fundo claro · proposta, documento e peça light
avatar 40 · 56 · 72
Baixar WEBP
  • Retrato escuro em peça dark, retrato claro em peça light
  • Enquadramento original — corte quadrado ou círculo, centralizado no rosto
  • Usar como avatar nos canais oficiais da seção Presença
  • Foto sempre em cima do fundo, nunca atrás do texto
  • Filtro, preto e branco, duotone ou recorte de fundo
  • Retrato claro sobre fundo escuro (e vice-versa)
  • Selfie, foto de evento ou print como foto oficial
  • Logotipo por cima do rosto ou moldura ciano no avatar
Frase canônica

"Não adianta,
conversão é ciência."

Usada para fechar conteúdo e assinar textos da marca. Nunca alterada, nunca reescrita.

02 — Identidade verbal

Direto, técnico, confiante.

A LANSING fala direto — mostra o erro dos outros, depois mostra o que entrega. Prova com números, nunca com adjetivos vagos.

  • "Design exclusivo, performance real."
  • "Consultoria e tecnologia integradas."
  • "Sem amarras contratuais."
  • "O que 99% dos e-commerces no Brasil não têm."
  • "+60 funcionalidades nativas. Zero plugins pagos."
  • "Transforme sua jornada digital!" — fluff
  • "A melhor agência do Brasil 🚀" — superlativo + emoji
  • "Estamos empolgados em anunciar..." — corporativo
  • "Revolucionário", "incrível", "transformador"
  • "Nossa jornada de ecossistema"
Glossário
  • ✓ LANSING✕ Lansing / lansing
  • ✓ Protocolo de Conversão✕ protocolo
  • ✓ Mentoria de Conversão✕ mentoria
  • ✓ Engenharia de Conversão✕ engenharia
  • ✓ Agentes Autônomos de IA✕ agentes (genérico)
  • ✓ Arquitetura LANSING✕ stack lansing
Capitalização
  • Títulos: sentence case
  • Eyebrows: UPPERCASE + tracking largo
  • Botões: sentence case
  • Nome da marca: sempre LANSING
  • Números: sempre numerais — 16 agentes, 99%, +60
03 — Backgrounds

Base sólida. Ambiente é opt-in.

Sem foto, sem render, sem ilustração atrás do conteúdo. A base da LANSING é sempre uma cor chapada — #0a0a0a no escuro, #eeeeee no claro — e a página alterna as duas para dar ritmo. Por cima da base, um dos três ambientes da seção Background pode entrar como atmosfera da seção: discreto, opt-in e nunca atrás de dado.

Escuro
#0a0a0a
Claro
#eeeeee
  • Base em cor sólida — #0a0a0a no escuro, #eeeeee no claro
  • Alternar claro e escuro entre seções para dar ritmo à página
  • Ambiente animado como atmosfera da seção inteira, sempre opt-in
  • Contraste vem do conteúdo, não do fundo
  • Foto, render 3D ou ilustração como fundo
  • Ambiente atrás de tabela, gráfico ou bloco de dados
  • Textura dentro de card, modal ou botão
  • Dois ambientes diferentes competindo na mesma seção
Background

Três ambientes. Sempre opt-in.

A única textura que sobrou no site, depois de tirar grain e motivo de tudo o mais. Três ambientes animados, cada um em escuro e em claro — usar quando a seção ou a tela pedir atmosfera, nunca como padrão e nunca atrás de dado.

Escuros
Claros
05 — Cor

Dark-first. Ciano como único acento.

Se tudo é ciano, nada é ciano. O sistema é escuro por padrão e as seções claras entram por ritmo e por leitura de dado — nunca por decoração. Sem sombra colorida e sem neon; amarelo aparece somente em avisos.

Paleta principal — dark
Preto LANSING
--lansing-bg
Texto: fundo escuro
Branco puro
--lansing-fg
Texto: fundo claro
Ciano LANSING
--lansing-cyan
Texto: fundo escuro
Vermelho alerta
--error
Texto: fundo escuro
Estados semânticos
Verde sucesso
--success
Texto: fundo escuro
Âmbar aviso
--warning
Texto: fundo escuro
Vermelho erro
--error
Texto: fundo escuro
Paleta — light
Cinza claro
--lansing-bg-light
Texto: fundo claro
Grafite
--lansing-fg-light
Texto: fundo escuro
Ciano profundo
--lansing-cyan-on-light
4.97:1 ✓ AA
Texto: fundo escuro
Escala de neutros — dark
Fundo
ink-0
Texto: fundo escuro
Superfície
ink-1
Texto: fundo escuro
Superfície elevada
ink-2
Texto: fundo escuro
Superfície ativa
ink-3
Texto: fundo escuro
Linha
line
Texto: fundo escuro
Linha forte
line-strong
Texto: fundo escuro
Escala do ciano — dark
Ciano pressionado
cyan-600
Texto: fundo escuro
Ciano base
cyan-500
Texto: fundo escuro
Ciano hover
cyan-400
Texto: fundo escuro
06 — Tipografia

Ruda lidera. Figtree suporta.

Display · Headings
Ruda
Pesos 400–900 · Statements, títulos, números grandes
Conversão é ciência.
16 Agentes Autônomos de IA
+60 funcionalidades nativas
Body · UI
Figtree
Pesos 300–700 · Parágrafos, labels, botões, navegação

Tráfego traz pessoas. Quem vende é o site. Escalar tráfego em loja ruim é o erro mais caro do e-commerce.

TokenTamanhoFamília / PesoUso
--type-display-196pxRuda Black (900)Statements de hero
--type-display-272pxRuda Black (900)Display secundário
--type-h156pxRuda ExtraBold (800)H1
--type-h240pxRuda Bold (700)H2
--type-h332pxRuda Bold (700)H3
--type-h424pxRuda SemiBold (600)H4 / botões grandes
--type-eyebrow12pxFigtree SemiBold (600) UPPERLabels
--type-body-lg18pxFigtree Regular (400)Parágrafos de destaque
--type-body16pxFigtree Regular (400)Corpo padrão
--type-body-sm14pxFigtree Regular (400)Texto pequeno
--type-caption12pxFigtree Medium (500)Caption / meta
07 — Componentes

Cantos chanfrados. Borda hairline. Painel técnico.

Cards e módulos da LANSING têm um visual técnico só da marca: cantos levemente arredondados e recortes diagonais sutis. Estrutural, não decorativo.

Botões
Cards de auditoria
Fricção
–42%

Checkout em 5 etapas. Abandono crítico entre frete e pagamento.

Observação
1.2%

Taxa de conversão atual. Média do mercado: 2,4%.

Oportunidade
+2.1×

Receita projetada com a Arquitetura LANSING no funil.

Badges
CROAVISONEUTROALERTA
Input
Toast · liquid glass
Auditoria concluída
12 fricções encontradas no funil.
Controles
Dropdown
Toggle
Slider
Meta de conversão68%
Orçamento de mídia35%
Color picker
Matiz
182°
Saturação
73%
Luminância
63%
Ciano LANSING

Clique na amostra para abrir matiz, saturação e luminância. Hex editável e conta-gotas de tela. Cor fora da seção 05 é sinalizada.

Calendário
Março 2026
D
S
T
Q
Q
S
S
Telas de sistema

Carregamento e erro também são marca. Clique para abrir a tela inteira.

08 — Dashboard

Gráficos que provam o número.

Dashboard da LANSING é sempre em fundo claro — dado se lê melhor com tinta escura sobre claro. A marca tem um acento só, então nada de paleta colorida: a escala é o próprio ciano, do mais forte ao mais fraco, com um neutro para o resto. Todo dado carrega rótulo — a cor nunca é a única forma de ler o gráfico.

Receita
R$ 134k
+18% vs. mês anterior
Conversão
3,4%
+0,5 p.p.
Ticket médio
R$ 269
+4,2%
Taxa de conversão
12 meses · passe o mouse para ler o ponto
0%1%2%3%4%JFMAMJJASOND3,4%
Origem do tráfego
participação no total · legenda + valor
Busca orgânica: 38%Tráfego pago: 27%Direto: 21%Outros: 14%84ksessões / mês
  • Busca orgânica38%
  • Tráfego pago27%
  • Direto21%
  • Outros14%
Receita por canal
últimos 30 dias · R$ mil
42Orgânico31Pago24E-mail18Social12Direto7Refer.
Funil vertical
hover mostra a passagem entre etapas
Sessões84.000
Produto visto41.160
Carrinho15.960
Checkout7.560
Pedido pago2.856
Funil horizontal
hover mostra a passagem entre etapas
  • Sessões84.000100%
  • Produto visto41.16049%
  • Carrinho15.96019%
  • Checkout7.5609%
  • Pedido pago2.8563,4%
  • Escala sequencial de ciano, sempre do mais forte ao mais fraco
  • Rótulo direto em toda série — cor nunca é a única leitura
  • Traço de 2px na linha, ponta arredondada de 4px na barra
  • Grade e eixos recessivos, sempre atrás do dado
  • Um eixo por gráfico. Duas medidas, dois gráficos
  • Paleta categórica multicolorida ou arco-íris
  • Eixo duplo com duas escalas no mesmo gráfico
  • Gráfico 3D, sombra, brilho ou pizza explodida
  • Número em cima de todos os pontos da linha
  • Vermelho e verde como séries — são estado, não identidade
09 — Sistema

Motion e espaçamento.

Motion
  • --dur-fast120ms
  • --dur-base200ms
  • --dur-slow400ms
  • Sem bounces. Sem wobbles. Sem parallax. Fades sobre slides.
Espaçamento (4pt)
  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 80px

Toda medida é múltipla de 4. Não existe 5px, 13px ou 30px no sistema.

Radii
  • --radius-sm6px
  • --radius-md (default)10px
  • --radius-lg16px
  • --radius-xl24px
  • --radius-pill999px
Iconografia

Lineares e técnicos, sem espessura variável. Sem emoji, sem símbolos decorativos. Padrão: 20px na navegação, 24px nos botões.

Ciano para ação e tecnologia. Vermelho só para erro e alerta.

10 — Textura

Ambiente, não acabamento.

Nenhuma superfície leva grain, meio-tom ou ruído por cima: card, modal, botão e tabela são sempre cor sólida. Textura na LANSING existe só como ambiente de seção — um dos três da seção Background, no fundo inteiro, sempre discreto e sempre opt-in.

  • Superfície — card, modal, botão — sempre em cor sólida
  • Se a seção pedir atmosfera, usar um dos 3 ambientes da seção Background
  • Um ambiente por seção, sempre atrás do conteúdo
  • Grain, ruído ou meio-tom dentro de card, modal ou botão
  • Ambiente atrás de tabela, gráfico ou bloco de dados
  • Dois ambientes competindo na mesma tela
11 — Iconografia

Lineares, técnicos, monoline.

A LANSING usa os ícones da Lucide (também disponível no Flaticon) — traço uniforme, formas limpas, sem enfeites. Nunca use emoji, símbolos decorativos, ícones preenchidos ou ilustrações coloridas.

Família

Ícones Lucide — contorno simples.

Traço de 1.75–2px. Cantos retos. Sem preenchimento. Catalogado no Flaticon.

Tamanhos
  • 16px — inline em texto
  • 20px — nav e labels (default)
  • 24px — botões e CTAs
  • 32–48px — cards e features
Cores
  • Ciano — ação, inteligência, tecnologia
  • Branco — neutro, conteúdo padrão
  • Vermelho — erro, alerta, perda
  • White/52 — ícone secundário
Zap
velocidade
Bot
agentes IA
Gauge
performance
LineChart
métricas
Cpu
arquitetura
Workflow
automação
Layers
stack
Target
conversão
ShieldCheck
segurança
Sparkles
destaque
ArrowUpRight
CTA / link
Globe
site / web
Search
busca
MousePointerClick
clique
ShoppingCart
carrinho
CreditCard
checkout
PackageCheck
pedido
Truck
entrega
Database
dados
BarChart3
analytics
Activity
status
BrainCircuit
IA técnica
Settings2
configuração
LockKeyhole
acesso
  • Lucide outline, stroke uniforme
  • Alinhar ao baseline do texto
  • Usar ciano apenas para indicar ação ou destaque
  • Manter ícone monocromático
  • Emoji 🚀 ✨ 🔥 em qualquer contexto institucional
  • Ícones 3D, gradiente, glassmorphism ou skeumórficos
  • Misturar famílias (Lucide + Material + Font Awesome)
  • Ícones preenchidos com cor de marca
12 — Movimento

Discreto, técnico, intencional.

A LANSING não anima para entreter — anima para guiar o olhar e mostrar precisão. Durações curtas (180–400ms), sempre o mesmo easing técnico, movimentos pequenos (≤ 12px). Sem bounce, sem elástico, sem giro.

Fade up · 300ms
LANSING

Entrada padrão de blocos e títulos ao rolar a página. Discreta.

Scale in · 200ms
Auditar conversão

Botões e badges que aparecem depois de uma ação.

Hover scale · 200ms
Passe o mouse

Efeito de toque para cards e botões. Sempre ≤ 1.05.

Underline reveal
Ler estudo de caso

Links dentro de texto. O sublinhado aparece da esquerda para a direita ao passar o mouse.

Pulse técnico · 2s
Sistema ativo

Status em tempo real, indicadores de agente IA, monitoramento.

Slide-in lateral
Notificação técnica

Avisos e painéis laterais. Só no eixo X.

Movimento contínuo

Animações em loop para indicar fluxo, processamento ou atividade. Sempre lineares ou com easing técnico, sem bounce.

Ticker · 24s
ARQUITETURA LANSING +60 FUNCIONALIDADES NATIVAS 16 AGENTES AUTÔNOMOS PROTOCOLO DE CONVERSÃO SEM PLUGINS PAGOS
ARQUITETURA LANSING +60 FUNCIONALIDADES NATIVAS 16 AGENTES AUTÔNOMOS PROTOCOLO DE CONVERSÃO SEM PLUGINS PAGOS

Faixa de tecnologias e diferenciais. Usada em topo de página, rodapé e cards.

Scan line · 2.4s
LOADING...

Indica análise, auditoria ou varredura de dados.

Pulse ripple · 2s

Status de sistema ativo, agente rodando ou sincronização.

Shimmer · 1.6s
LANSING

Carregando a marca. Efeito skeleton com shimmer.

Float sutil · 3s
AO VIVO

Indicadores de live, gravação ou monitoramento contínuo.

Counter-up · 1.2s
0 agentes

Métricas e números de destaque no topo da página e em cards.

Cursor blink · 1s
$ conversão --auditar

Terminais, blocos de código e processamento ao vivo.

  • Transições curtas, easing ease-out técnico
  • Aparecer discreto ao rolar (fade + 8–12px de deslocamento)
  • Hover states com mudança de cor/borda em 150–200ms
  • Indicadores de status com pulse lento
  • Contadores numéricos animados (counter-up) em métricas
  • Cursor blink em terminais e blocos de código
  • Bounce, elastic, spring exagerado
  • Parallax pesado, scroll hijacking
  • Carrosséis com autoplay rápido
  • Confetti, partículas, glitter
  • Loaders coloridos / spinners decorativos
  • Texto digitando letra a letra em copy institucional
  • Rotações 360°, flips, cubos 3D
13 — Presença

Links oficiais.

Canais oficiais da marca. Fora desta lista não é LANSING, mesmo usando o nome. Atualize sempre que um canal mudar.

Site oficial
klarck.com.br
Instagram
@klarck.lansing
TikTok
@klarck.lansing
YouTube
@klarck.lansing
LinkedIn
in/klarck-lansing
WhatsApp comercial
47 99216-8171
14 — Resumo

Do / Don't.

  • LANSING sempre em maiúsculo
  • Base sólida — #0a0a0a no escuro, #eeeeee no claro
  • Tipografia branca sobre fundo escuro, grafite sobre fundo claro
  • Ciano #5ce1e6 como único acento em dark
  • Border-radius 10px como padrão
  • Cantos chanfrados sutis em cards
  • Espaçamento generoso
  • Contraste mínimo 4.5:1
  • Numerais — 16 agentes, 99%
  • Substantivos sobre adjetivos
  • Lansing ou lansing em qualquer contexto
  • Textura dentro de card, modal ou botão
  • Alterar proporções ou cores do logotipo
  • Ciano #5ce1e6 como texto em contexto light
  • Introduzir novas cores sem atualizar o sistema
  • Sombras coloridas / neon glow
  • Gradientes chamativos ou âmbar
  • Stock photos, renders 3D, ilustrações gradiente
  • Emoji, exclamação, superlativos
  • Logotipo e favicon juntos no mesmo lugar
15 — Documentos

Referências da marca.

Os documentos por trás deste guia: identidade, posicionamento, personas, produto e conteúdo. A fonte de verdade da marca.

Branding e Identidade Verbal

O guia completo da marca: essência, voz, logo, cor, tipografia e ícones.

Esteira de Produtos

Os produtos da LANSING: Protocolo, Mentoria, Engenharia de Conversão, os 16 Agentes Autônomos de IA e as +60 funções nativas.

Manifesto

Por que a LANSING existe — e o que ela nunca vai ser.

Personas

Quem a LANSING atende: seller de marketplace, dono de e-commerce frustrado, loja física, gestor de tráfego — e quem não é cliente.

Posicionamento

Quem é Klarck Lansing, contra o que ele se posiciona e para quem este trabalho é (e não é).

Produção de Conteúdo

Como a marca cria conteúdo: pilares, formatos, ganchos e frequência de publicação.