Chesslab — feito para vender / Xeque

Feito
para
vender.

A gente desenvolve o site, acelera as vendas
e faz quem já comprou voltar.

Seu e-commerce importa.
Nós estamos aqui para provar isso.

Matriz de atuação · Da entrada ao aprendizado
Frente	Ponto de partida	Na execução	De volta à operação
A / 01 Aceleração	Metas, custos e margem	Tráfego, criativo e CRO	Feedback semanal e relatório mensal
D / 02 Desenvolvimento	Marca e experiência de compra	Design no Figma e Shopify	Loja em diferentes dispositivos
R / 03 CRM	Relacionamento com a base	E-mail, cashback e comercial	Fidelização e recompra
C / 04 Criação e conteúdo	Objetivo, pauta e conceito	Copy, roteiro e briefing	Publicar, medir e aprender

Matriz de atuação · Da entrada ao aprendizado

Frente

Ponto de partida

Na execução

De volta à operação

A / 01 Aceleração

Metas, custos e margem

Tráfego, criativo e CRO

Feedback semanal e relatório mensal

D / 02 Desenvolvimento

Marca e experiência de compra

Design no Figma e Shopify

Loja em diferentes dispositivos

R / 03 CRM

Relacionamento com a base

E-mail, cashback e comercial

Fidelização e recompra

C / 04 Criação e conteúdo

Objetivo, pauta e conceito

Copy, roteiro e briefing

Publicar, medir e aprender

