O design system da Chesslab, em componentes.

Cinco temas trocam só as variáveis semânticas. O texto em realce é Verde em fundos claros e Pistache em escuros. O anel de foco é verde nos temas claro e névoa (laranja fica abaixo de 3:1), pistache no escuro e no verde, grafite no pistache. No pistache, o marcador do eyebrow vira grafite (laranja vibra sobre pistache). Laranja cheio não encosta em verde cheio: no verde, a conversão e o acento viram pistache; no pistache, grafite.

<section class="gb-secao" data-tema="escuro">
  <div class="gb-wrap">
    <p class="gb-mono gb-eyebrow">Portfólio</p>
    <h2 class="gb-d-m">Título com <em>realce</em></h2>
  </div>
</section>

Ponto quadrado de 6 px e o nome da seção em mono. Sem numeração. O fio de cima (.gb-secao-topo) some quando há tabuleiro atrás, porque competiria com a malha.

• Tokens --gb-marcador (ponto), --gb-linha (fio), --gb-texto-suave.

A citação é o apoio do manifesto: 22 px, cor suave, medida de 46 caracteres. O princípio é a frase de destaque com ponto laranja e legenda de apoio, usada ao lado de uma captura.

• Acessibilidade A citação é um <blockquote>.
• Tokens --gb-marcador (ponto do princípio), --gb-texto-suave.

O cartaz passa dos 62 px do display: chega a 104, também limitado pela altura da tela, em peso 600. Até 700 px, no máximo 64. O marcador é a palavra com um bloco cuja borda direita usa o corte do símbolo. Bloco Trama, texto --cl-marca-clara. No pistache o bloco vira Neve e o texto, Grafite. Com data-corte, o bloco nasce vazio e preenche em 320 ms. Para uma frase por linha, cada trecho do cartaz vai num .gb-cartaz__linha, que vira bloco.

• Acessibilidade O bloco leva aria-hidden="true": a palavra continua no texto.
• Tokens --gb-t-cartaz, --gb-cartaz-lh, --gb-cartaz-tracking. O marcador lê --gb-marcador-cor e --gb-marcador-texto.
• JS iniciarMarcador(): com data-corte, o bloco preenche ao entrar na tela.

• Tokens --gb-container, --gb-gutter, --gb-col-gap, --gb-secao-y.

• Tokens --gb-u (8 px), --cl-radius-control, --cl-radius-card, --cl-radius-pill, --cl-window-cut, --gb-sombra-card.

O corpo aparece, a seta entra pela diagonal do corte e o olho fecha no fim, em 240 ms. A montagem toca cada vez que o símbolo entra na tela e só recomeça quando ele sai por inteiro. O olho pisca de novo quando o ponteiro ou o foco chega a um link ou botão dentro de .gb-pisca-no-hover. O JS copia as três partes do sprite: o <use> não deixa a animação alcançar o olho.

• Acessibilidade Símbolo com significado: role="img" e aria-label. Com movimento reduzido, fica inteiro.
• JS iniciarSimbolo(). No próprio .gb-simbolo-vivo, gb:remontar esconde e monta de novo, e gb:piscar pisca o olho (se ainda não montou, monta).

Repetir montagem

No wordmark grande, uma luz radial segue o ponteiro fino. Sem esse ponteiro, ou com movimento reduzido, a logo fica inteira. O “lab” continua no realce do tema.

• Acessibilidade O svg leva role="img" e aria-label="Chesslab".
• Tokens --gb-realce no “lab”.
• JS iniciarLogoViva(): a luz segue o ponteiro fino.

Pill laranja com rótulo Grafite e disco Neve à direita. No hover, o contorno grafite aparece, o disco cresce até a faixa e vira o pill inteiro, o rótulo some e a seta centraliza girando 45°. No teclado o rótulo fica: o anel de foco, grafite nos temas claros e neve no escuro, marca o botão. A caixa não muda de tamanho. Laranja não encosta em verde: no tema verde e na faixa de CTA o pill vira pistache; no pistache, grafite com rótulo neve. Um por tela, no máximo dois. Variante padrão da landing: --traco (faixa laranja de 7 px).

