Pular para o conteúdo
Xeque

Mídia e conteúdo

O conteúdo determina a forma.

Imagem com contexto

Cavalo de xadrez sobre tabuleiro de madeira, com iluminação lateral quente
Chesslab · Estratégia em perspectivaAcervo visual da homepage

Arquivo original: homepage/site/src/assets/abertura/outro-jogo.webp. Imagem existente da marca; sem geração nova ou crédito inventado.

Leitura editorial

Chesslab
Aceleração de e-commerce
Método & operação

Tráfego sem método vira custo.

Na aceleração, cada marca tem um squad dedicado: head de marketing, gestor de tráfego e time criativo, com editores de vídeo e de imagem próprios. Ele planeja, produz e otimiza as campanhas.

Todos os clientes têm uma área onde tudo fica registrado: metas, concorrentes, relatórios, feedbacks, atas, sazonais, influenciadores e manual de anúncios.

O custo de aquisição é acompanhado de perto, não só o faturamento. Feedbacks e reuniões semanais e quinzenais. O que entregamos é medido num sistema próprio.

Conhecer a aceleração

Citação institucional

A gente não acredita em tema pronto. Nem em “colocar no ar” só por colocar. Acreditamos em e-commerces com alma. Em experiências de compra que fazem o cliente voltar.
ChesslabManifesto · Desenvolvimento Shopify

Manifesto reproduzido da landing Shopify local. Atribuição institucional; não representa depoimento de cliente.

Vídeo nativo, contexto preservado

HeyMu · Demonstração da vitrine3 segundos · Sem áudio
Descrição e alternativa ao vídeo

Panorâmica vertical de uma captura real da loja HeyMu, presente no portfólio de desenvolvimento da Chesslab. O vídeo não contém fala nem áudio. A imagem mostra a identidade da loja, sua navegação e a apresentação dos produtos.

Abrir a captura original da HeyMu

Vídeo gerado localmente a partir da captura existente, em Chromium na VM, sem dados externos. Reprodução somente por ação do visitante; sem autoplay.

Projeto & legenda

Captura da loja Ogranulado, projeto Shopify presente no portfólio Chesslab
Ogranulado · Loja ShopifyVer o desenvolvimento

Projeto selecionado na fonte chesslab-shopify/site/src/portfolio.config.js. Não atribuir métricas de venda à captura.