[XQ // A1–H8 — 64Hz] PRANCHA TÉCNICA / 06 CONTRATOS

A composição torna o sistema visível.

O espécime reúne conteúdo editorial, trabalhos, depoimentos e instrumentos locais numa página comercial. Este apêndice documenta sua construção sem converter a simulação em resultado ou serviço conectado.

01 / 06

Editorial na leitura. Engenharia na prova.

A estrutura mantém uma coluna de leitura clara e um plano de demonstração assimétrico. Linhas, metadados, cantoneiras e fontes numéricas conectam o discurso ao instrumento, sem disputar a navegação.

Seis chamadas de anatomia: Editorial na leitura. Engenharia na prova.. Leia os contratos correspondentes abaixo.

Sinal técnico discreto

Metadados monoespaçados e coordenadas situam a composição. A faixa técnica é apoio à leitura; não deve ocupar a posição do título comercial.
Navegação com destino

Serviços, trabalhos e contato seguem a ordem da página. O menu móvel é navegação expansível, sem contenção modal: Escape fecha e devolve foco ao gatilho; escolher uma âncora transfere foco à seção de destino.
Contraste editorial

Schibsted Grotesk organiza título e texto. O título usa entrelinha 0,96 e tracking −0,04em; a descrição preserva largura de leitura e entrelinha próprias.
Plano de demonstração

Agente, Shopify, squads e dados expõem operações locais. A superfície tátil e as cantoneiras tornam o instrumento reconhecível sem atribuir conexão a APIs externas.
Uma ação identificável

A ação primária tem nome concreto, limite visível e foco. Contato preparado localmente não pode ser apresentado como mensagem enviada.
Origem consultável

Resultados e relatos precisam de suas fontes. A composição mantém dados sintéticos identificados e não inventa cliente, métricas comerciais ou depoimento.

02 / 06

Contratos de tokens CSS

Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.

Contrato de A composição torna o sistema visível
Token / expressão	Aplicação CSS	Regra
`--xq-font` 'Schibsted Grotesk', Arial, sans-serif	`.estudo-xq-site` font-family	Schibsted Grotesk como voz editorial; manter o mesmo arquivo de fonte usado pelo sistema.
`--xq-mono` 'Xeque Mono', monospace	`.estudo-xq-mono` font-family	Metadados e coordenadas em Xeque Mono com números tabulares, sem aplicar mono ao texto comercial.
`--xq-linha` rgb(198 205 194)	`.estudo-xq-pagina` border-inline-color	Limite de página em 1px; manter a moldura dentro da largura disponível.
`--xq-texto-suave` rgb(70 89 79)	`.estudo-xq-telemetria` color	Faixa técnica com cor secundária legível no plano da marca.
`--xq-realce` rgb(36 71 53)	`.estudo-xq-botao` background, border-color	Ação primária usa realce do sistema e sobre-realce correspondente, sem cor avulsa.
`--xq-sobre-realce` rgb(247 248 242)	`.estudo-xq-botao` color	Par de texto da ação principal; nunca herdar a cor do parágrafo sobre o fundo preenchido.
`--xq-surface-specular` rgb(255 255 255 / 80%)	`.estudo-xq-botao` box-shadow	inset 0 1px 0 caracteriza a superfície; não substitui o limite nem o foco.
`--xq-linha-forte` rgb(97 115 104)	`.estudo-xq-botao--secundario` border-color	Ação secundária mantém fundo transparente e borda funcional em 1px.
`--xq-focus-outer` var(--xq-anel)	`.estudo-xq-site :is(a, button, input, textarea, select, summary):focus-visible` outline-color	Foco externo de 2px, independente da decoração técnica.
`--xq-focus-inner` var(--xq-fundo)	`.estudo-xq-site :is(a, button, input, textarea, select, summary):focus-visible` box-shadow	Separador interno de 3px preserva a leitura do foco nos planos do espécime.
`--xq-fundo` rgb(244 243 237)	`.estudo-xq-matriz` scrollbar-color	Plano de rolagem local da matriz; o conteúdo permanece dentro da composição.
`--xq-superficie` rgb(231 231 222)	`.estudo-xq-botao--secundario:hover` background	Resposta de hover no plano do tema, com texto e borda preservados.

03 / 06

Uso correto × uso incorreto

Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.

Uso Correto (Xeque)

CHESSLAB / COMPOSIÇÃO LOCALA1–H8

Seu próximo movimento.

Desenvolvimento, aceleração e CRM numa composição editorial.

Consultar a integração

Demonstrações locais. Dados sintéticos identificados junto aos instrumentos.

Título editorial e metadados têm funções distintas.
A ação abre uma referência existente e nomeia seu destino.
A descrição distingue conteúdo e demonstração local.

Uso Incorreto (Genérico)

Transformação digital de ponta

A melhor solução para tudo

+999% de resultados extraordinários

Saiba mais

Clientes incríveis adoram!

Superlativos e números substituem evidência.
Chamada vaga não informa o próximo passo.
Pílula sem semântica apenas imita uma ação.

04 / 06

Ensaiar uma composição de página.

Os estados simulam o painel editorial deste apêndice, sem modificar formulários ou instrumentos do espécime. Alterar tema revela os pares de cor; Repetir reinicia apenas a entrada do ensaio.

Estado Tema da amostra Respiro 24 px Texto extenso

[XQ // A1–H8] PRONTO

COMPOSIÇÃO / ENSAIO EDITORIAL06

A forma acompanha o movimento.

Instrumento local

Composição pronta para leitura. Seis contratos conectam editorial e demonstração.

Este ensaio não envia contato nem executa integrações externas.

Consultar o papel dos instrumentos

O agente demonstra conversa local; Shopify mostra estados de checkout; squads explora alocação; a telemetria apresenta séries sintéticas conferíveis.

Pronto. Altere um controle para inspecionar o contrato.

Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.

Inspecionar tokens resolvidos

--xq-font: 'Schibsted Grotesk', Arial, sans-serif
--xq-mono: 'Xeque Mono', monospace
--xq-linha: rgb(198 205 194)
--xq-texto-suave: rgb(70 89 79)
--xq-realce: rgb(36 71 53)
--xq-sobre-realce: rgb(247 248 242)
--xq-surface-specular: rgb(255 255 255 / 80%)
--xq-linha-forte: rgb(97 115 104)
--xq-focus-outer: var(--xq-anel)
--xq-focus-inner: var(--xq-fundo)
--xq-fundo: rgb(244 243 237)
--xq-superficie: rgb(231 231 222)

05 / 06

Aplicar o contrato

Separar composição e componente

O prefixo estudo-xq- pertence ao espécime. Para outra página, compor as primitivas xq- com uma classe local; não transformar a página comercial em dependência do componente.

<section class="xq-section" data-tema="claro">
  <div class="xq-container xq-stack">
    <h2 class="xq-titulo">Seu próximo movimento.</h2>
    <p class="xq-lead">Desenvolvimento, aceleração e CRM.</p>
  </div>
</section>

Reiniciar com estado oculto estável

O estado .is-resetting desativa a transição. Reflow fixa a origem; o quadro seguinte remove o reset e restaura is-visible. Cancelar quadros anteriores evita disputa entre cliques rápidos; movimento reduzido mantém o painel visível.

let quadro = 0;
function repetir(painel) {
  cancelAnimationFrame(quadro);
  if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
    painel.classList.remove("is-resetting");
    painel.classList.add("is-visible");
    return;
  }
  painel.classList.add("is-resetting");
  painel.classList.remove("is-visible");
  void painel.offsetWidth;
  quadro = requestAnimationFrame(() => {
    painel.classList.remove("is-resetting");
    painel.classList.add("is-visible");
  });
}

06 / 06

Critérios de aceite

Comparar 1440px e 390px: assimetria vira sequência legível, sem alterar a ordem de serviço, prova e contato.
Conferir menu por teclado, Escape e retorno de foco; rótulos devem manter destinos existentes.
Inspecionar texto e fontes das demonstrações; não confundir dado sintético, contato preparado e operação concluída.
Desligar JS e reduzir movimento: conteúdo editorial, relatos e referências continuam disponíveis; apenas operações locais dependem dos módulos.
Repetir rapidamente a animação e trocar estado durante a entrada: conservar a última seleção, o foco e o painel visível ao final.

Feitoparavender.

Laboratório de crescimento

Quanto custa conquistarum cliente?

Toda campanha temum próximo movimento.

O mês seguintecomeça nos dados.

O trabalho aparece.Todos os dias.

Aceleraçãode e-commerce.

Na operação

Desenvolvimentode site.

No projeto

CRM.Relacionamento.

No relacionamento

Cada loja,um universo.

AZ Moda Fitness

O2 Arts

Rebeca Duarte

Andressa Kids

Felicittá

FromVix

Guariroba

Casa Tavolo

Le Bloom

HeyMu

Ogranulado

Cantu Decor

FromVix

Um squad dedicadoà sua operação.

Design e tecnologiana mesma conversa.

A primeira compraabre uma relação.

Estratégia antesdo post.

Onde seu repertórioencontra o nosso?

Seu próximo movimento

Conte onde a loja está.A gente conversa sobreo próximo passo.

Vamos conversar.

Revise no seu e-maile envie quando quiser.

Antes da conversa.

Sinal técnico discreto

Navegação com destino

Contraste editorial

Plano de demonstração

Uma ação identificável

Origem consultável

Seu próximo movimento.

A forma acompanha o movimento.

Separar composição e componente

Reiniciar com estado oculto estável

Feito
para
vender.

Quanto custa conquistar
um cliente?

Toda campanha tem
um próximo movimento.

O mês seguinte
começa nos dados.

O trabalho aparece.
Todos os dias.

Aceleração
de e-commerce.

Desenvolvimento
de site.

CRM.
Relacionamento.

Cada loja,
um universo.

Um squad dedicado
à sua operação.

Design e tecnologia
na mesma conversa.

A primeira compra
abre uma relação.

Estratégia antes
do post.

Onde seu repertório
encontra o nosso?

Conte onde a loja está.
A gente conversa sobre
o próximo passo.

Revise no seu e-mail
e envie quando quiser.