# Design System Groove/SA

Guia técnico da identidade visual e das aplicações digitais da Groove/SA. O documento reúne tokens, tipografia, layout, componentes, acessibilidade, direção de imagem e estrutura das páginas do site.

## 1. Identidade visual

A marca combina uma base escura com o magenta como assinatura e destaque. Fotografias reais de palco, instrumentos, músicos e público mostram a experiência da banda; os elementos gráficos permanecem simples para manter a música e as imagens em primeiro plano.

| Token | Valor | Aplicação |
|---|---|---|
| Magenta Groove | `#ED1E79` | CTAs, filetes, setas e detalhes de navegação |
| Magenta para texto em fundo claro | `#C20D59` | Rótulos pequenos sobre branco e cinza claro |
| Preto | `#000000` | Contraste, marca e fundos |
| Tinta | `#111111` | Hero, seções escuras, FAQ e rodapé |
| Carvão | `#1E1E1E` | Cards e superfícies escuras |
| Branco | `#FFFFFF` | Fundos claros e texto sobre áreas escuras |
| Linha | `#DDDDDD` | Bordas e divisores |
| Cinza de apoio | `#666666` | Texto secundário em fundo claro |

O retângulo não é parte do tratamento da marca. O wordmark usa os arquivos fornecidos, sem placa de fundo acrescentada.

## 2. Tipografia

- **Space Grotesk** é a família de títulos e texto corrido. Os arquivos WOFF2 são servidos localmente em `assets/fonts/`; a família cobre pesos 300–700.
- **IBM Plex Mono** é usada em marcadores técnicos e amostras de código. Os arquivos locais cobrem pesos 400 e 600.
- As fontes incluem subconjuntos `latin` e `latin-ext`, com fallback para fontes do sistema.
- Texto corrido: 18 px no desktop e no celular, com entrelinha de 1.7–1.75.
- Texto complementar: 15–17 px. Metadados e rótulos: mínimo de 14 px.
- Hero: escala fluida de aproximadamente 36–78 px, ajustada ao espaço disponível.
- Títulos de seção: escala fluida de aproximadamente 33–58 px.
- Títulos podem usar caixa alta conforme a copy; texto corrido mantém caixa normal.

## 3. Grid, composição e ritmo

- Container central: largura máxima de 1170 px.
- Gutter: 15 px como base desktop; aproximadamente 20 px em tablets e celulares.
- Hero: fotografia de palco em largura total, com overlay escuro para contraste e conteúdo ancorado na base.
- Seções: espaçamento vertical fluido, em geral de 70 a 128 px.
- Ritmo: hero escuro, faixa de posicionamento, alternância de blocos claros e escuros, CTA de destaque e rodapé escuro.
- Grids: três colunas em telas largas, duas em médias e uma em celulares; o número de colunas varia com o conteúdo.
- A fotografia pode ocupar a largura toda ou acompanhar uma composição editorial com texto.

## 4. Componentes e interação

- **Navegação:** wordmark branco sobre o hero. O item “Eventos” revela seu submenu por hover e foco de teclado; em telas estreitas, as opções aparecem no menu recolhível.
- **CTA primário:** fundo `#ED1E79`, texto escuro, raio de 6 px, sem sombra. Cada landing inicia uma conversa no WhatsApp com texto associado à página de origem.
- **CTA secundário:** contorno magenta ou branco e fundo transparente; usado para conteúdo complementar, como Spotify e riders técnicos.
- **Cards:** borda de 1 px, raio de 3 px e sem sombra; hover altera a borda/fundo e pode deslocar levemente o card.
- **Etapas:** listas numeradas com filete magenta.
- **FAQ:** elemento nativo `details`, utilizável por teclado e sem JavaScript para abrir e fechar.
- **Vídeos:** uma faixa em carrossel percorre os vídeos da Groove/SA; pausa no hover, no foco e pelo controle de pausa, com alternativa de rolagem manual quando o sistema reduz movimento. Capas locais; o player abre após interação. O CTA leva ao canal oficial no YouTube, que recebe novas publicações.
- **Comentários:** citações atribuídas ao perfil publicado, preservando texto e contexto. Um comentário de espectador não é apresentado como avaliação de contratante.
- **Galeria:** 14 fotografias na página inicial e nove nas páginas de ocasião. A composição preserva a proporção da imagem e evita cortes automáticos de rostos ou instrumentos.
- **CTA mobile fixo:** barra inferior compacta para consultar disponibilidade.
- **Ícones:** sem biblioteca externa; usam-se a barra diagonal da marca e setas tipográficas.
- **Movimento:** transições curtas em hover; a preferência `prefers-reduced-motion` reduz o movimento.
- **Foco:** contorno visível, link para saltar ao conteúdo e controles alcançáveis por teclado.

## 5. Acessibilidade e leitura

