Design System

Podemos medir as visitas?

Com sua permissão, usamos cookies do Google Analytics para entender quais conteúdos são mais acessados e melhorar o GuitarX. Você pode recusar e continuar navegando normalmente, ou mudar sua escolha nas Preferências de cookies.

Demonstração de redação e equilíbrio visual, sem salvar consentimento. Para alterar a escolha real: Cookies → Gerenciar preferências.

Guias usam esta extensão semântica para leitura longa. Reader Accent é o destaque de capítulos, foco, estados ativos e tônicas sobre fundo claro.

Primário · Secundário · Ghost · Desabilitado · Ícone

GuitarX Lab identifica comparações, análises e experimentações de equipamentos. Não é uma subcategoria de Originais. Academy fica reservada para o lançamento da área.

Assuntos são metadados textuais, sem fundo preenchido. “Análise” e “Comparativo” não substituem o content label GuitarX Lab.

Sinaliza um recurso ainda indisponível. Contorno neutro, sem preenchimento, altura de 19,2px e padding .25rem .42rem .05rem para centralização óptica. No menu, a versão curta “breve” mantém o espaço compacto. O badge é informativo: não é clicável e não habilita o item.

Raio sólido de 12px na cor GX White em círculo de 16px, próximo da altura da linha da data, com Hot Red (#CC2035) e GX White do DS. Sempre depois do content label, agrupados por .editorial-labels, com 6px de intervalo. Não é botão, filtro, notícia ao vivo nem indicação de popularidade.

Uso editorial pontual: mudanças que afetem diretamente o rig, o estudo ou o trabalho do guitarrista; ou debates relevantes sustentados por fontes verificáveis. Recência, lançamento e potencial de cliques não bastam. Não sinalizar rumores nem fabricar polêmica. Retirar o sinal quando a pauta deixar de ser quente. O significado deve estar no texto acessível e no título do badge, sem depender apenas da cor ou do hover.

Hover ou foco pausa a faixa e revela o underline. No celular, arrastar move as chamadas; ao soltar, o loop retoma na velocidade normal. Movimento reduzido mantém a faixa estática.

Botão circular de 52px no canto inferior direito, com diapasão de 24px. No Guia, fica 64px acima do botão de menu. Painel com Surface 1, texto GX White, estados ativos Brand Sky e indicação de afinação Brand Mint.

Use o botão flutuante desta página para experimentar. O microfone só inicia após ação e permissão; não há gravação ou envio. Fechar, trocar de modo ou ocultar a página encerra a captura e o som. Escape fecha e devolve o foco ao botão. Na primeira abertura de cada visita, uma animação de 2,5 segundos apresenta o afinador; as próximas aberturas são diretas. Com redução de movimento habilitada, a animação é ignorada. A detecção é cromática; os sons usam afinação padrão. Metrônomo: 40–240 BPM. A escala ao redor do knob permanece fixa; só a peça central gira, em passos de 2 BPM com resposta tátil discreta quando disponível. Tocar no knob não altera o valor: o ajuste começa apenas com o movimento, relativo ao BPM atual. Campo numérico e botões de −/+ mantêm ajuste de 1 BPM; o controle também responde às setas do teclado. O painel mantém a mesma altura nas abas Afinador e Metrônomo, sem deslocar a janela ao alternar. O BPM aparece abaixo do número em 12px. O knob tem escala de 270° com marcas iluminadas até o BPM selecionado, gira com arraste relativo mais preciso e mola visual discreta. O símbolo GuitarX no centro usa Brand Mint e aumenta gradualmente a luminosidade conforme o BPM avança, acompanhando o indicador atual. O seletor de compasso fica abaixo do knob e abre 1/4, 2/4, 3/4, 4/4 ou 6/4; na mesma linha dos pontos de batida, o controle TAP define o BPM a partir dos toques; não há botão para silenciar o metrônomo. As batidas são pontos pequenos em Brand Sky, com Brand Mint no primeiro tempo. O SVG do knob é um asset fornecido para o GuitarX. O primeiro tempo tem acento sonoro e visual, exceto no modo de 1 tempo. O pulso visual usa um relógio próprio e continua visível mesmo quando o navegador bloqueia áudio; a interface informa esse bloqueio. A seleção das cordas responde imediatamente ao toque. O relógio do áudio agenda os cliques; microfone, notas e metrônomo não funcionam simultaneamente.

Entrada padrão · foco em Brand Mint · contraste mínimo preservado.

Seleção: Reader Accent + Reader Paper. Controles de no mínimo 44px, foco visível, seleção indicada por texto e aria-pressed. Uma única interação principal no círculo. Acordes e exemplo de progressão ficam em uma área recolhida. Sem áudio, modos ou controles extras. Nenhuma cor nova.