Fundação: compor com medidas.
Doze colunas, unidade de quatro pixels e planos de leitura opacos. O rigor do Xeque vem da relação entre regiões, da distinção entre linha estrutural e limite funcional e da continuidade da leitura ao empilhar.
Grelha, material e instrumento.
A seção técnica abaixo expõe a divisão 8 + 4 e a distância entre a moldura externa, a área de conteúdo e o encontro das colunas. As chamadas descrevem a construção; a decoração permanece fora da ordem de foco.
-
Campo e cantoneiras
A moldura define um perímetro único. Cantoneiras posicionadas em absoluto não aumentam a área clicável nem cobrem controles.
-
Principal em oito colunas
O elemento principal usa .xq-grelha__principal: oito colunas na base e cinco na faixa de 701 a 1023 px. Os filhos da grelha recebem min-inline-size: 0; a ordem do DOM conserva a prioridade ao empilhar.
-
Contexto em quatro colunas
O apoio usa .xq-grelha__contexto: quatro colunas na base e três no tablet. Até 700 px as duas regiões passam a 1 / −1. O contexto complementa a mensagem sem duplicar o título.
-
Intervalo entre regiões
O gap fluido pertence à grelha. O módulo de 4 px orienta a escala de ritmo; não significa forçar toda medida fluida a um múltiplo fixo.
-
Linha estrutural versus funcional
Hairline e linha suave organizam a área. Campos, ações e foco usam linha forte ou anel, com contraste de interface suficiente.
-
Material sem perda de leitura
Ruído e brilho pertencem à superfície. Texto permanece opaco; o ruído é decorativo, não captura ponteiro e pode desaparecer em cores forçadas.
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-grid-columns
12
|
.xq-grelha
grid-template-columns
|
Base de 12 colunas com minmax(0, 1fr); respeitar o empilhamento responsivo. |
--xq-grid-gap
var(--xq-col-gap)
|
.xq-grelha
gap
|
Intervalo herdado do sistema; .xq-grelha--justa declara gap zero explicitamente. |
--xq-grid-hairline
1px
|
.xq-moldura
border-width
|
1 px; a espessura não substitui o contraste da borda funcional. |
--xq-grid-color
var(--xq-linha)
|
.xq-moldura
border-color
|
Linha estrutural do tema; inadequada como único limite de um campo. |
--xq-grid-color-strong
var(--xq-linha-forte)
|
.xq-moldura--precisa
border-color
|
Linha de maior presença; usar quando o contorno possui função de leitura. |
--xq-reticle-size
12px
|
.xq-cantoneira
inline-size / block-size
|
Marcador base de 12 px; .xq-cantoneira--ampla consome --xq-reticle-size-lg para chegar a 20 px. |
--xq-reticle-stroke
1px
|
.xq-cantoneira
stroke-width
|
Traço de 1 px; geometria mantém proporção do símbolo. |
--xq-reticle-offset
-1px
|
.xq-cantoneira--no
inset-block-start / inset-inline-start
|
−1 px para registrar o encontro do marcador com a borda. |
--xq-surface-base
var(--xq-superficie)
|
.xq-moldura
background
|
Plano opaco local; evitar baixar opacity no container inteiro. |
--xq-surface-noise-scale
128px
|
.xq-superficie-tatil::before
background-size
|
Fallback de ruído repete em 128 px sem alterar a escala do texto. |
--xq-surface-noise-opacity
.035
|
.xq-superficie-tatil__ruido
opacity
|
Opacidade baixa por tema; nunca aplicar ao grupo de texto e controles. |
--xq-surface-inset
inset 0px 1px 0px 0px var(--xq-surface-specular), inset 0px -1px 0px 0px var(--xq-surface-shade)
|
.xq-superficie-tatil--profunda
box-shadow
|
Combina luz e sombra internas; não usar como substituto do anel de foco. |
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.
Mensagem primeiro.
A região principal estabelece o sentido da composição.
- A divisão espacial expressa a prioridade da mensagem.
- Marcadores ficam restritos aos encontros da estrutura.
- O material pertence ao fundo; a leitura conserva opacidade.
Mensagem primeiro.
A região principal estabelece o sentido da composição.
Contexto
Módulo 4 px
Referência
08 + 04 colunas
- Blocos equivalentes escondem a prioridade editorial.
- Repetição de caixas aumenta a procura pela mensagem principal.
- A geometria não responde à função dos conteúdos.
Bancada de grelha e material.
Observe a grelha 8 + 4, a borda dupla e o ruído em seis temas e diferentes densidades. A retícula registra o limite entre as regiões; os estados atualizam a mensagem sem mudar a ordem de leitura. O módulo exibido é uma referência fixa, não uma medição do respiro.
Uma mensagem.
Um campo.
A região principal e o contexto estão alinhados ao mesmo perímetro.
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-grid-columns- 12
--xq-grid-gap- var(--xq-col-gap)
--xq-grid-hairline- 1px
--xq-grid-color- var(--xq-linha)
--xq-grid-color-strong- var(--xq-linha-forte)
--xq-reticle-size- 12px
--xq-reticle-stroke- 1px
--xq-reticle-offset- -1px
--xq-surface-base- var(--xq-superficie)
--xq-surface-noise-scale- 128px
--xq-surface-noise-opacity- .035
--xq-surface-inset- inset 0px 1px 0px 0px var(--xq-surface-specular), inset 0px -1px 0px 0px var(--xq-surface-shade)
Aplicar o contrato
Dividir sem duplicar
A grelha controla a proporção; os elementos semânticos descrevem a função. O apoio aparece depois da mensagem no DOM.
<div class="xq-grelha">
<section class="xq-grelha__principal">Mensagem</section>
<aside class="xq-grelha__contexto">Contexto</aside>
</div>Registrar um encontro
Marcadores SVG são decorativos. O viewBox e o símbolo mantêm a geometria; a classe define dimensão e posição.
<div class="xq-moldura">
<svg class="xq-cantoneira xq-cantoneira--no"
viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<use href="#xq-cantoneira-no"/>
</svg>
<p>Conteúdo da região.</p>
</div>Separar superfície e ruído
O filho SVG desativa o fallback ::before pelo seletor :has(), evitando duas camadas de ruído. Sua opacidade pertence apenas à textura; texto e controles permanecem opacos.
<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>
<p class="xq-corpo">Conteúdo legível sobre o material.</p>
</section>Critérios de aceite
- A grelha preserva a ordem de leitura ao empilhar em 390 px.
- Cantoneiras e retículas não recebem Tab nem interceptam toque.
- Controles usam linha forte, não a hairline decorativa como único limite.
- Ruído e brilho desaparecem sem remover informação em cores forçadas.