Terrain UI

O que Terrain UI faz?

Estas regras foram destiladas da interface de um jogo de temática industrial, mantendo apenas o que se mostrou útil em páginas web comuns. A skill não contém recursos do jogo e não tenta recriá-lo.

Leia este arquivo inteiro antes de começar. Abra assets/terrain.css para cores e marcação de componentes, use assets/contours.js para o fundo de contornos e veja references/research.md para saber de onde veio cada regra e por que algumas coisas foram omitidas.

Oito Regras

1. Uma cor de acento, dois significados: a localização atual e a ação primária. Padrão #FEEC00, amostrada da aba selecionada no jogo. Use-a apenas como preenchimento, com texto na cor da tinta sobre ela; no tema claro, nunca a use para linhas ou texto. O mesmo se aplica ao hover: apenas o botão primário preenche com o acento ao passar o mouse. Links, botões em pílula e linhas de lista apenas clareiam ou ganham um sublinhado mais grosso.
2. Seleção depende da direção:
   • Listas verticais: o hover clareia a linha; a linha selecionada escurece com texto claro, e uma barra de acento aparece à esquerda.
   • Abas horizontais: a aba selecionada preenche sólida com o acento. Ao trocar, o bloco antigo colapsa e o novo abre lateralmente a partir do centro.
3. Forma do botão mostra prioridade: a ação primária é um bloco com o canto inferior direito cortado; as ações secundárias são pílulas com um ícone redondo na extremidade direita. No máximo uma ação primária por grupo de botões.
4. Coloque um caminho no canto superior esquerdo de cada página: // Trabalho / Sobre mim. Os níveis para os quais se pode voltar são links.
5. Números são decoração e devem ser verdadeiros: defina IDs, datas e contadores atual / total em algarismos tabulares largos. Nunca invente dados ou adicione texto técnico falso. O mesmo vale para cópia: descreva um produto (recursos, escopo suportado, instalação) apenas com base no que o usuário forneceu ou na própria documentação do projeto, e mantenha seu escopo. Onde não houver fonte, escreva um placeholder como [TODO: ...] em vez de preenchê-lo.
6. Mostre teclas de atalho: por exemplo ← → ao lado dos botões de página. Mostre-as apenas em dispositivos com ponteiro fino.
7. Fundo: linhas de contorno fechadas: um patch em cada um dos dois cantos, opacidade de 6% a 9%, a cada quinta linha mais grossa, sem animação.
8. Movimento curto e firme: hover 90 ms, seleção 110 a 120 ms, curva cubic-bezier(.2,0,0,1). Desligue tudo quando o sistema solicitar redução de movimento.

Escolha um tipo de página primeiro

Decida que tipo de página você está construindo antes de começar. Todos os três compartilham as mesmas cores e componentes; eles diferem em quão ousados são. Quando estiver em dúvida, escolha Leitura.

Tipo	Usado para	Como	Equivalente no jogo
Leitura	Artigos, detalhes de projetos, configurações, ajuda	Uma coluna de texto, com cerca de 65 caracteres latinos ou 38 CJK de largura; acento apenas no item de navegação atual e no botão primário; contornos opcionais	Enciclopédia, arquivos
Vitrine	Páginas iniciais, portfólios, landing pages	Cabeçalhos largos e grandes, tipo de contorno permitido; números grandes como fundo; contornos ativados; conteúdo pode aparecer bloco por bloco	Menu principal, loja
Bancada	Páginas de administração, painéis, ferramentas, configurações de extensão	Nav de lista vertical à esquerda, abas no topo; principalmente tabelas, números e formulários; sem cabeçalhos grandes; movimento apenas em resposta a ações	Inventário, equipamento, lista de amigos

Componentes

Todos vivem em assets/terrain.css com o prefixo tu-. examples/demo.html mostra cada um.

Componente	Classes	Notas
Título de caminho	tu-crumb	Regra 4
Lista vertical	tu-list	Marque o item atual com aria-current
Abas horizontais	tu-tabs tu-tab	Marque a aba atual com aria-selected="true" ou aria-current
Botão primário / secundário	tu-btn / tu-btn--pill + tu-btn__icon	Regra 3
Dica de tecla	tu-kbd	Regra 6
Linha de campo	tu-fields tu-sep	Separe metadados com uma barra vertical │
Painel	tu-panel	Um bloco liso: sem raio, sombra ou borda
Tabela	tu-table-wrap tu-table	Rótulos de cabeçalho pequenos e largos; alinhe à direita colunas numéricas com tu-right; rola lateralmente em telas estreitas
Input	tu-field tu-input tu-hint	Ao focar, o sublinhado engrossa e uma barra de acento aparece à esquerda
Erro	tu-error, mais aria-invalid="true" no input	Um pequeno quadrado de acento e uma frase sobre como corrigi-lo; sem texto vermelho
Interruptor	tu-switch	"Ligado" é um estado atual, então a trilha preenche com o acento
Diálogo	<dialog class="tu-dialog">	Os botões ficam em uma barra de rodapé: um primário, cancelar como pílula; ele aparece nitidamente a partir de um desfoque
Toast	tu-toast	Uma barra escura com uma barra de acento à esquerda; desliza da esquerda e sai após 2 segundos
Estado vazio	tu-empty	Uma caixa tracejada com uma frase sobre o que aparecerá aqui, opcionalmente um botão primário
Carregamento	tu-progress, mais tu-progress--busy enquanto aguarda	Uma linha de 2 px; quando o progresso é conhecido, defina --tu-value e mostre a porcentagem