- Texto corrido de 18 px também em celulares e rótulos com pelo menos 14 px.
- Entrelinha ampla e áreas de toque ampliadas, com controles de pelo menos 44 px e CTA mobile com pelo menos 48 px de altura.
- Em fundo claro, rótulos usam `#C20D59`; o magenta da marca `#ED1E79` fica em CTAs, detalhes e texto sobre fundo escuro.
- Contraste é tratado conforme o fundo e a função do elemento.
- Layout responsivo permite zoom e reorganiza conteúdo em telas estreitas.
- Foco visível e movimento reduzido respeitam as preferências do navegador e do sistema operacional.
- Imagens informativas recebem texto alternativo descritivo; imagens decorativas não repetem conteúdo adjacente.

## 6. Conteúdo e conversão

- O repertório é pop/rock nacional e internacional dos anos 80, 90 e 2000.
- As formações disponíveis têm quatro ou cinco músicos, conforme o rider. O repertório se mantém; a duração do show é combinada com o contratante e não determina a quantidade de músicos. A formação de quatro músicos pode atender melhor a formatos pocket.
- Pedidos fora do repertório passam por análise de encaixe no setlist e do estilo.
- A área atendida inclui Goiânia e todo o estado de Goiás.
- O CTA orienta a consultar disponibilidade e orçamento pelo WhatsApp, sem anunciar um prazo específico.
- As páginas não exibem valores de contratação.
- A comunicação destaca uma agenda seletiva e atenção à qualidade da entrega.

## 7. Páginas e estrutura

As páginas compartilham um padrão flexível: hero com foto e CTA, posicionamento da banda, conteúdo específico da ocasião, FAQ, prova visual/social, CTA final e rodapé. A ordem e a quantidade de seções variam conforme a intenção da página.

| Página | Endereço |
|---|---|
| Início | `/` |
| Confraternização | `/banda-para-confraternizacao-goiania/` |
| Confraternização de fim de ano | `/banda-para-confraternizacao-de-fim-de-ano-goiania/` |
| Aniversário | `/banda-para-aniversario-goiania/` |
| Evento corporativo | `/banda-para-evento-corporativo-goiania/` |
| Festa corporativa | `/banda-para-festa-corporativa-goiania/` |
| Casamento | `/banda-para-casamento-goiania/` |
| Formatura | `/banda-para-formatura-goiania/` |
| Banda cover | `/banda-cover-goiania/` |
| Repertório por década | `/banda-anos-80-90-goiania/` |
| Design System | `/design-system-groovesa/` |

## 8. Direção de imagem e vídeo

A escolha de imagens prioriza registros próprios, foco reconhecível e variedade de enquadramentos. Mantém-se a cor real da luz de palco e não se usam filtros globais que alterem os registros. Só se atribui uma ocasião quando ela estiver confirmada.

| Arquivo ou grupo | Uso | Tratamento |
|---|---|---|
| `assets/img/groovesa-palco-hero.webp` | Hero | Imagem ampla, cover e overlay escuro; versão JPG permanece disponível como alternativa |
| `assets/img/galeria/` | Galeria de fotos | Grade responsiva, proporção original e carregamento tardio |
| `assets/img/videos/` | Live Session | Capas locais para uma seleção de vídeos oficiais; player abre após interação. O canal no YouTube recebe novas publicações |
| `assets/img/groovesa-og-1200x630.png` | Compartilhamento | Logo centralizada em fundo escuro, proporção 1200 × 630 |
| `assets/img/favicon.svg`, `favicon-32.png`, `apple-touch-icon.png` | Navegador e atalhos | Variações para favicon SVG, PNG 32 × 32 e ícone 180 × 180 |
| `assets/img/logo-groovesa-branco.png` | Navegação e rodapé | Wordmark branco transparente |
| `assets/img/logo-groovesa.svg` | Marca vetorial | Arquivo vetorial fornecido, preservado sem alteração |

## 9. SEO, compartilhamento e busca generativa

- Páginas públicas usam `title`, descrição, URL canonical e metadados Open Graph e Twitter.
- A imagem social PNG 1200 × 630 mostra a marca centralizada e é usada nas prévias de compartilhamento.
- JSON-LD identifica a Groove/SA como grupo musical, os serviços, as páginas e, quando aplicável, perguntas frequentes e vídeos.
- Metadados regionais indicam Goiânia e Goiás, sem acrescentar endereço ou coordenadas não confirmados.
- `sitemap.xml`, `robots.txt`, `llms.txt` e `manifest.webmanifest` acompanham as páginas; favicons incluem SVG, PNG e Apple touch icon.
- O site é estático e não depende de banco de dados nem de formulários com envio.

## 10. Implementação publicada

- Páginas HTML estáticas usam `assets/css/site.css` e `assets/js/site.js`.
- As fontes, as fotografias otimizadas, as capas de vídeo, os ícones e os arquivos de marca são servidos pelo próprio domínio.
- Links de contato levam ao WhatsApp com mensagem de origem personalizada; links de vídeo levam ao canal oficial da Groove/SA no YouTube e os demais links aos canais oficiais da banda.
- O documento técnico está disponível para baixar neste endereço: [design-system-groovesa-tecnico.md](https://groovesa.com.br/downloads/design-system-groovesa-tecnico.md).