Xeque: o instrumento antes da composição.
A entrada do guia reúne os quatro contratos que atravessam o sistema: estrutura, material, voz e comportamento. A marca Chesslab permanece; a composição ganha coordenadas, hierarquia assimétrica e limites funcionais explícitos.
Uma abertura em seis camadas.
O desenho separa a mensagem editorial do campo de referência. Cada chamada identifica uma peça verificável da abertura; os números não representam etapas de um fluxo.
-
Moldura e cantoneiras
A moldura estabelece o campo. As quatro cantoneiras assinalam seus extremos; não se transformam em quatro ações nem recebem foco.
-
Coordenada e índice
A coordenada identifica a região. O índice informa a posição dentro de um conjunto declarado. Ambos usam a mono e números tabulares.
-
Display editorial
Schibsted Grotesk, peso 700, tracking −0,04 em e entrelinha 0,96. O título concentra a presença; o texto de apoio recupera uma medida confortável.
-
Campo de referência
A grelha mostra uma relação espacial concreta. A retícula marca um encontro; não deve ser confundida com seleção, botão ou indicador de disponibilidade.
-
Proporção assimétrica
No esquema e na amostra, .xq-grelha__principal ocupa oito das doze colunas e .xq-grelha__contexto ocupa quatro. Entre 701 e 1023 px a proporção passa a 5 + 3; até 700 px as regiões empilham na ordem do DOM.
-
Material e rodapé técnico
Plano opaco, ruído discreto e luz especular de topo. O rodapé informa módulo e colunas; não exibe números decorativos sem significado.
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.
| Token / expressão | Aplicação CSS | Regra |
|---|---|---|
--xq-font
'Schibsted Grotesk', Arial, sans-serif
|
.xq-display
font-family
|
Schibsted Grotesk local para mensagem e títulos; preservar os fallbacks. |
--xq-display
clamp(48px, 7.2vw, 112px)
|
.xq-display
font-size
|
Escala fluida de 48 a 112 px; não aplicar às métricas. |
--xq-display-leading
0.96
|
.xq-display
line-height
|
0,96 no display; parágrafos continuam com entrelinha de leitura. |
--xq-display-tracking
-0.04em
|
.xq-display
letter-spacing
|
−0,04 em; não herdar nos controles ou nas legendas. |
--xq-mono
'Xeque Mono', monospace
|
.xq-metadados
font-family
|
Xeque Mono local para coordenadas, índices, código e medidas. |
--xq-label-tracking
0.12em
|
.xq-metadados
letter-spacing
|
0,12 em no registro técnico; evitar espaçar o texto corrido. |
--xq-grid-columns
12
|
.xq-grelha
grid-template-columns
|
Doze colunas na base; a composição responde aos breakpoints do sistema. |
--xq-grid-gap
var(--xq-col-gap)
|
.xq-grelha
gap
|
Usar o intervalo fluido do sistema; não compensar com margens negativas. |
--xq-grid-hairline
1px
|
.xq-moldura
border-width
|
1 px estrutural; controles exigem a cor funcional forte. |
--xq-surface-base
var(--xq-superficie)
|
.xq-moldura
background
|
Plano local opaco resolvido pelo tema mais próximo. |
--xq-surface-specular
rgb(255 255 255 / 80%)
|
.xq-moldura
box-shadow
|
Luz inset de 1 px no topo; não aumentar para simular foco. |
--xq-reticle-color
var(--xq-anel)
|
.xq-cantoneira
color
|
Cor do anel do tema aplicada aos marcadores decorativos. |
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.
Xeque.
Engenharia tática.
Ritmo editorial.
- A mesma mensagem ocupa uma região prioritária da grelha, com o contexto ao lado.
- Título, coordenada e medidas usam registros tipográficos distintos.
- Cantoneiras identificam o perímetro; o material preserva os tokens da marca.
Xeque.
Engenharia tática.
Ritmo editorial.
- Mensagem e referência ocupam uma pilha central sem relação espacial explícita.
- As medidas viram um selo, afastado do campo a que deveriam se referir.
- O tratamento poderia pertencer a qualquer sistema: não expõe grelha nem instrumento.
Bancada da abertura.
Alterne os estados para observar como uma mesma composição conserva posição, medida e ordem de leitura. Os valores são referências do sistema; não são resultados comerciais.
Xeque.
Composição pronta: mensagem, contexto e material no mesmo campo.
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-display- clamp(48px, 7.2vw, 112px)
--xq-display-leading- 0.96
--xq-display-tracking- -0.04em
--xq-mono- 'Xeque Mono', monospace
--xq-label-tracking- 0.12em
--xq-grid-columns- 12
--xq-grid-gap- var(--xq-col-gap)
--xq-grid-hairline- 1px
--xq-surface-base- var(--xq-superficie)
--xq-surface-specular- rgb(255 255 255 / 80%)
--xq-reticle-color- var(--xq-anel)
Aplicar o contrato
Começar pela estrutura
O CSS funciona sem JavaScript. Inclua os módulos apenas quando a composição tiver comportamentos que os utilizem.
<link rel="stylesheet" href="../css/xeque.css">
<main class="xq-grelha">
<section class="xq-grelha__principal">Mensagem principal</section>
<aside class="xq-grelha__contexto">Contexto da mensagem</aside>
</main>Conservar a ordem ao empilhar
A grelha muda a distribuição espacial, sem exigir uma segunda cópia do conteúdo para celular. A ordem do DOM mantém a prioridade editorial.
<section class="xq-moldura xq-superficie-tatil">
<header class="xq-metadados">[XQ // A1-H8]</header>
<h1 class="xq-display">Xeque.</h1>
<p class="xq-corpo">Engenharia tática. Ritmo editorial.</p>
</section>Escolher uma proporção pelo contrato
A abertura usa a grelha de 12 colunas e a relação 8 + 4. A classe .xq-assimetria é outro instrumento: sua base é 7fr + 5fr e não equivale a oito e quatro colunas.
<div class="xq-grelha">
<div class="xq-grelha__principal">Mensagem / 8 colunas</div>
<aside class="xq-grelha__contexto">Referência / 4 colunas</aside>
</div>Critérios de aceite
- O título identifica Xeque antes de qualquer frase abstrata.
- Coordenada, módulo e índice possuem significado declarado.
- Em 390 px a mensagem precede o contexto sem duplicação de conteúdo.
- Sem JavaScript, títulos, textos, links e diagramas continuam disponíveis.