O segundo design system da Chesslab.

Como o sistema pensa

A direção vem da revisão da homepage de 28/09/2026: o que lia como interface feita com IA eram as etiquetas pequenas, os contornos, os traços e os cartões. O Roque troca esses recursos por respiro, imagem e tipografia.

1. Respiro

   O texto assenta num espaço livre, sem disputar com a imagem. Respiro não é fundo branco: pode ser o lado escuro de uma foto.

2. A imagem conduz

   Foto e vídeo grandes, com o texto na área calma. O véu só existe para garantir a leitura.

3. Tipografia no lugar de etiquetas

   Sem caixa alta, sem marcador de seção, sem pílula contornada. Listas com filete entre as linhas. Ênfase no tom suave, não no itálico.

4. A troca

   Dois elementos trocam de lugar, como rei e torre: um desliza, o outro passa por cima. É o único gesto de assinatura; o resto do movimento é discreto.

5. Tema por seção

   Seis temas: claro, névoa, pistache, escuro, verde e imagem. Os componentes leem as variáveis do tema e não têm variante de cor.

6. Uma ação de conversão por tela

   O laranja aparece num lugar só, com o rótulo em Grafite.

7. Funciona sem JavaScript

   Tudo aparece sem JS. Com movimento reduzido, nada se move e tudo fica no estado final.

Instalar

CSS puro e um módulo JS opcional, sem dependências. Copie a pasta ds-roque-v1 para o projeto, cole o conteúdo de assets/sprite.svg no topo do <body> e importe:

<html lang="pt-BR" class="no-js">
<head>
  <link rel="stylesheet" href="ds-roque-v1/css/roque.css">
  <script>document.documentElement.classList.replace('no-js', 'js');</script>
</head>
<body>
  <!-- conteúdo de assets/sprite.svg -->
  <main id="conteudo">…</main>
  <script type="module">
    import { iniciarRoque } from './ds-roque-v1/js/roque.js';
    iniciarRoque();
  </script>
</body>
</html>

Camadas

Tudo entra em @layer rq.*. O CSS do projeto, fora de camada, vence sem !important.

Comportamentos

data-rq="nome" carrega js/modulos/nome.js sob demanda. O que entra na página depois é ligado sozinho.

Fontes

Hanken Grotesk (OFL), variável de 100 a 900, com fallback de métricas iguais, para o texto. JetBrains Mono (OFL) para dados técnicos e métricas. As duas embutidas em assets/fonts.

Junto do Gambito

Os dois sistemas podem estar na mesma página. A paleta --cl-* tem os mesmos valores, os temas usam o mesmo atributo e os mesmos nomes (data-tema="escuro" serve aos dois), e os prefixos não se cruzam: gb- e --gb-* no Gambito, rq- e --rq-* no Roque.

Versão

1.0.0. Componente ou variante nova sobe para 1.1, 1.2. Token ou marcação que quebra uso existente vira Roque 2.