# Central Praia · Design System v1

**Areia Urbana — onde a areia encontra a cidade.**

Especificação operacional de 6 de outubro de 2026 para interfaces, conteúdo editorial e materiais da Central Praia. A marca é o guia confiável dos esportes de areia urbanos: ajuda o jogador a encontrar sua próxima quadra e ajuda a arena a transformar presença em demanda, com independência editorial.

Esta v1 transforma o DNA e o brandbook em regras reutilizáveis. **Não substitui o DNA nem representa uma nova aprovação do cliente, uma biblioteca já publicada no Figma ou uma certificação de acessibilidade.** Os exemplos de interface são demonstrativos; não comprovam preço, disponibilidade, avaliação, desempenho ou oferta comercial.

## 1. Fonte de verdade e alcance

| Camada | Origem e situação | Regra |
|---|---|---|
| Identidade | [DNA Criativo](../../human-output/dna/central-praia/resultado/DNA.md), [referência do brandbook v3](../../human-output/dna/central-praia/referencias/04-brandbook-figma-v3.md) e capítulo “Respiro e Escala” do [arquivo-fonte do brandbook](../../build_brandbook_svg.mjs) | Preservar as 13 cores, as quatro famílias, o território Areia Urbana, o símbolo limpo, seus mínimos e respiro, e a independência editorial. |
| Operação de marca | [Instruções de marca](../../human-output/dna/central-praia/CLAUDE.md) | Cada peça escolhe um destinatário e uma próxima ação. |
| Especificação desta v1 | Este manual, [tokens CSS](tokens.css), [tokens JSON](tokens.json) | Escalas, medidas, semântica de interface, componentes e estados são decisões derivadas para implementação. |
| Evidência calculada | [Auditoria de contraste](contrast-audit.json) | Compara 169 pares ordenados das cores opacas sRGB. Não avalia uma tela completa. |

