O rigor aparece no detalhe.

Engenharia Tática de Alta Precisão + Editorial Suíço Assimétrico.

Doze colunas para hierarquia; quatro pixels para ritmo. Contornos, coordenadas e cantoneiras pertencem à composição. Controles mantêm limites funcionais mais fortes que a grelha.

[XQ // A1-H8]Composição / 08 + 04

Feito para vender.

A Chesslab é uma aceleradora de e-commerce: a gente desenvolve o site, acelera as vendas e faz quem já comprou voltar.

Ver a composição Chesslab
Display / entrelinha
0,96
Tracking
−0,04 em
Rótulo / tracking
0,12 em
Módulo de ritmo
04 px

A grelha fica à vista.

A leitura ocupa oito colunas; o contexto, quatro. Os marcadores SVG assinalam encontros reais. No celular, a sequência acompanha a ordem do documento.

A1—H8 / Campo principal

O conteúdo define o espaço.

Aceleração de e-commerce, desenvolvimento de site e CRM.

I1—L8 / Contexto

Quatro colunas para apoio; oito para a ideia principal.

<div class="xq-grelha xq-grelha--linhas">
  <div class="xq-grelha__principal">Conteúdo</div>
  <aside class="xq-grelha__contexto">Contexto</aside>
</div>

Textura que pertence ao material.

Papel mineral
Plano editorial. Ruído fino e leitura contínua.
Metal escovado
Reflexo de topo. Limite e precisão de controle.
Plano rebaixado
Sombra interna. Contexto e informação de apoio.

Ruído fractal em SVG inline, isolado atrás do conteúdo. Os textos mantêm opacidade total. A textura desaparece em alto contraste e na impressão.

Geometria precisa. Ação legível.

O corte pertence à borda.

Dois planos definem o chanfro. O conteúdo tem seu próprio espaço, independente da espessura do contorno.

Explorar os controles

Foco cirúrgico.

Use Tab. Um anel separa o controle do fundo; outro define o alvo. O chanfro abre durante o foco para preservar o contorno.

Conferir os temas

Integrar a assinatura.

<section class="xq-moldura xq-superficie-tatil">
  <svg class="xq-superficie-tatil__ruido" viewBox="0 0 128 128"
       aria-hidden="true" focusable="false">
    <use href="#xq-textura-precisao"/>
  </svg>
  <svg class="xq-cantoneira xq-cantoneira--no"
       viewBox="0 0 24 24" aria-hidden="true">
    <use href="#xq-cantoneira-no"/>
  </svg>
  <header class="xq-metadados"><span>[XQ // A1-H8]</span></header>
  <h2 class="xq-display">Feito para vender.</h2>
</section>

Inserir o sprite inline uma vez por documento. O ruído também possui fallback CSS autocontido; nenhum recurso remoto é necessário.