• Acessibilidade O ícone leva aria-hidden="true". Enviando, aria-busy="true" no botão e o “Enviando…” no .gb-formulario__aviso (role="status").
• Tokens --gb-ease-ref nas transições do disco e do contorno.
• JS iniciarBotoes(): no toque, o estado aparece por 900 ms (.is-preview).

Retangular, raio 7, 52 px. Preenchimento cresce em círculo a partir do canto inferior direito; a seta sai por cima e outra entra por baixo. Cinco cores e o secundário --suave (pill sem contorno, 12% do texto no hover). Nos temas escuro e verde, o padrão e o escuro viram pistache com texto grafite, para não sumirem no fundo. O acento é laranja; no verde vira pistache e no pistache, grafite. .gb-botao--largo ocupa 100% da largura.

• Acessibilidade A seta leva aria-hidden="true". O --vertical acompanha aria-expanded.
• Tokens --gb-m-button no preenchimento e na seta.
• JS iniciarBotoes(): no toque, o estado aparece por 900 ms (.is-preview).

Redondo, 44 px, contorno fino, preenchimento leve no hover. Versão pequena de 30 px para barras (pausar, fechar). Sempre com aria-label. Texto só para o leitor de tela vai num .gb-oculto-visual: fica fora da vista e continua na árvore.

• Acessibilidade aria-label no botão, aria-hidden="true" no svg.
• Tokens --gb-linha (contorno), --gb-texto.

Malha de 88 px (56 no mobile) com poucas casas acesas em Pistache, contraste baixo de propósito. As bordas dissolvem por máscara. Casas por --col/--lin; com data-sorteio="3-7" o JS sorteia as casas (mesma paridade: só se tocam pela diagonal) e com data-loop uma casa muda a cada 2,4 s. Usado na abertura e no fecho (escuro) e no manifesto (claro).

• Acessibilidade A malha leva aria-hidden="true".
• Tokens --cl-modulo (malha). Variáveis locais --modulo, --repouso e --linha-malha.
• JS iniciarTabuleiro(): data-sorteio e data-loop.

Acima, o tabuleiro claro dividindo espaço com o fragmento marca-d'água, como no manifesto da landing (é a única combinação de dois recursos aprovada, por vir da amostra clara do kit).

Duas luzes largas que derivam devagar, com a geometria do palco da home: uma no alto à direita (--palco-luz-a) e outra que sobe da base à esquerda (--palco-luz-b). No escuro, laranja a 13% e pistache a 9%. No verde, Neve a 6% e pistache a 22%. Nos temas claros, laranja a 16% e pistache a 38%. Aplicar na própria seção junto com .gb-secao--recortada. Usada nos Pilares e no palco da abertura.

• Tokens --gb-ease-inout na deriva das luzes.

Grade de fragmentos do símbolo em módulos de 88 px. Célula apagada: Verde a 12%; acesa (.is-on): Neve. O JS acende e apaga em ordem aleatória. Usada na faixa pistache de postura, ao lado do título.

• Acessibilidade A grade leva aria-hidden="true".
• JS iniciarTrama(): as células acendem em ordem aleatória.

• Acessibilidade Imagem decorativa com alt=""; com conteúdo, alt descritivo.
• Tokens --cl-window-cut e --cl-cut-rise. Variável local --corte.

--p · corte 14 px

--m · corte 20 px

--viva · corte 28 px

--verde · corte 28 px

Sombra e contorno fino vão no wrapper .gb-moldura (o clip-path cortaria os dois). A .gb-capa nasce cobrindo a janela no mesmo ângulo do corte e desliza para fora no reveal, enquanto a imagem assenta de 106% para 100%. Para empilhar camadas, o wrapper posicionado é o .gb-plano.

