Uma base para criar experiências com a leveza de um dia na areia. Cores, componentes e imagens que já fazem parte da nova Central Praia, reunidos para o próximo projeto.
Consolidado da homologação em 22 de outubro de 2026.
Cor que convida. Interface que orienta.
01 · Reconhecimento
A marca continua aqui.
Logo original, Archivo Expanded e Inter Tight. A personalidade vem da paleta quente, das imagens e da composição.
02 · Utilidade
O jogo começa na busca.
Arena, localização e próxima ação aparecem primeiro. O visual ajuda a escolher e a seguir.
03 · Consistência
Cada cor tem seu lugar.
Creme dá espaço, ameixa organiza, goiaba chama para agir e amarelo destaca. Sem verde na interface.
Como usar esta versão. Os fundamentos vêm das três páginas de homologação. Regras novas, como estados de feedback e iconização, estão identificadas como convenções desta consolidação. A versão 2.0 aguarda aprovação final; o site atual não foi alterado.
01
Fundamentos
Uma marca que a gente reconhece.
Preserve o desenho original do símbolo e a assinatura usada na homologação.
CENTRAL PRAIA
Assinatura sobre fundo claro
CENTRAL PRAIA
Assinatura sobre ameixa
Proteção e escala
Reserve ao redor da assinatura pelo menos metade da largura do símbolo. Na interface, use o símbolo com 36 px no celular e 43 px no desktop. A assinatura digital acompanha Archivo Expanded 900.
O que preservar
Não redesenhe, estique, rotacione ou troque o símbolo por um ícone de localização. Os SVGs mantêm suas cores originais. O verde natural de fotografias não faz parte da paleta de interface.
Clique em uma cor para copiar o valor. Use os tokens semânticos ao construir telas.
Distribuição
Creme e branco ocupam a maior parte da tela. Areia separa grupos; ameixa sustenta textos e seções de maior contraste. Goiaba e amarelo destacam ações. Lavanda e blush entram em pequenos blocos de apoio.
Ação e destaque
Goiaba com texto branco para ações principais. Amarelo com texto ameixa para destaques e campanhas. Em um mesmo bloco, escolha uma ação dominante. Links sobre areia usam goiaba forte.
Combinações medidas · contraste WCAG
Texto / fundo
Razão
Uso
Ameixa / creme
13.69:1
Texto principal
Ameixa suave / creme
6.30:1
Texto de apoio
Branco / goiaba
4.86:1
Ação principal
Ameixa / amarelo
9.38:1
Ação em destaque
Goiaba forte / areia
5.28:1
Link sobre areia
Goiaba / areia
4.02:1
Não usar em texto pequeno
Borda de controle / creme
3.09:1
Contorno de controle
Linhas suaves separam superfícies. Controles usam --cp-border-control, com contraste mínimo de 3:1. Não use a linha suave como única borda de um campo.
03
Fundamentos
As fontes que já são nossas.
As famílias foram mantidas. A hierarquia acompanha as páginas da homologação.
Archivo Expanded · 800 / 900
Bora pra areia?
Títulos, nomes de arenas e chamadas. Peso 900 para a abertura; 800 para títulos de cards. Caixa normal no conteúdo, respeitando a assinatura da marca.
Inter Tight · 400 / 600 / 700
Encontre uma arena perto de você e combine o próximo jogo.
Textos, botões, campos e navegação. Corpo de 16 px no celular, entrelinha de 1,5 a 1,6 e largura de leitura até 65 caracteres.
Martian Mono · 500
18:30 · SÃO PAULO QUADRA 02
Horários, dados e rótulos curtos. 11 a 14 px para informações auxiliares. Nunca para parágrafos ou botões longos.
Syne · 600 / 700 · Uso editorial reservado
Histórias de quem vive a areia.
A família permanece no acervo da marca. Use em conteúdo editorial; as telas de busca, perfil e eventos priorizam Archivo e Inter Tight.
Escala para novas telas
Papel
Celular → desktop
Peso / altura
Hero da home
32 → 66 px, fluido
900 / 0,98
Hero de evento
36 → 68 px, fluido
900 / 0,98
Título de seção
26 → 40 px, fluido
900 / 1,05
Título de card
22 px
800 / 1,1
Corpo
16 → 18 px
400 / 1,5 a 1,6
Botão e label
15 → 16 px
600 ou 700 / 1,3
Apoio
14 px
400 / 1,5
Fontes locais em WOFF2, com font-display: swap. Carregue só os pesos usados na tela. As licenças acompanham o kit.
04
Fundamentos
Espaço para respirar.
Base de 4 px, geometria simples e hierarquia feita com tamanho, cor e distância.
4 px
8 px
12 px
16 px
20 px
24 px
32 px
40 px
48 px
64 px
80 px
96 px
4 pxBotões, campos e chips
8 pxCards, fotos e painéis
999 pxAtalho curto e avatar
Grid e larguras
Conteúdo até 1280 px. Margens laterais de 16 px no celular e 32 px a partir de 768 px. Cards em uma coluna, duas a partir de 640 px e três a partir de 1024 px. Gaps de 16 ou 24 px.
Profundidade
Superfícies se separam por cor e borda de 1 px, sem sombra decorativa. Modal usa fundo ameixa com 55% de opacidade. Camadas: sticky 20, dropdown 30, modal 40 e toast 50.
O conteúdo decide a quebra. No celular, foto, identidade e ação seguem em sequência. A barra de ações não pode cobrir o formulário nem o foco do teclado.
48 px é o alvo padrão de interação; 44 px é o mínimo. Use minmax(0, 1fr), min-width: 0 e margens de segurança em ações fixas. Zoom de 200% deve preservar leitura e uso.
05
Biblioteca · Convenção desta versão
Ícones que ajudam a agir.
Lucide, com traço de 2 px, grade de 24 px e pontas arredondadas. Cor herdada do texto.
Nenhum ícone encontrado. Tente “mapa”, “horário” ou o nome em inglês.
Escala e significado
16 px em metadados, 20 px dentro de botões e 24 px em ações isoladas. A área de toque continua com 48 px. Use sempre o mesmo desenho para a mesma ação: map-pin para local, calendar-days para data e users para grupo.
Esportes e marcas
volleyball identifica vôlei de praia. Beach tennis e futevôlei usam o nome por extenso; não adapte um pictograma de outro esporte. WhatsApp e Instagram exigem seus assets oficiais, sem improvisar logos com Lucide.
Clique em um ícone para baixar seu SVG. Botões só com ícone recebem nome acessível. Ícones decorativos usam aria-hidden="true". SVGs oficiais e licença ISC estão no kit. Catálogo Lucide
06
Componentes
Uma ação clara por vez.
O texto diz o que vai acontecer. Experimente os estados e copie o exemplo.
Goiaba para buscar, enviar ou confirmar. Amarelo para uma conversão destacada em campanha. Contorno para voltar, revisar e abrir informações. Link para navegação complementar. Limite as ações principais ao contexto atual.
Estado de envio
Desabilite novos envios enquanto a operação estiver em andamento, mantenha a largura e anuncie o resultado. aria-busy sinaliza o processamento. A mensagem de sucesso depende da confirmação do serviço.
Reserve a área do conteúdo. O carregamento não deve deslocar a página.
Use role="status" para retornos e role="alert" apenas para erros urgentes. Mensagens importantes ficam na tela; toast complementa uma ação simples e pode ser fechado.
09
Componentes de produto
A arena vem primeiro.
Foto, nome, localização e modalidade orientam a escolha. A diferença entre planos aparece na primeira dobra.
Reconhecer: fotografia representativa e nome da unidade.
Localizar: bairro e cidade, com distância apenas se calculada.
Comparar: modalidades e estrutura confirmadas.
Decidir: uma ação, como conhecer ou pedir horário.
Nota exige origem, escala e quantidade de avaliações. Publicidade recebe rótulo visível. Nenhum plano compra nota, verificação ou disponibilidade.
Free · informar
Arena Campo Belo
Nome, localização, modalidades, estrutura e contato. Apresentação direta para encontrar as informações básicas.
Sem agenda inventada, presença simulada ou selo comprado.
Free e Pro aparecem na homologação. Plus mantém a direção do protótipo de comunidade: fotos de pessoas, presença e intenção de jogar, somente com dados reais e consentimento quando implementado.
10
Componentes
Saiba onde está e como voltar.
Menus curtos, contexto visível e ações que funcionam com teclado e toque.
Breadcrumb
Navegação de seção
No celular
A navegação pode rolar horizontalmente, com a opção ativa visível. Preserve o rótulo das ações; não esconda informação essencial atrás de hover. Menus expansíveis informam aria-expanded.
Modal e galeria
Use dialog nativo. Ao abrir, mova o foco para dentro; Escape fecha; ao sair, devolva o foco ao botão de origem. Foto ampliada preserva proporção e recebe descrição útil.
Exemplo de pergunta frequente
O componente usa details e summary nativos, com área de toque de pelo menos 48 px. A resposta fica no fluxo de leitura e não depende de JavaScript.
11
Padrões
Uma base, três intenções.
As páginas atuais mostram como o sistema se adapta à descoberta, ao perfil da arena e ao pedido de evento.
Descoberta
Busca direta, seleção de modalidade, cards e destaque comercial.
A busca direta aparece sem exigir cadastro. O quiz usa uma faixa horizontal no desktop e uma sequência curta no celular. Preserve escolhas ao voltar. Sem resultado, ofereça retirar filtros.
Campanha e evento
Arena patrocinada tem rótulo “Publicidade” e identificação da unidade. Se houver rotação, ofereça pausa, pare no foco e respeite movimento reduzido. Eventos deixam claro o público, o espaço e o pedido de orçamento.
As imagens de referência registram a homologação em 22/10/2026. Seus números, notas e condições não são tokens nem regras de negócio do design system.
12
Linguagem visual
Um pouco de areia na interface.
Objetos 3D com textura suave, luz quente e cores da marca. Cada imagem entra em um contexto de UX.
Imagem de abertura
Convide para o próximo jogo.
Na hero, a ilustração acompanha o título e a busca. Reserve uma área própria e mantenha o CTA fora da imagem. No celular, reduza o desenho para que a pessoa veja a ação cedo.
Materiais foscos e táteis, volumes arredondados, sombra suave, perspectiva consistente e fundo transparente quando o arquivo tiver canal alfa. Use goiaba, amarelo, ameixa e lavanda. Preserve respiro em torno dos objetos.
Limites
Não inclua palavras dentro da imagem. Não acrescente verde, superfícies cromadas, neon ou excesso de brilho. Ilustração não substitui a foto de uma arena nem comprova uma estrutura disponível.
A fotografia ajuda o jogador a reconhecer o espaço e imaginar a experiência. A origem acompanha o arquivo.
Convivência
O jogo também acontece fora da quadra.
Mostre pessoas em situações naturais, mesas, circulação e contexto do espaço. Evite multidões inseridas sem escala ou promessas de instalações que a arena não possui.
Acervo de prévia · composição
16:9 · card de arena4:3 · evento e galeria1:1 · editorial e apoio
Recorte e entrega
Priorize rostos, ação e elementos que identificam o local. Defina object-position por foto. Sirva WebP em 480 e 960 px quando houver resolução suficiente. Use dimensões explícitas, lazy loading abaixo da dobra e prioridade alta só para a imagem principal.
Origem e uso
Fotos reais, composições e imagens editoriais têm categorias distintas no manifesto. As cenas recriadas de Campo Belo são material de prévia e não registram eventos realizados. As imagens v2 da homologação estão catalogadas como acervo publicado, com origem de captura a confirmar.
14
Comportamento
Movimento com uma razão.
Reforçar a ação, revelar uma mudança e orientar o olhar. A pessoa mantém o controle.
180 ms · ease-out
Feedback curto, sem interromper.
Experimente a entrada e a saída. A preferência por movimento reduzido elimina o deslocamento.
Durações e limites
Uso
Tempo
Regra
Pressionar, selecionar, fechar
120 ms
Resposta imediata
Trocar estado, abrir conteúdo
180 ms
Transform e opacity
Entrada de painel
260 ms
Sem bloquear interação
Movimento reduzido
Sem deslocamento
Feedback textual preservado
Critérios para cada nova tela
Teclado alcança todas as ações, com foco visível.
Texto normal ≥ 4,5:1; títulos grandes e controles ≥ 3:1.
Uma h1, títulos em ordem e idioma pt-BR.
Alvo de toque de 48 px, mínimo de 44 px.
Erros explicam o que corrigir; sucesso tem confirmação real.
Zoom de 200%, celular e movimento reduzido preservam a tarefa.
Imagens decorativas têm alt vazio; imagens de produto têm descrição útil.
Revisão com leitor de tela e aparelho físico antes de produção.
15
Conteúdo
Fale como quem conhece a areia.
Português direto, próximo e útil. O jogador entende a próxima ação sem precisar interpretar uma promessa.
Microcopy para reutilizar
Contexto
Texto recomendado
Evitar
Busca
Encontrar arenas
Explorar experiências incríveis
Reserva por contato
Pedir horário no WhatsApp
Reserva confirmada, sem confirmação
Evento
Pedir orçamento
Garantir minha festa
Sem resultado
Tente outro bairro ou retire um filtro.
Nenhum resultado, sem próxima ação
Erro
Informe uma quantidade inteira, a partir de 1.
Valor inválido
Dados ausentes
Consulte com a arena
Horário, preço ou nota inventados
“Bora pra areia?” cabe em uma chamada. Instruções e erros usam frases completas. Evite superlativos, gíria excessiva e travessão. Modalidade, bairro e nome da arena têm mais valor que adjetivos genéricos.
16
Entrega
Os arquivos estão aqui.
Baixe por contexto ou leve o kit completo. Os nomes e a origem estão no manifesto de assets.
Se faltar um estado, proponha a extensão no sistema.
Confira mobile, teclado, contraste e dados antes da entrega.
Versionamento
2.0.0-rc.1 · 22/10/2026. Consolidação da paleta quente e dos padrões já implementados. Mudança de cor, fonte ou comportamento compartilhado exige revisão do sistema. Ajuste local de conteúdo não cria um novo token.
O que mudou em relação ao sistema anterior?
A paleta de interface passa a ser creme, areia, ameixa, goiaba e amarelo, com lavanda e blush como apoio. Símbolo e famílias tipográficas permanecem. Entram ilustrações 3D por contexto, padrões de descoberta e eventos, iconização Lucide e estados de interface sem verde. O visual antigo em cinza e preto não orienta as novas telas.
O que é consolidação e o que é ampliação?
Tokens-base, geometria, fontes, botões, cards, perfil Pro e evento foram conferidos na homologação. Mapeamento Lucide, estados completos de formulário, feedback sem verde, escala complementar e governança são convenções desta versão. O Plus é uma direção de protótipo, ainda sem implementação confirmada na homologação.
Guia local de revisão. Publicação em domínio e integração ao repositório de produção não fazem parte desta entrega. Evidências de validação estão em validation.json.
CENTRAL
CENTRAL