[XQ // E5 — 64Hz] PRANCHA TÉCNICA / 06 CONTRATOS

A imagem responde ao contexto.

Uma imagem de marca é um documento visual: origem, descrição e legenda preservam seu sentido. A composição editorial contrapõe o plano amplo da mídia à precisão dos metadados, sem transformar captura de portfólio em promessa de resultado.

01 / 06

Anatomia de uma figura editorial

A mídia ocupa o plano principal; legenda e procedência seguem o mesmo alinhamento. O diagrama representa a estrutura da figura e não substitui a imagem existente no acervo.

Anatomia de uma figura editorialEsquema com seis chamadas. A lista numerada a seguir descreve cada ponto.[XQ // E5] FIGURE / ACERVOMÍDIA DO ACERVOalt: Cavalo sobre tabuleiro de madeiraChesslab · TabuleiroHomepageFonte: acervo local · descrição objetiva · 1600 × 1000010203040506
Seis chamadas de anatomia: Anatomia de uma figura editorial. Leia os contratos correspondentes abaixo.

  1. Enquadramento estável

    width e height reservam a proporção antes do download. O componente aplica 16:10 e object-fit: cover; verificar se o recorte conserva a informação relevante.

  2. Limite da mídia

    A hairline funcional separa imagem e legenda. A textura pertence ao suporte; nunca deve reduzir a legibilidade da imagem ou do texto.

  3. Descrição objetiva

    alt descreve o que a imagem comunica. “Imagem bonita” ou uma cópia da legenda não ajuda a compreender um tabuleiro, uma loja ou um projeto.

  4. Legenda contextual

    figcaption identifica a marca, o projeto ou a situação representada. Manter o conteúdo junto da imagem quando a figura muda de coluna.

  5. Metadados técnicos

    Origem e identificação usam mono com números tabulares. São dados de procedência, não um selo de performance ou uma promessa de resultado.

  6. Fonte rastreável

    A fonte informa o arquivo e o contexto local. Captura de portfólio comprova a presença da peça no acervo; não comprova faturamento ou conversão.

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 imagem responde ao contexto
Token / expressão Aplicação CSS Regra
--xq-linha-forte rgb(97 115 104) .xq-midia border-color O limite de 1 px continua visível em cada tema. Não usar a linha suave como único contorno funcional.
--xq-superficie-alt rgb(252 252 247) .xq-midia background Suporte opaco da mídia e de seu carregamento. Não derivar a legibilidade de uma área clara da foto.
--xq-ritmo-3 12px .xq-midia figcaption gap 12 px entre as informações da legenda quando quebram de linha.
--xq-ritmo-4 16px .xq-midia figcaption padding 16 px para separar texto e borda; evitar metadados colados à imagem.
--xq-texto-suave rgb(70 89 79) .xq-midia figcaption color Tinta secundária semântica; a cor muda com o tema para preservar a leitura.
--xq-mono 'Xeque Mono', monospace .xq-midia figcaption font-family A legenda técnica usa Xeque Mono e números tabulares; o corpo editorial permanece sans.
--xq-legenda 12px .xq-midia figcaption font-size 12 px no dado técnico. Não reduzir a procedência para acomodar uma linha única.
--xq-ritmo-6 40px .xq-editorial gap 40 px entre os metadados e a leitura. As colunas se empilham quando a largura deixa de suportá-las.
--xq-entrelinha-titulo 0.96 .xq-editorial__texto h2 line-height 0,96 no título editorial. Não aplicar a entrelinha compacta ao parágrafo.
--xq-tracking -0.04em .xq-editorial__texto h2 letter-spacing −0,04 em no título. Preservar o texto e permitir a quebra natural da composição.
--xq-controle 44px .xq-video-fallback summary min-height 44 px de altura mínima na alternativa nativa ao vídeo. O alvo mantém foco e operação por teclado.
--xq-anel rgb(36 71 53) .xq-video:focus-visible outline-color Anel semântico no controle de mídia. O usuário decide quando iniciar e interromper.
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)
Cavalo de xadrez sobre tabuleiro de madeira com iluminação lateral
Chesslab · Estratégia em perspectivaAcervo da homepage

A imagem mantém origem e contexto; não há métrica comercial atribuída à imagem.

  • Imagem real do acervo, com dimensão reservada e descrição objetiva.
  • Legenda situa a figura sem repetir integralmente o texto alternativo.
  • Procedência descreve o que existe; não atribui métricas à fotografia.
Uso Incorreto (Genérico)
Imagem premium
Foto decorativa sem legenda

Resultados incríveis.

Imagem genérica apresentada como prova. Origem, contexto e autoria ausentes.

  • O adjetivo “premium” substitui uma identificação útil da imagem.
  • A ausência de proporção definida deixa o texto sujeito a saltos de layout.
  • A fotografia vira uma prova comercial sem fonte ou relação verificável.
04 / 06

Ler os estados de uma publicação

A edição mantém o mesmo contexto enquanto alterna preparação, processamento, revisão, erro e ausência. Troque densidade e tema: metadados e parágrafos devem continuar reconhecíveis sem se tornarem uma massa única.

Variantes de estado e composição
[XQ // E5] PRONTO
Chesslab
Aceleração de e-commerce
01 / 03
Leitura local

Tráfego sem método vira custo.

A operação combina planejamento, criativos, acompanhamento e registros.

Conteúdo preparado para revisão de título, legenda e procedência.

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-linha-forte
rgb(97 115 104)
--xq-superficie-alt
rgb(252 252 247)
--xq-ritmo-3
12px
--xq-ritmo-4
16px
--xq-texto-suave
rgb(70 89 79)
--xq-mono
'Xeque Mono', monospace
--xq-legenda
12px
--xq-ritmo-6
40px
--xq-entrelinha-titulo
0.96
--xq-tracking
-0.04em
--xq-controle
44px
--xq-anel
rgb(36 71 53)
05 / 06

Aplicar o contrato

Reservar a imagem e levar a fonte junto

A figura mantém a relação entre mídia e legenda; width e height descrevem o recurso original. No Xeque, .xq-midia img usa recorte 16:10: conferir object-fit: cover com a imagem real. A fonte vem depois da figura, em texto selecionável; não entra dentro do alt.

<figure class="xq-midia">
  <img src="../assets/media/tabuleiro-chesslab.webp" alt="Cavalo sobre tabuleiro de madeira"
    width="1600" height="1000" loading="lazy">
  <figcaption>Chesslab · Acervo da homepage</figcaption>
</figure>

Vídeo por escolha do visitante

Preservar controls, playsinline, poster e uma alternativa descritiva. A demonstração existente não possui áudio; não inventar transcrição de fala ausente.

<video class="xq-video" controls playsinline preload="metadata"
  poster="../assets/media/loja-heymu.webp"
  aria-label="Demonstração da vitrine HeyMu, sem áudio">
  <source src="../assets/media/vitrine.webm" type="video/webm">
  <p>Demonstração visual da loja HeyMu, disponível na captura original.</p>
</video>
<a href="../assets/media/loja-heymu.webp">Abrir a captura original</a>

Separar descrição, contexto e procedência

O alt descreve a informação visual. figcaption identifica a peça; o parágrafo seguinte documenta o arquivo de origem. Cada camada responde a uma pergunta diferente, preservando leitura útil quando a imagem não carrega.

<figure class="xq-midia">
  <img src="../assets/media/tabuleiro-chesslab.webp"
    width="1600" height="1000" loading="lazy"
    alt="Cavalo de xadrez sobre tabuleiro de madeira, com iluminação lateral quente">
  <figcaption>
    <span>Chesslab · Estratégia em perspectiva</span>
    <span>Acervo visual da homepage</span>
  </figcaption>
</figure>
<p class="xq-fonte">
  Arquivo original: homepage/site/src/assets/abertura/outro-jogo.webp.
</p>
06 / 06

Critérios de aceite

  • Inspecionar recorte da imagem em 390 px sem perder informação essencial.
  • Carregar com imagens bloqueadas: o alt mantém descrição útil, sem repetir a legenda.
  • Iniciar e pausar vídeo pelo teclado; o autoplay permanece ausente.
  • Conferir que nomes de projetos e fontes correspondem aos arquivos existentes.
  • Distinguir alt, figcaption e fonte: descrição visual, identificação editorial e procedência não devem repetir o mesmo texto.