• Acessibilidade A capa leva aria-hidden="true".
• Tokens --gb-m-reveal, --gb-sombra-moldura.
• JS iniciarReveal() com data-reveal="janela".

Repetir entrada

A peça da abertura: folha Neve com corte de 40 px, a captura preenchendo tudo, sombra blur no mesmo recorte e véu de profundidade (--veu) para a peça de trás. A coreografia em loop fica com o GSAP da landing; aqui está a peça parada.

• Acessibilidade Sombra e véu levam aria-hidden="true"; a captura tem alt.

Painel opaco com o corte da identidade, janela à esquerda e texto à direita. Quatro cores da paleta, em variáveis locais (não data-tema, que mudaria o tema do cabeçalho do site). Na landing os quatro grudam (sticky) e cobrem-se pela rolagem; aqui, empilhados.

• Tokens Variáveis locais --painel e --painel-suave, por data-cor.

Faixa Verde com corte, símbolo como marca-d'água, título e apoio à esquerda, botão de conversão grande à direita. Com .gb-pisca-no-hover na faixa, o olho do símbolo pisca quando o ponteiro fino passa sobre a faixa ou o foco do teclado chega ao botão. Para isso o símbolo vai com as três partes do sprite inline: dentro de um <use>, o CSS não alcança o olho.

• Acessibilidade A marca-d’água leva aria-hidden="true".

Quadro 16:10 com corte e hover vivo, marca do cliente como máscara em currentColor (segue o tema), tag opcional de parceria e legenda. Na galeria, 2 × 2 no desktop e uma coluna no mobile; a tag desce de linha quando o card tem menos de 500 px.

• Acessibilidade A marca é um span com role="img" e aria-label; a imagem tem alt com o nome da loja.
• Tokens --marca, --marca-w e --marca-h no style da marca. --gb-col-gap na galeria.

Toast de pedido em vidro fosco: 340 px, ícone quadrado de 40 com a sacola no verde Shopify, título, hora e texto. Variante escura para fundos claros. Marcar com role="status". Só o ícone da notificação usa a cor Shopify.

• Acessibilidade role="status" num div (o aside não aceita esse papel); o ícone leva aria-hidden="true".
• Tokens --gb-sombra-card, --cl-shopify no ícone.

Moldura com raio 12, barra de 44 px com selo (ponto pistache com halo) e botão de pausa, e área de telas onde cada painel é um container. Altura fixa: trocar o conteúdo não muda a altura da seção. Usado nos Recursos com os componentes vivos da loja de demonstração.

• Acessibilidade O botão de pausa tem aria-label.
• Tokens --gb-superficie, --gb-linha. Variável local --palco-h (altura).

O campo-isca contra robôs, .gb-honeypot, fica fora da tela, do Tab e da árvore, e continua no envio do formulário. O readonly no campo é opcional: barra o preenchimento automático, mas o robô que digita pula o campo.

• Acessibilidade label com for. No erro, aria-invalid="true" e aria-describedby para a mensagem. O aviso do formulário tem role="status"; o honeypot, aria-hidden="true".
• Tokens --gb-superficie (controle), --gb-linha (borda), --gb-t-small.

Alternar estado de erro do e-mail

O fecho da landing: cartão Grafite com corte de 32 px sobre a seção verde, campos translúcidos e o botão de conversão largo. Com data-reveal="janela" e uma .gb-capa verde, entra com o wipe diagonal.

• Tokens .gb-campos--escuro troca --gb-texto, --gb-texto-suave e --gb-anel para o fundo escuro, também dentro de uma seção clara.
• JS iniciarReveal() com data-reveal="janela".

• Acessibilidade O ícone leva aria-hidden="true".

Estado: topo rolado oculto menu aberto Tema: escuro claro