Sem vermelho. Avisos, falhas e estados pendentes usam o pequeno quadrado de acento com texto na cor da tinta. Coloque ações irreversíveis, como exclusão, atrás de um diálogo de confirmação.

Para qualquer coisa não nesta tabela, derive das oito regras: se é "atual" ou "primário" decide se pode usar o acento; se é primário ou secundário decide bloco ou pílula; se pode ser clicado decide se clareia no hover.

Movimento

Ação	Duração	Como
Clarear no hover	90 ms	Transição de cor de fundo
Barra de seleção de lista aparece	110 ms	scaleY(0 → 1)
Troca de aba	120 ms	Bloco de acento scaleX(0 → 1), abrindo a partir do centro
Hover no botão primário	280 ms	Acento aparece da esquerda
Mudança de página	Sair 320 ms, entrar 480 ms	Página antiga desfoca e desvanece; nova página aparece bloco por bloco, com 100 ms de intervalo

Não Faça

• Marcadores não vistos (pontos vermelhos, selos NOVO): no jogo, eles incentivam os jogadores a coletar recompensas; em um portfólio ou site comum, parecem irritantes.
• Vidro fosco, rasgos de glitch, linhas de varredura, brilho, grandes preenchimentos de acento, cartões arredondados com sombras.
• Elementos exclusivos de jogos, como menus 3D em carrossel, arte de personagens e barras de cor de raridade.
• Quaisquer recursos oficiais do jogo: capturas de tela, logotipos, ícones, arte de personagens, cópia ou arquivos de fonte oficiais.

Tipografia

• Texto e números latinos: Saira (código aberto, SIL OFL). Rótulos esticados para 125%, todas em maiúsculas, tracking de 0,06em. O site oficial não adiciona tracking aos seus rótulos largos; um pouco é mantido aqui para tamanhos pequenos.
• Chinês: Noto Sans SC ou a sans-serif do sistema. Sem faces serifadas ou de pincel para texto do corpo.
• Todos os números tabulares (font-variant-numeric: tabular-nums).

Entregando um único arquivo HTML

• Use as classes terrain.css como estão; não adicione substituições no nível da página que alterem suas cores. Se uma alteração for necessária, o componente tem um problema e deve ser relatado de volta à skill.
• Coloque terrain.css em um elemento <style> e contours.js em um elemento <script>. Antes de embutir qualquer script, certifique-se de que ele não contém </script> literal; se contiver, escreva como </script>.
• Se a página precisar funcionar offline, incorpore Saira como uma data URI woff2 em @font-face; caso contrário, use Google Fonts e mantenha as fontes de fallback.

Lista de Verificação Antes da Entrega

• Um tipo de página foi escolhido e tamanhos de cabeçalho de tipos diferentes não são misturados em uma página.
• O acento aparece apenas na localização atual e ações primárias; não há vermelho na página.
• Cada grupo de botões tem no máximo um botão primário em bloco; o resto são pílulas.
• Listas verticais e abas horizontais usam seus próprios estilos de seleção.
• Cada página tem um título de caminho //.
• Todos os números são dados reais; cada declaração de produto tem uma fonte e não exagera seu escopo.
• Os temas claro e escuro foram verificados; nada rola lateralmente na largura de um telefone (cerca de 400 px).
• O foco do teclado está visível; tudo está parado com redução de movimento ativada.
• Nenhum recurso oficial do jogo é usado.

Arquivos

Arquivo	Conteúdo
assets/terrain.css	Tokens de cor (claro e escuro) e todos os componentes
assets/contours.js	Fundo de contorno, uma linha para configurar: TerrainContours.mount(canvas)
examples/demo.html	Todos os componentes em uma página, pronta para abrir
examples/screenshots/	Página de componentes em claro, escuro, largura de telefone e diálogo
references/research.md	Notas de pesquisa: o que foi observado, o que foi mantido, o que foi omitido