Da vontade
à quadra.
Amigo experiente. Informação comparável para escolher modalidade, lugar e como participar.
Encontrar → Comparar → Jogar
CENTRAL
PRAIA
AREIA URBANAPRAIA
DESIGN SYSTEM / 1.0
DA MARCA À EXPERIÊNCIA
CLAREZA
NA ROTA.
ENERGIA
NA AREIA.
Um sistema para encontrar, comparar
e fazer a cena acontecer.
CIDADE + GESTO + AREIA02 / Princípios
Uma marca. Duas rotas.
A confiança organiza o sistema. Cada experiência escolhe um público e uma próxima ação.
Da vontade
Da presença
à ocupação.
Parceiro prático. Página atualizada, ofertas claras e origem dos contatos visível.
Atualizar → Publicar → Medir
UTILIDADE
Informação concreta antes do adjetivo. Faça a decisão ficar mais fácil.
INDEPENDÊNCIA
Plano comercial não altera nota. Conteúdo pago recebe identificação visível.
PRECISÃO
Não preencher lacunas com dados inventados. Mostrar origem, condição e atualização.
Identidade preservada do DNA. Escalas, componentes e regras de interface são decisões de aplicação desta versão 1.0.
03 / Marca
Reconhecimento sem ruído.
O símbolo é o vetor limpo aprovado. A geometria não muda entre aplicações.
XX = ESPESSURA DO TRAÇO / 30 UN. NO VETOR
Três traços.
Quatro pontas.
Preserve curvas, espessura uniforme e terminais redondos. Use o arquivo oficial; nunca reconstrua o monograma com letras.
24 PX
Mínimo digital do símbolo.
8 MM
Mínimo impresso; conferir prova.
Respiro mínimo documentado: largura do pé. Nesta biblioteca, X corresponde à espessura do traço. Aplique X livre ao redor dos limites visíveis.
Asfalto / CalCal / Asfalto
Coral / Cal
Obra / AsfaltoSem rotação, contorno adicional, preenchimento interno, efeito ou distorção. Em redução, use apenas o símbolo.
04 / Cor
A cor tem uma função.
Cal domina. Asfalto estrutura. Coral ou Obra conduzem a ação; Pink aparece em exceções culturais.
Proporção ilustrativa, sem cota rígida. Um único acento dominante por composição.
4,61:1 / AÇÃO
Asfalto sobre Coral. Passa para texto normal. Não trocar por Corpo.
6,62:1 / APOIO
Apoio sobre Cal. Use em legendas pequenas e informação secundária.
3,37:1 / RESTRIÇÃO
Cal sobre Coral: apenas texto grande. Não usar em rótulos de botão.
Legenda sobre Cal e Linha como único contorno de campo têm contraste insuficiente. Use Apoio para texto pequeno e para borda funcional. Clique em uma cor para copiar seu código.
05 / Tipografia
Quatro vozes. Um ritmo.
A função define a família. Títulos estruturam; intervenções dão personalidade; texto e dados resolvem.
ARCHIVO EXPANDED / 800–900
ENCONTRE
SUA QUADRA.
SUA QUADRA.
Títulos, navegação estrutural e chamadas de capa.
SYNE / 700–800
Te encontro
na areia.
na areia.
Selos e frases curtas. Nunca texto corrido.
INTER TIGHT / 400–700
Veja modalidade, estrutura
e como participar.
e como participar.
Corpo, interface, instruções e botões.
MARTIAN MONO / 400–500
DIA / HORA
R$ — / PESSOA
R$ — / PESSOA
Preço, data e metadados com rótulo e contexto.
80 / 80Capa desktop40 / 44Título28 / 32,2Seção16 / 24Corpo12 / 18Metadado
Tamanhos em px / entrelinha, base de produto. Capa mobile: 40/40; título mobile: 28/30,8. Composições editoriais podem ampliar títulos, sem comprimir ou esticar as letras.
06 / Composição
Estrutura firme. Respiro real.
Alinhe a informação no grid e use espaço para separar decisões. Bordas substituem sombras decorativas.
123456789101112
Título + contexto
8 colunas
8 colunas
Ação
4 colunas
4 colunas
MOBILE / < 600
4 colunas · margens 16 px · calha 16 px. Empilhe conteúdo e preserve a ordem de leitura.
TABLET / 600–1023
8 colunas · margens 24 px · calha 24 px. Duas colunas quando a leitura permitir.
DESKTOP / ≥ 1024
12 colunas · margens 40 px · calha 24 px. Conteúdo até 1280 px; em telas ≥ 1440 px, margem 48 e calha 32.
4812162432486496BASE DE 4 PX
8–16 dentro de controles; 24–32 entre grupos; 48–96 entre seções. A proximidade revela a relação.
CANTOS E SUPERFÍCIES
0 px em blocos editoriais; 4 px em controles; 8 px em diálogo. Sem sombra de decoração.
Grid assimétrico não significa alinhamento solto. Dados ficam próximos de seus rótulos; a foto ganha escala e corte intencional.
07 / Componentes / Ações
Uma ação principal por contexto.
Botões claros, estados reconhecíveis e verbos específicos. Os controles abaixo podem ser testados.
Busca
Local
Data
Hora
Filtros
Salvar
Avançar
Ajuda
ÍCONE FUNCIONAL
Grade 24 × 24 px, traço 2 px, terminais redondos. Ícone sozinho precisa de nome acessível e alvo de 48 × 48 px.
ESTADO SEM AMBIGUIDADE
Hover reforça contorno; pressionado usa contorno interno; desabilitado mantém leitura e explica a condição quando necessário.
Use link para navegação e botão para ações locais. Estes botões são demonstrações: não enviam dados nem realizam reservas.
08 / Componentes / Entrada
O campo explica o próximo passo.
Rótulo sempre visível. Instrução antes do erro. Uma mensagem orienta como corrigir.
ESTADOS DOCUMENTADOS
FILTRO MULTISSELEÇÃO
Nenhuma modalidade selecionada.
09 / Componentes / Informação
A confiança também é componente.
O usuário precisa distinguir o que foi informado, o que foi avaliado e o que é publicidade.
Publicidade
Destaque pago
Visível junto ao conteúdo desde a primeira impressão. Plano não compra avaliação.
Ainda não avaliada
Sem nota Central Praia
Não converter ausência em zero, estrelas vazias ou nota estimada.
Informado pela arena
Origem do dado
Mostrar data de atualização quando conhecida. Não chamar de “verificado” sem método.
FICHA ILUSTRATIVA / SEM OFERTA REAL
Nome da arena
Bairro e cidade · informar quando confirmados
ModalidadeNível informado
PREÇOConsultar arena
HORÁRIOSA confirmar
Ainda não avaliada pela Central Praia.
01 / IDENTIFICAR
Nome, localização e modalidade primeiro.
02 / COMPARAR
Preço com condição, horário com data, nível e estrutura.
03 / AGIR
Ver detalhes; chamar ou reservar somente com destino e disponibilidade confirmados.
10 / Padrão / B2C
Descobrir. Comparar. Entrar em quadra.
A interface ajuda quem joga a tomar uma decisão concreta, sem transformar o guia em um mural de anúncios.
central praiaGuia de arenasAulasDay useExemplo de aplicaçãoENCONTRE SEU PRÓXIMO JOGOSeu esporte.
Seu esporte.
Sua cidade.
Sua próxima quadra.
Compare modalidades, estrutura e como participar.
Demonstração visual, sem catálogo conectado.
1. Onde jogar2. O que oferece3. Como participar
NAVEGAÇÃO
Rotas simples e rótulos previsíveis. Busca e filtros permanecem ao alcance.
RESULTADO
Lista comparável. A imagem informa o lugar; fotografia conceitual não representa uma arena real.
MOBILE
Busca em linha própria, filtros com quebra e ficha em coluna única. Sem rolagem lateral obrigatória.
11 / Padrão / B2B
A página trabalha pela arena.
A mesma identidade com informação operacional: completar a página, publicar oferta e entender a origem da demanda.
ÁREA DA ARENA / EXEMPLOTem horário vago?
Tem horário vago?
Coloque na rota.
Organize sua página e dê ao jogador as informações de que ele precisa.
ESTADO INICIAL / SEM DADOSComece pelo que
Comece pelo que
ajuda a decidir.
- Nome e localização
- Modalidades e estrutura
- Contato e condições de acesso
FREE / PRESENÇA
Página útil, reivindicação e informação atualizada.
PRO / ATIVAÇÃO
Destaque identificado, ofertas e atribuição do que veio pelo guia.
PLUS / INTEGRAÇÃO
Evolução de relacionamento, check-in, reservas e pagamentos conforme disponibilidade do produto.
Arquitetura de mensagens definida no DNA, sem afirmar disponibilidade atual de recursos. Exibir preços, comissões e condições apenas após confirmação. A nota continua independente do plano.
12 / Fotografia
A cidade entra no enquadramento.
Gesto real, areia legível e contexto urbano. A imagem aproxima da prática e ajuda a orientar.
LUZ
Priorizar sombra aberta ou hora azul e contraste controlado. Evitar pôr do sol como atalho emocional.
CORTE
Preservar rosto, bola, raquete e direção do movimento. Recortar com intenção; nunca deformar.
ORIGEM
Imagens do acervo de marca geradas por IA. Uso conceitual; não comprovam instalações ou eventos reais.
Aderência é avaliada foto a foto. O inventário registra limitações do acervo; futuras captações devem seguir integralmente a direção do DNA.
13 / Aplicações / Conteúdo
Uma linguagem além da interface.
A hierarquia se mantém no feed, nos stories e em materiais da arena: assunto, contexto, ação.
ONDE JOGARSÁBADO
SÁBADO
PEDE AREIA.
Compare as opções.
Escolha sua próxima quadra.
Escolha sua próxima quadra.
CENTRAL PRAIA / GUIAA dúvida
A dúvida
é onde.
Ver arenas
Formato muda.
Sistema fica.
FEED / 4:5
Prancha-base 1080 × 1350 px. Margem de 64 px; um título, uma imagem e uma ação.
STORY / 9:16
Prancha-base 1080 × 1920 px. Reservar 250 px no topo e rodapé como margem conservadora; conferir a sobreposição na plataforma.
SELO EDITORIAL
Syne em frases curtas. “Te encontro na areia” é assinatura; “arena verificada” exige verificação real.
Modelos de composição, sem dados comerciais. As simulações ao lado preservam a proporção de cada formato.
14 / Acessibilidade / Entrega
Consistência que pode ser usada.
A biblioteca entrega decisões de uso, componentes demonstráveis e arquivos para a próxima aplicação.
A experiência precisa
continuar clara.
- Texto normal com contraste ≥ 4,5:1.
- Foco visível e ordem de teclado lógica.
- Alvos de 48 px; compacto de 44 px.
- Estados descritos com texto e ícone.
- Movimento curto e funcional: 120–240 ms.
- Respeitar preferência por movimento reduzido.
Contraste validado para os pares documentados. Acessibilidade completa precisa ser testada na aplicação final.
FONTE DE VERDADE
DNA aprovado + registro do brandbook v3 de 06/10/2026. Identidade preservada; componentes e medidas são a proposta operacional v1.
CRITÉRIO DE ENTREGA
Revisar público, utilidade, ação, transparência, contraste, dados e corte fotográfico antes de publicar cada aplicação.
Referências técnicas: W3C · contraste de texto e contraste de controles. Fontes oficiais: Google Fonts; licenças no pacote.