• Acessibilidade nav com aria-label. O hambúrguer leva aria-expanded e aria-label (Abrir menu, Fechar menu). Com o menu aberto, o foco fica no menu, o Esc fecha e o #conteudo fica inert.
• Tokens --gb-altura-cabecalho, --gb-altura-cabecalho-rolado, --gb-ease-inout.
• JS iniciarCabecalho(). O cabeçalho fica fora do #conteudo.

• Tokens --gb-m-fast, --gb-ease-out.

• Acessibilidade Logo e voltar ao topo com aria-label.
• Tokens --gb-altura-rodape.

Abaixo de 1024 px, uma barra fixa de 56 px mostra o próximo passo do capítulo que está no centro da tela. Some com o menu aberto e quando a pessoa dispensa (vale para a sessão, chave gb-atalho-dispensado). Fora de vista, sai da ordem do teclado. Nesta demonstração a barra fica dentro do bloco. O capítulo declara data-atalho-servico, data-atalho-chamada e data-atalho-href.

• Acessibilidade O fechar tem aria-label="Dispensar atalho". Ao dispensar, o foco vai para o #conteudo.
• Tokens --gb-atalho-h, --gb-sombra-flutuante.
• JS iniciarAtalho(). Quem fecha grava gb-atalho-dispensado = 1 no sessionStorage.

Linha do tempo: marcos quadrados de 44 px com o número em mono, ligados por fio com ponta de seta. O último marco é cheio. Cinco colunas no desktop; até 950 px a linha fica vertical. Com data-progresso e o JS, as etapas acendem pela rolagem (próximas a 40%, vistas a 100%, atual com marco cheio).

• Acessibilidade Lista ordenada (<ol>), um título por etapa.
• Tokens --gb-realce no marco. Variável local --colunas (padrão 5).
• JS iniciarEtapas() com data-progresso.

Seletor vertical: nome de 19 px, ponto laranja que desliza para a esquerda na ativa e texto de benefício que abre embaixo. A linha de progresso (--progresso, de 0 a 1) mostra o avanço quando o script da página anima as abas, como o GSAP da landing; o gambito.js não troca de aba sozinho. Na demonstração, a linha fica parada em 0,6. Até 950 px vira fileira de chips rolável, e o benefício vai para a .gb-abas-legenda, que já vem com o texto da aba ativa. Teclado: setas, Home e End.

• Acessibilidade role="tablist" com aria-orientation; role="tab" com aria-selected e aria-controls; role="tabpanel" com aria-labelledby. A .gb-abas-legenda leva aria-hidden="true".
• Tokens --gb-realce, --gb-marcador, --gb-superficie. Variável local --progresso.
• JS iniciarAbas(). A lista dispara gb:aba a cada troca e na carga, com detail: { indice, aba, painel }; o evento não borbulha: escutar na própria lista.

• Acessibilidade aria-pressed marca o ativo; o ícone leva aria-hidden="true".
• Tokens --gb-realce, --gb-superficie, --gb-linha.

Lista de <details>. Alvo de 44 px, sem o triângulo do navegador. O disco abre no realce; no escuro e no verde o texto do disco aberto é grafite, porque o realce é pistache. A resposta sai em 320 ms. Um item cujo id está na URL abre sozinho.

• Acessibilidade <details> e <summary> nativos; a seta leva aria-hidden="true".
• Tokens --gb-realce no disco aberto.
• JS iniciarFaq().

Número em realce, métrica e contexto. Ocupa 5 colunas e 7. Abaixo de 700 px, empilha.

• Tokens --gb-realce no número, --gb-t-sub na métrica.

Citação ao lado da janela. O botão abre um dialog com o corte, sem raio. Com data-video (id do YouTube), o iframe só nasce no clique. Sem esse dado, o palco mostra o poster. Sem JS, fica o link alternativo. A duração, quando houver, vai num .gb-video__duracao dentro do rótulo.

• Acessibilidade O botão tem aria-haspopup="dialog" e aria-controls; o <dialog> tem aria-label; o fechar, aria-label.
• JS iniciarVideo().