A referência local registra o arquivo [Central Praia — Brandbook Areia Urbana v3](https://www.figma.com/design/kvqEdXuWUPzXqmzsvRE0Jf). O estado atual desse arquivo não foi verificado por esta entrega. Os nomes de variáveis e componentes existentes citados a seguir vêm desse registro.

**Já definido nas fontes:** estratégia, personalidade, voz, paleta, famílias e papéis tipográficos, fotografia, geometria, respiro e mínimos do símbolo. **Derivado nesta v1:** tamanhos e entrelinhas tipográficas, grid, espaçamento, raios, breakpoints, alvos, aliases, foco, estados, anatomias, recomendações de aplicação e critérios de implementação. Um ajuste na camada derivada não autoriza trocar a identidade.

## 2. Princípios de decisão

1. **Informação antes de efeito.** Modalidade, localização, condição e ação precisam ser encontráveis antes da intervenção editorial.
2. **Um destinatário por composição.** B2C organiza a escolha de onde jogar; B2B explica oferta, esforço e atribuição.
3. **A nota não se negocia.** Patrocínio, informação da arena e avaliação são campos diferentes.
4. **Estrutura urbana, energia de areia.** Grid firme, superfícies minerais, fotografia realista e acento quente concentrado.
5. **O dado carrega contexto.** Valor sem condição, horário sem data e nota sem método não estão completos.
6. **Reduzir esforço até a próxima ação.** Uma ação principal por módulo de decisão; ações secundárias com menor peso visual.

## 3. Cor

### 3.1 Paleta preservada

Nenhum HEX foi alterado. Os nomes técnicos removem acentos apenas nos tokens.

| Cor | HEX | Token CSS | Papel de marca |
|---|---|---|---|
| Cal | `#EAE3DC` | `--cp-cal` | Campo principal e respiro. |
| Concreto | `#C5BEB5` | `--cp-concreto` | Superfícies e módulos. |
| Cimento | `#A7A19A` | `--cp-cimento` | Separadores e apoio neutro. |
| Asfalto | `#0D0816` | `--cp-asfalto` | Títulos, tinta forte e planos de impacto. |
| Grafite | `#2B2730` | `--cp-grafite` | Superfícies escuras e texto. |
| Coral | `#D7474E` | `--cp-coral` | Acento principal padrão e ação. |
| Obra | `#DF7026` | `--cp-obra` | Alternativa de acento para oferta e movimento. |
| Sódio | `#F1B94E` | `--cp-sodio` | Dado raro, alerta e calor urbano. |
| Pink | `#F31F78` | `--cp-pink` | Intervenção cultural excepcional. |
| Corpo | `#17131D` | `--cp-corpo` | Leitura longa em fundo claro. |
| Apoio | `#514B58` | `--cp-apoio` | Texto secundário legível e contornos funcionais. |
| Legenda | `#746D78` | `--cp-legenda` | Uso restrito por contraste; não é o padrão de metadados pequenos. |
| Linha | `#B4ADA6` | `--cp-linha` | Separação decorativa entre áreas. |

Cal domina a composição; Asfalto organiza a hierarquia. Escolher **Coral ou Obra** como acento principal. Pink não é um terceiro CTA, e Sódio deve ter motivo informacional. Não usar todos os acentos em sequência só para preencher a paleta. Cores de feedback excepcionais não se tornam uma segunda direção decorativa.

### 3.2 Papéis de interface

| Alias | Contexto claro | Contexto escuro | Aplicação |
|---|---|---|---|
| `--cp-bg` | Cal | Asfalto | Fundo da área. |
| `--cp-surface` | Cal | Grafite | Superfície de leitura. |
| `--cp-surface-muted` | Concreto | Grafite | Agrupamento secundário. |
| `--cp-text` | Corpo | Cal | Texto funcional e parágrafos. |
| `--cp-text-strong` | Asfalto | Cal | Títulos e ênfase. |
| `--cp-text-muted` | Apoio | Concreto | Metadados, ajuda e legendas pequenas. |
| `--cp-border` | Linha | Apoio | Divisor decorativo. |
| `--cp-border-control` | Apoio | Concreto | Contorno identificável de campo ou controle. |
| `--cp-accent` | Coral | Coral | Ação primária; pode mudar para Obra no contexto. |
| `--cp-on-accent` | Asfalto | Asfalto | Texto e ícone sobre o acento. |
| `--cp-link` | Asfalto | Cal | Link com sublinhado em texto corrido. |
| `--cp-selected-bg` | Asfalto | Cal | Seleção explícita. |
| `--cp-selected-text` | Cal | Asfalto | Conteúdo selecionado. |

O atributo `data-cp-theme="dark"` define aliases para blocos escuros. Isso não declara que todo produto já tem modo escuro testado. `data-cp-accent="obra"` muda apenas acento e texto sobre acento. Para voltar de um bloco Obra a Coral, criar um novo contexto com o alias explicitamente em Coral.

### 3.3 Contrastes e restrições

A referência técnica usada é WCAG 2.2: texto normal precisa de 4,5:1; texto grande, de 3:1. Nesta v1, trate como grande apenas 24px regular ou 20px em peso 700 ou maior. A classificação foi feita antes de arredondar os resultados. [W3C — contraste de texto](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).

| Primeiro plano / fundo | Razão | Uso nesta v1 |
|---|---:|---|
| Asfalto / Cal | 15,53:1 | Títulos, links, ícones e texto. |
| Corpo / Cal | 14,40:1 | Corpo de leitura. |
| Apoio / Cal | 6,62:1 | Metadados, descrição e ajuda. |
| Apoio / Concreto | 4,57:1 | Texto secundário opaco; não reduzir opacidade. |
| Asfalto / Coral | 4,61:1 | Label e ícone do CTA. Margem pequena: não substituir a tinta nem usar transparência. |
| Corpo / Coral | 4,27:1 | Não usar em label de tamanho normal. |
| Cal / Coral | 3,37:1 | Somente título grande ou elemento gráfico adequado; proibido no label comum de botão. |
| Asfalto / Obra | 6,10:1 | Label e ícone em acento Obra. |
| Asfalto / Sódio | 11,09:1 | Aviso ou dado destacado. |
| Asfalto / Pink | 4,96:1 | Intervenção excepcional com texto normal opaco. |
| Legenda / Cal | 3,93:1 | Não usar em legenda pequena; reservar para texto grande ou elemento gráfico adequado. |
| Legenda / Concreto | 2,72:1 | Não usar como informação essencial. |
| Linha / Cal | 1,74:1 | Divisor decorativo; não pode ser o único contorno de campo. |
| Cimento / Cal | 2,01:1 | Divisor ou área neutra; não pode ser o único contorno de campo. |
| Coral / Concreto | 2,33:1 | Não usar sozinho para identificar controle ou ícone funcional. |
| Obra / Cal | 2,55:1 | Ação preenchida precisa de contorno Asfalto; ícone isolado não deve depender de Obra. |
| Cal / Asfalto | 15,53:1 | Leitura em bloco escuro. |
| Concreto / Asfalto | 10,73:1 | Metadados em bloco escuro. |

**Metadado pequeno usa Apoio, embora exista uma cor chamada Legenda no brandbook.** O nome primitivo é preservado; o alias funcional resolve o contraste. O mesmo vale para Linha e Cimento: continuam disponíveis, mas não recebem a responsabilidade de identificar inputs.

Quando o limite de um controle ou um gráfico é necessário para entendê-lo, buscar pelo menos 3:1 contra os fundos adjacentes. O contorno Apoio resolve campos claros; Asfalto resolve os botões com acento. Divisores apenas decorativos têm outro papel. [W3C — contraste não textual](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html).

**Método da auditoria:** canais RGB de 8 bits são normalizados e linearizados em sRGB; a luminância relativa pondera R, G e B por 0,2126, 0,7152 e 0,0722. A razão é `(Lmaior + 0,05) / (Lmenor + 0,05)`. A auditoria guarda valores sem arredondamento para decisão. [W3C — cálculo e luminância](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).

Os pares consideram cores opacas. Fotografia, mistura, sombras, transparências e impressão exigem avaliação própria. Nunca usar um overlay translúcido como garantia automática de leitura: preferir uma faixa opaca Cal ou Asfalto para informação essencial.

## 4. Tipografia

### 4.1 Quatro famílias, quatro responsabilidades

- **Archivo Expanded Black/ExtraBold:** estrutura, manchetes e chamadas de navegação. Usar as estáticas aprovadas com largura 125; não simular expansão por transformação horizontal.
- **Syne ExtraBold/Bold:** selos e frases editoriais curtas. Não assume a hierarquia estrutural nem o corpo.
- **Inter Tight:** leitura, interface, labels, ajuda e botões.
- **Martian Mono:** preço, data, horário, nota e metadados. Usar números tabulares quando disponíveis; sempre incluir unidade e rótulo.

O brandbook registra que as instâncias estáticas Archivo Expanded foram preparadas para seleção correta no Figma. Preservar os arquivos e nomes existentes. `tokens.css` só declara famílias; a biblioteca desta entrega carrega as quatro famílias por `@font-face` em [components.css](components.css), com os arquivos locais em `assets/fonts/`. Fallbacks evitam texto invisível, mas não equivalem à identidade final. Antes de aprovar uma exportação, confirmar que as fontes reais renderizaram.

### 4.2 Escala derivada

Valores em pixels com raiz padrão de 16px; o CSS fornece tamanhos em `rem`. O tamanho amplo entra a partir de 1024px. A hierarquia não depende só do tamanho: peso, família e espaço também a sustentam.

| Estilo/token | Família/peso | Compacto → amplo | Entrelinha | Uso |
|---|---|---:|---:|---|
| `display-xl` | Archivo 900 | 40 → 80 | 1,00 | Capa e abertura curta. |
| `display-lg` | Archivo 900 | 32 → 56 | 1,05 | Hero e título editorial. |
| `heading-1` | Archivo 800 | 28 → 40 | 1,10 | Título de página. |
| `heading-2` | Archivo 800 | 24 → 28 | 1,15 | Seção. |
| `heading-3` | Archivo 800 | 20 → 20 | 1,20 | Módulo e nome de arena. |
| `editorial` | Syne 800 | 28 → 40 | 1,05 | Intervenção de uma ou duas linhas. |
| `body-lg` | Inter Tight 400 | 18 → 20 | 1,50 | Introdução curta. |
| `body` | Inter Tight 400 | 16 → 16 | 1,50 | Corpo e campos de formulário. |
| `body-sm` | Inter Tight 400 | 14 → 14 | 1,50 | Ajuda, descrição secundária. |
| `label` | Inter Tight 600 | 16 → 16 | 1,25 | Botões e labels. |
| `data` | Martian Mono 500 | 14 → 14 | 1,50 | Dado contextual. |
| `data-lg` | Martian Mono 600 | 28 → 32 | 1,20 | Indicador com rótulo próximo. |
| `micro` | Martian Mono 500 | 12 → 12 | 1,50 | Classificação curta, nunca condição essencial. |

Tracking: display −0,035 a −0,01em; editorial −0,02em; corpo, labels e metadados 0. `data-lg` usa −0,02em. Os valores exatos estão nos tokens. Não comprimir títulos para caber; ajustar quebra, largura ou estilo.

**Regras de composição:** texto corrido entre 45 e 65 caracteres por linha quando houver espaço; um H1 lógico por página; níveis de título sequenciais; caixa alta reservada a chamadas e classificações curtas. Evitar Syne e Martian Mono em parágrafos longos. Permitir zoom e quebra de linha em labels; não esconder preço ou condição com reticências. O estilo micro de 12px não é licença para tornar termos comerciais pequenos.

## 5. Espaço, grid e forma

### 5.1 Escala de 4px

`0 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128`

| Relação | Espaço recomendado |
|---|---:|
| Ícone e label | 8px |
| Label e campo; campo e ajuda | 8px |
| Elementos muito relacionados | 12–16px |
| Conteúdo interno de módulos | 16px compacto / 24px amplo |
| Campos de um formulário | 24px |
| Grupos de informação | 32px |
| Blocos dentro de seção | 40–48px |
| Seções | 48px compacto / 80px amplo |
| Abertura editorial | 64–128px conforme formato |

Não forçar tamanho de fonte ou proporção de foto a múltiplos de quatro. A base organiza os espaços e dimensões funcionais.

### 5.2 Responsividade

| Faixa | Largura inicial | Colunas | Gutter | Margens mínimas |
|---|---:|---:|---:|---:|
| Compacta | 0px | 4 | 16px | 16px |
| Média | 600px | 8 | 24px | 24px |
| Ampla | 1024px | 12 | 24px | 40px |
| Grande | 1440px | 12 | 32px | 48px |

Container máximo: **1280px**, centralizado. A largura útil é o menor valor entre esse máximo e a janela menos as duas margens. Esses breakpoints são pontos de adaptação, não dispositivos fixos.

Em telas estreitas, converter comparações em sequência, manter informações essenciais antes da foto secundária e permitir que filtros quebrem de linha ou abram um painel rotulado. Não reduzir o corpo abaixo de 16px para salvar um layout. Ofertas ficam em uma coluna; em layouts amplos podem usar 8 colunas para conteúdo e 4 para ação. O grid editorial pode usar 7+5 ou 8+4, sem comprometer a ordem de leitura.

Tabelas realmente bidimensionais podem rolar em um contêiner próprio, com indicação e rótulo. O restante da página deve se reorganizar sem rolagem horizontal. Avaliar nomes longos de arenas, condições com duas linhas e filtros combinados.

### 5.3 Raios, linhas e profundidade

- **0px:** planos editoriais, fotografia, tabelas, selos e divisões estruturais.
- **4px:** botões, inputs e controles.
- **8px:** contêineres de módulos, avisos e diálogos.
- **1px:** linha padrão e contorno; **2px:** seleção e ênfase funcional; **4px:** marca editorial localizada.
- Sombras desligadas por padrão. Sobreposição deve ser entendida por superfície, borda, posição e foco.

Não usar pílulas arredondadas em toda a interface. Máscaras circulares só quando a forma tiver função, como avatar ou indicador de pessoa; não constituem um novo raio padrão.

## 6. Marca, fotografia e elementos gráficos

### 6.1 Símbolo

Usar os SVGs limpos de produção registrados em `referencias/logo/svg/limpo/`, na pasta superior do cliente, ou as cópias íntegras desses arquivos nos assets da entrega. A referência v3 descreve viewBox 512, traço 30, três traços abertos e quatro pontas visíveis. **Não redesenhar, preencher, expandir irregularmente ou usar o autotraço antigo.**

Variantes: Asfalto, Cal, Coral, Obra e `currentColor`. Preferir Asfalto em superfícies claras e Cal nas escuras. Não herdar acidentalmente uma cor de link, erro ou hover no símbolo.

O capítulo “Respiro e Escala” do brandbook define tamanho mínimo digital de **24px**, mínimo impresso de **8mm** e área de proteção mínima igual à **largura do pé**. No vetor limpo, isso corresponde à espessura de **30 unidades na geometria de 512**, medida para fora dos **limites visíveis do símbolo**, não da caixa do SVG. Para uma caixa renderizada de largura `S`, a unidade de proteção é `S × 30 / 512`; manter essa distância livre em cada lado do desenho visível. Em redução, usar somente o símbolo.

Recomendação adicional desta v1 para composições com muito conteúdo: preferir **32px ou mais**, com **48px** como referência confortável quando houver espaço. Essa recomendação não altera os mínimos existentes. Em tamanhos pequenos, verificar os vazios e as quatro pontas no dispositivo final. Se perder leitura, aumentar a marca; não engrossar ou simplificar o desenho.

O nome escrito ao lado do símbolo, quando não houver lockup oficial correspondente disponível, é identificação tipográfica de interface e deve ser tratado como composição derivada. Não declarar um novo logotipo oficial.

### 6.2 Fotografia

Selecionar pelo conteúdo visual, não só pela numeração da safra. A referência registra 56–66 como Areia Urbana, mas a inspeção das cópias locais encontrou divergências de luz e cena. O [inventário de ativos](assets/manifest.json) registra a seleção, os arquivos de origem e as limitações observadas. A direção permanece: concreto limpo, sombra aberta ou hora azul, areia legível e movimento plausível. As imagens ilustram a marca; não comprovam a situação atual de uma arena.

Proporções operacionais: **4:3** para arena/local; **3:2** ou **16:9** para matéria; **4:5** para publicação de feed; **9:16** para story. Esses formatos são presets internos desta v1, sujeitos ao canal de destino. Guardar o original, usar `object-fit: cover` com ponto focal consciente e conferir cada corte.

Preservar rosto, bola, raquete, dupla e direção do gesto. Nunca distorcer. Não usar grade dominante, resort genérico, pôr do sol rosa-roxo ou pose fitness como atalhos de marca. Fotografia gerada não pode comprovar estrutura, localização ou atividade real de uma arena; quando usada como ilustração, identificá-la como tal no contexto necessário.

Não colocar textos pequenos diretamente sobre foto. Preferir bloco opaco associado; título grande pode encostar visualmente na imagem sem perder leitura.

### 6.3 Ícones e grafismos

Ícones funcionais: 16, 20 ou 24px, traço de 2px, cap e join arredondados. Ícone de 16px complementa texto; botão de ícone mantém alvo de 48px e nome acessível. Não transformar pictogramas infantis de esporte na linguagem principal.

Grafismos derivam de marcação, rota, placar e sinalização, com linhas limpas e escala controlada. Usar número grande apenas com rótulo próximo. Selo deve classificar algo real — modalidade, conteúdo editorial ou publicidade — e nunca preencher um vazio.

## 7. Componentes e comportamento

Esta seção especifica o sistema completo. A biblioteca local [index.html](index.html) demonstra o conjunto, e [components.css](components.css) implementa a base de botões, campos, chips e avisos, com foco e carregamento das quatro famílias. As demais famílias abaixo são especificações de handoff; uma composição ilustrada na biblioteca não equivale a um componente de produto implementado.

### 7.1 Botão e link

**Anatomia:** label verbal; ícone opcional de 20px; gap 8px; altura mínima 48px; padding horizontal 20px; raio 4px; Inter Tight 16/600. Se o label quebrar, o botão cresce verticalmente. Versão compacta de 44px apenas onde o espaço exigir; não reduzir a área de acionamento de ícones.

| Variante | Aparência | Uso |
|---|---|---|
| Primária | Fundo Coral, texto Asfalto, contorno Asfalto de 1px | Próxima ação principal. |
| Secundária | Fundo Cal, texto e contorno Asfalto | Comparar, voltar ou abrir informação auxiliar. |
| Texto | Texto Asfalto; sublinhado quando em prosa | Navegação secundária. |
| Inversa | Fundo Cal e texto Asfalto em área escura | Ação clara em módulo de impacto. |
| Destrutiva | Contorno Asfalto, verbo explícito e consequência próxima | Exclusão ou cancelamento; cor sozinha não explica risco. |

**Estados:** default conforme variante; hover reforça sublinhado ou contorno interno sem mudar o HEX do acento; pressed aumenta a ênfase interna; focus-visible mostra o anel duplo; loading mantém largura e troca o label por ação em andamento; disabled usa Concreto/Apoio e bloqueia interação de verdade. Não baixar opacidade global para simular disabled. Só desabilitar quando houver motivo compreensível.

Links navegam; botões executam ações. Em HTML, usar os elementos corretos. Não criar `<div>` clicável. Se abrir WhatsApp ou outro destino, usar label explícito. Não rotular “Reservar” um fluxo que apenas inicia uma conversa sem confirmar reserva.

### 7.2 Campo, busca e seletor

**Anatomia:** label persistente, campo, ajuda opcional e erro textual associado. Altura mínima 48px, padding 16px horizontal/12px vertical, borda Apoio de 1px em fundo Cal e raio 4px. Texto 16px; placeholder em Apoio, nunca substituindo o label.

Estados: vazio, preenchido, hover, foco, inválido, carregando, desabilitado e somente leitura. Erro usa borda Asfalto mais espessa, ícone e mensagem concreta: “Informe o bairro para continuar.” Coral pode ser um detalhe complementar, nunca a única informação. Ao corrigir, preservar o que foi digitado. Ajuda e erro precisam ter vínculo programático com o campo.

Busca B2C deve explicar o que aceita: bairro, nome da arena ou modalidade. Mostrar filtros ativos, quantidade de resultados real e ação “Limpar filtros”. Quando a contagem ainda não foi obtida, informar carregamento, sem exibir zero como resultado. Selects nativos são uma opção válida; componentes customizados precisam preservar teclado e semântica.

### 7.3 Filtros, chips e categorias

Chip de filtro é controle, com alvo 48px, texto 14–16px e seleção evidente. Selecionado: Asfalto/Cal mais marca de seleção; não selecionado: fundo Cal, contorno Apoio. A ação de remover filtro tem nome que inclui o valor removido.

Badge é rótulo não interativo: padding 4px/8px, raio 0, Martian Mono 12px, Apoio sobre Cal ou Asfalto sobre Concreto. Não dar aparência de botão a informação estática. Se for interativo, aplicar a anatomia de filtro.

“Patrocinado” deve aparecer próximo à identificação do item, em tamanho legível e com espaço próprio. “Verificado” só pode existir com processo, escopo e evidência registrados; não usar como decoração de uma proposta visual.

### 7.4 Item de arena

**Ordem de leitura B2C:** nome → localização → modalidades → informação operacional disponível → reputação contextual → ação. Foto 4:3 opcional, grande o suficiente para orientar; no compacto pode vir antes do texto. Padding 16/24px, gap 16px, raio máximo 8px, sem sombra.

Campos reais podem incluir endereço, preço com condição, data/horário, acessibilidade, aula ou day use. Se a informação não existe, usar “Não informado” ou omitir com contexto, sem inventar zeros. Não assumir que arena cadastrada aceita reserva pela Central Praia.

Nota deve vir com quantidade de avaliações e acesso ao método. Sem base suficiente, escrever “Sem avaliações”, sem criar estrelas ilustrativas junto de uma arena real. Patrocínio é um badge separado da reputação. Se a foto for apenas referência criativa, rotular “Imagem ilustrativa”.

Não tornar o card inteiro um link que contém botões conflitantes. Preferir título como link principal e ações independentes com nomes claros. Layout em lista é bem-vindo para comparação; não obrigar tudo a virar card.

### 7.5 Preço, horário e oferta

Valor em Martian Mono; rótulo e condição em Inter Tight. A unidade vem junto: por pessoa, por quadra, por hora ou outra condição comprovada. Datas usam formato local compreensível; o fuso deve ser explícito quando o contexto permitir dúvida. Disponibilidade expirada não permanece acionável.

Uma oferta deve ter modalidade, data, janela de horário, preço/condição, origem da informação e ação real. “Consultar disponibilidade” é melhor que afirmar uma vaga sem integração ou confirmação atual. A atualização pertence ao dado, com fonte e momento quando relevantes.

Exemplo de estrutura, **sem dados comerciais**: `[modalidade] · [data] · [horário]` / `[preço e condição confirmados]` / `Consultar disponibilidade`.

### 7.6 Navegação e tabs

Cabeçalho identifica a Central Praia, oferece navegação curta e destaca a ação adequada à audiência. Jornada B2B precisa ser identificada como “Para arenas”; não misturar captação B2B no CTA principal da descoberta B2C.

Página atual usa indicação visual e `aria-current="page"`. Tabs representam painéis da mesma área; implementar roles, estado selecionado e navegação por setas quando o padrão de tabs for usado. Links para páginas diferentes continuam links, mesmo que se pareçam com abas. No compacto, menu tem label, estado expandido e foco administrado.

### 7.7 Avisos, validação e estados de sistema

| Estado | Aparência | Conteúdo necessário |
|---|---|---|
| Informação | Cal/Corpo, contorno Apoio, ícone informativo | O que mudou e a próxima ação, se houver. |
| Sucesso | Superfície neutra, marca de confirmação, título “Concluído” específico | Qual ação foi concluída; somente após confirmação real. |
| Atenção | Sódio/Asfalto com ícone e título | Condição que exige cuidado e como resolver. |
| Erro | Superfície neutra, contorno forte, ícone e título explícito | O que falhou, o que foi preservado e como tentar de novo. |
| Vazio | Texto claro, sem gráfico inventado | Por que está vazio e uma ação útil. |
| Carregando | Rótulo da ação e indicador discreto | Estado temporário; conteúdo anterior preservado quando possível. |

A marca não adiciona verde ou vermelho novos para depender de convenções cromáticas. Título, ícone, posição e texto explicam o estado. Um toast não deve ser o único lugar de um erro que exige ação; manter a mensagem no contexto e anunciar mudanças com a semântica apropriada.

Exemplos de copy: “Não encontramos arenas com esses filtros. Limpe um filtro para ampliar a busca.” / “Não foi possível carregar os horários. Tente novamente.” / “Informações salvas.” O último só aparece depois de salvar de fato.

### 7.8 Tabela e indicadores B2B

Tabela tem título, período e origem dos dados, cabeçalhos semânticos, alinhamento consistente e ordenação identificável. Texto alinha à esquerda; quantidades comparáveis podem alinhar à direita. Usar Martian Mono para valores e Linha apenas como separador. Controles de ordenação continuam com contraste e alvo adequados.

Indicador precisa de nome, valor, unidade, período e método de comparação. “—” significa ausente/indisponível com explicação; “0” significa zero medido. Diferenciar visualização, contato, reserva e receita; uma métrica não substitui outra. Não transformar cliques em ocupação sem atribuição comprovada.

Exemplo de estrutura, **sem números reais**: `Contatos atribuídos` / `[valor]` / `[período]` / `Como medimos`. Free, Pro e Plus seguem o DNA; nenhuma nova tarifa, comissão, benefício contratual ou prazo é estabelecido por este sistema.

### 7.9 Gráficos

Preferir rótulos diretos, poucos dados por gráfico e explicação breve. Asfalto é a série principal; Coral pode destacar uma série em fundo Cal. Se precisar distinguir séries, combinar marcadores, padrões ou estilos de linha e nomes, em vez de acrescentar acentos aleatórios.

Não usar Linha ou Cimento como traço essencial de uma série sobre Cal. Grade decorativa pode usar Linha. Não depender de tooltip por hover para entregar um valor necessário; disponibilizar resumo e tabela equivalentes. Em destaque Coral, texto continua em Asfalto.

### 7.10 Diálogo e painel

Contêiner Cal, raio 8px, borda funcional e espaçamento 24px; título claro, conteúdo curto e ações explícitas. Ao abrir, mover foco para um elemento apropriado; mantê-lo dentro do diálogo modal; permitir fechar por mecanismo visível e pelo teclado quando adequado; devolver foco ao acionador. Conteúdo que não couber deve rolar dentro do painel sem ocultar o título e a ação de fechar.

Só pedir confirmação para ações com consequência que justifique a interrupção. Explicar o objeto e a consequência no texto. Nenhuma sombra substitui a gestão correta de foco e plano de fundo.

## 8. Foco, movimento e acessibilidade

O padrão desta v1 é um anel duplo: **2px Cal + 2px Asfalto**, total externo de 4px. Ele usa os dois extremos minerais para manter uma borda perceptível em superfícies claras e escuras. Não cortar esse anel com overflow ou encobri-lo sob elementos fixos. O contraste Cal/Asfalto é 15,53:1. A exigência de foco visível permanece independente da cor de hover. [W3C — foco visível](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html).

A área de toque padrão desta v1 é 48×48px, com versão compacta de 44px. É uma decisão de conforto do sistema; não confundir com o mínimo de 24×24px e as exceções do critério AA de tamanho do alvo. [W3C — tamanho mínimo do alvo](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).

Implementação de referência para o foco:

```css
.componente:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: var(--cp-focus-shadow);
}
@media (forced-colors: active) {
  .componente:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }
}
```

`tokens.css` entrega o valor do anel; a base de controles em `components.css` aplica foco na biblioteca demonstrável. Ao reutilizar apenas os tokens, incorporar o comportamento aos controles reais. O contorno transparente do exemplo reserva um fallback para modos de cores forçadas, onde sombras podem não aparecer.

Movimento serve para explicar mudança. Durações derivadas: 120ms para respostas curtas; 180ms para transição comum; 240ms para painel. Curva `cubic-bezier(0.2, 0, 0, 1)`. Evitar parallax, carrossel automático e texto em movimento. Com preferência por movimento reduzido, remover transições não essenciais; os tokens de duração passam a zero. Não depender da animação para comunicar carregamento.

Antes de colocar uma interface em produção, verificar teclado, ordem de leitura, nomes acessíveis, labels, mensagens de erro, zoom, reflow, foco, alvos, leitores de tela e contraste sobre o conteúdo efetivo. Os tokens ajudam a implementação; não substituem essa avaliação.

## 9. Padrões de página e voz

| Decisão | B2C · jogador | B2B · arena |
|---|---|---|
| Tom | Amigo experiente, acolhedor e útil. | Parceiro comercial prático e transparente. |
| Pergunta principal | Onde e como posso jogar? | Como minha presença gera demanda? |
| Ordem | Descobrir → comparar → conferir condição → agir. | Entender oferta → conhecer esforço e condição → atualizar → medir. |
| Conteúdo essencial | Modalidade, localização, preço, horário, nível e acesso. | Página, ofertas, atribuição, período, condição e próximos passos. |
| CTA | Ver arenas; comparar opções; consultar horários; encontrar aula. | Reivindicar página; atualizar informações; publicar horário vago; medir resultado. |
| Evidência | Fonte, atualização, avaliação e método. | Origem do contato, definição de métrica e resultado confirmado. |

**Página de descoberta:** título útil, busca, filtros, resultados comparáveis e caminho para detalhe. **Página da arena:** identificação, informações práticas, ofertas confirmadas, reputação, conteúdo identificado e ação. **Área da arena:** resumo do período, qualidade da página, ofertas, contatos atribuídos e ação para resolver pendências. As três usam a mesma marca; a informação muda conforme a jornada.

Em conteúdo editorial: um assunto, um gesto visual forte, uma próxima ação. Archivo informa; Syne intervém; Inter Tight explica; Martian Mono contextualiza. Usar dados próximos do contexto. Não escrever “imperdível”, “revolucionário”, “experiência única” ou “melhor arena” sem base. Nunca prometer ocupação ou receita sem mecanismo, período e medição.

Copy de ação é curta e explícita. Evitar “Saiba mais” quando for possível dizer “Ver horários” ou “Conhecer o Pro”. Em erro, dizer o que aconteceu e o que fazer. Em condição comercial, manter preço, comissão, prazo e atribuição próximos da ação, quando existirem e estiverem confirmados.

## 10. Implementação e organização

### 10.1 Uso dos arquivos

- **`DESIGN-SYSTEM.md`:** comportamento, regras, origem e limites desta v1.
- **`tokens.css`:** custom properties prontas para aplicação em CSS, com aliases claros/escuros e medidas responsivas; não contém componentes completos nem `@font-face`.
- **[`components.css`](components.css):** carrega as quatro famílias locais e implementa a base de botões, campos, chips e avisos, incluindo foco. Carregar depois de `tokens.css`.
- **[`index.html`](index.html):** biblioteca local demonstrável para consulta visual e inspeção de estados; não é um produto conectado a reservas, avaliações ou gestão de arenas. As demais famílias do manual permanecem especificadas para implementação.
- **`tokens.json`:** manifesto próprio, com primitivas, referências, valores resolvidos e especificações de componente. Não foi validado como formato de importação de nenhuma ferramenta externa.
- **`contrast-audit.json`:** cores, luminâncias, pares e resultados dos critérios; valores de razão guardados com precisão completa.

Exemplo mínimo de consumo:

```css
.pagina {
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: var(--cp-font-body);
}
.acao-principal {
  min-height: var(--cp-control-height);
  padding: var(--cp-space-12) var(--cp-space-20);
  background: var(--cp-accent);
  color: var(--cp-on-accent);
  border: var(--cp-border-width) solid var(--cp-asfalto);
  border-radius: var(--cp-radius-sm);
  font: 600 1rem/1.25 var(--cp-font-body);
}
```

Usar aliases semânticos no componente e primitivas apenas na definição desses papéis ou em aplicações de marca justificadas. Não trocar `--cp-on-accent` por `--cp-text`: Corpo sobre Coral não passa o contraste de texto normal.

Breakpoints estão documentados em pixels. Custom properties nativas não podem definir diretamente o limite de uma media query; `tokens.css` inclui os limites literais. Espaços e tipos em `rem` acompanham a raiz de texto; bordas e raios permanecem em pixels nesta v1.

### 10.2 Mapeamento sugerido para Figma

Preservar a coleção `Central Praia` e seus 13 nomes registrados: `Base/cal`, `Base/concreto`, `Base/cimento`, `Tinta/asfalto`, `Tinta/grafite`, `Acento/coral`, `Acento/obra`, `Acento/sodio`, `Sinal/pink`, `Texto/corpo`, `Texto/apoio`, `Texto/legenda`, `Linha/fina`.

Criar, em uma implementação futura, uma camada semântica de interface que aponte para essas primitivas: `UI/Fundo`, `UI/Texto`, `UI/Texto apoio`, `UI/Contorno controle`, `UI/Ação` e `UI/Sobre ação`. Não duplicar nem renomear as cores existentes para resolver o contraste.

Nomes propostos de componentes: `Ação/Botão`, `Formulário/Campo`, `Filtro/Opção`, `Conteúdo/Arena`, `Dado/Preço`, `Dado/Indicador`, `Sinal/Badge`, `Feedback/Aviso`, `Navegação/Item`, `Sobreposição/Diálogo`. Variantes devem refletir propósito, estado, tamanho e contexto. O símbolo existente permanece `Marca / Símbolo` conforme registro v3.

Essa organização é uma especificação de handoff, não uma declaração de que esses componentes já foram criados ou publicados na ferramenta.

## 11. Critério de entrega

Uma peça está pronta para revisão quando:

- O destinatário principal e a próxima ação estão claros.
- Os 13 HEX e as quatro famílias foram preservados, e as fontes reais carregaram.
- A composição tem um acento dominante e o grid permanece legível no formato final.
- Preço, horário, nota, status e resultado têm fonte; exemplos estão rotulados.
- Publicidade está identificada sem se confundir com avaliação.
- Fotos preservam proporção, contexto e gesto; ilustração não é prova de arena real.
- Botões e campos têm estados, foco, labels e alvos adequados.
- Texto pequeno usa os pares liberados; os controles não dependem de Linha/Cimento para serem identificados.
- O conteúdo sobrevive a nomes longos, dado ausente, erro, carregamento e telas estreitas.
- Os testes realizados e as pendências são registrados com precisão; não se declara conformidade integral a partir desta auditoria de cores.

**Verificado nesta especificação:** preservação literal da paleta; estrutura dos arquivos de tokens; cálculo dos 169 pares sRGB. **Biblioteca entregue:** exemplos locais em `index.html` e base de botões, campos, chips e avisos em `components.css`. **Depende de implementação e avaliação no produto de destino:** demais famílias de componentes, integração com dados reais, importação no Figma, desempenho de fontes, navegação assistiva e conformidade completa de uma interface.

A regra-mãe continua a do DNA: escolher o que torna a rota mais clara sem tirar a energia da cena.