Ver o enquadramento Ver a imagem

O olho achata ancorado na base.

Um atributo por elemento. data-reveal sobe 28 px e aparece; num data-reveal-grupo os filhos entram juntos, escalonados em 80 ms. linha desenha uma régua em X. janela desliza a capa e assenta a imagem. Títulos por linha (data-reveal-titulo) precisam do SplitText do GSAP; sem ele, caem no reveal simples. A máscara de linha dos títulos divididos é a .gb-mascara. Para a entrada genérica (troca de painel, item novo em lista), .gb-entra: sobe 10 px e aparece em 700 ms. O Repetir põe .is-resetting para voltar ao estado escondido sem transição.

• Acessibilidade Com movimento reduzido, cada peça aparece no estado final.
• Tokens --gb-m-enter, --gb-m-reveal, --gb-ease-out. Variável local --atraso (escalonamento).
• JS iniciarReveal() põe gb-motion-css no <html> e, com os observadores prontos, gb-motion-pronto. Conteúdo inserido depois: chamar de novo iniciarReveal(), iniciarSimbolo() e iniciarMarcador(), ou iniciarGambito(); o que já estava ligado não muda.

Repetir entrada

O olho achata ancorado na própria base e desce 6 unidades enquanto fecha, em 240 ms. Num símbolo estático, com as três partes do sprite inline (dentro de um <use> o CSS não alcança o olho), dispara por .is-piscando, pelo ponteiro fino sobre toda a .gb-pisca-no-hover ou pelo foco do teclado num link ou botão dentro dela. A montagem completa — corpo, seta pela diagonal e piscada — é a peça .gb-simbolo-vivo, na seção Logo e símbolos. Não usa GSAP.

• Tokens --gb-ease-inout.
• JS Num .gb-simbolo-vivo, o evento gb:piscar pisca o olho: é o que o chip da demonstração dispara.

<div class="gb-faixa gb-pisca-no-hover">
  <svg class="gb-marca-dagua" viewBox="0 0 83 76.4" aria-hidden="true">
    <!-- as três partes de #gb-simbolo, inline: dentro de um <use> o CSS não alcança o olho -->
    <g transform="translate(-250.5 -139.8)">
      <path class="gb-simbolo__corpo" fill="currentColor" d="M288.792 140.8C268.196 140.8 251.5 157.455 251.5 178C251.5 198.545 268.196 215.2 288.792 215.2C298.713 215.2 307.728 211.334 314.409 205.031L304.554 183.948C303.724 184.128 302.862 184.224 301.978 184.224C295.287 184.224 289.863 178.813 289.863 172.139C289.863 170.485 290.196 168.91 290.798 167.475H277.527C277.191 169.072 277.014 170.727 277.014 172.424C277.014 183.934 285.142 193.548 295.985 195.871L298.097 200.388C295.231 201.575 292.088 202.23 288.792 202.23C275.377 202.23 264.502 191.382 264.502 178C264.502 164.618 275.377 153.77 288.792 153.77C298.441 153.77 306.756 159.343 310.675 167.475L319.249 156.536C312.495 147.016 301.372 140.8 288.792 140.8Z"/>
      <path class="gb-simbolo__olho" fill="currentColor" d="M300.632 172.845C303.555 172.845 305.925 170.44 305.925 167.475H295.338C295.338 170.44 297.708 172.845 300.632 172.845Z"/>
      <path class="gb-simbolo__seta" fill="currentColor" d="M325.474 195.403L332.5 185.295L324.404 167.475H310.675L318.354 184.071L309.931 195.407L325.474 195.403Z"/>
    </g>
  </svg>
  …
</div>

// ou por JS, no <svg> com as partes inline; tirar a classe no fim deixa piscar de novo
simbolo.addEventListener('animationend', () => simbolo.classList.remove('is-piscando'), { once: true });
simbolo.classList.add('is-piscando');