Guia de identidade visual · v1.0

Design System

Fundamentos, tokens e componentes da Arena 388, derivados do logotipo oficial (preto + verde-limão) e das peças publicadas no Instagram @arena_388. Tudo aqui está implementado em theme.css.

Paleta base: logotipoStack: HTML · CSS · JSAtualizado: set/2026

01Marca

O logotipo combina o nome ARENA em sans geométrica espaçada com o numeral 388 em traço contínuo e cantos arredondados, que remete a pista e movimento. A assinatura “Sua arena de movimento.” destaca a palavra “movimento” em verde.

Principal · sobre preto

Monocromático · sobre lima

Sobre branco · 388 em verde escuro

Versão compacta

Cabeçalho, avatares, favicons. Sem assinatura.

Regras
  • Área de proteção: altura de um loop do “8” em todos os lados (tracejado).
  • Largura mínima: 80px digital (compacto) · 140px (completo, assinatura legível).
  • Não distorcer, contornar, aplicar sombra ou trocar a cor do “388” por outra fora da paleta.

02Cores

A paleta nasce do logotipo: fundo preto absoluto e o verde-limão do “388”. O Lima Neon é a versão luminosa usada nos cartazes para chamadas e brilho; o Lima 388 é o tom institucional do logotipo. Proporção recomendada: 70% preto/grafite · 20% branco · 10% lima.

Marca

Primária
Lima 388#AECE2E · rgb(174 206 46)

Cor do logotipo. Marca, ícones, numerais.

Destaque
Lima Neon#C8F53A · rgb(200 245 58)

CTAs, destaques, brilho, faixa de anúncio.

Apoio
Lima Profundo#56700F · rgb(86 112 15)

Verde para texto/logo sobre fundo branco.

Mascote
Verde Jacaré#5E7A2B · rgb(94 122 43)

Ilustrações e peças do Jacarena.

Neutros

Base
Preto#000000

Fundo principal.

Superfície 1
Carbono#0A0B08

Seções alternadas.

Superfície 2
Grafite#14160F

Cards, formulários, painéis.

Superfície 3
Aço#1F2218

Chips e estados elevados.

Borda
Fumaça#3A3E30

Divisores sólidos.

Texto 2
Névoa#B4B9A8

Texto secundário.

Texto 1
Branco#FFFFFF

Títulos e texto principal.

Linha
Linhargba(255,255,255,.12)

Bordas sutis sobre escuro.

Funcionais

Aquáticas
Piscina#22C3E6

Uso pontual em conteúdos de natação.

Alerta
Vermelho#FF4D4D

Erros de formulário, indicador “ao vivo”.

Contraste (WCAG 2.1)

Lima Neon sobre Preto16,6:1AAA
Preto sobre Lima Neon16,6:1AAA
Lima 388 sobre Preto11,7:1AAA
Névoa sobre Grafite9,1:1AAA
Lima Profundo sobre Branco5,6:1AA
Lima 388 sobre Branco — evitar para texto1,8:1Falha

03Tipografia

Quatro famílias do Google Fonts, com papéis bem definidos. A combinação reproduz a linguagem dos cartazes: títulos condensados em caixa alta, destaques em itálico “pincelado” e texto corrido limpo.

Display · Anton 400

Títulos H1–H3, numerais. Caixa alta, entrelinha 0,9–0,95.

Vem pra Arena!
Destaque · Barlow Condensed 700–900

Eyebrows, botões, tags, faixas. Itálico 900 para chamadas.

Muito além da diversão!
Texto · Barlow 400–700

Parágrafos, formulários, listas. 16–18px, entrelinha 1,55.

Lutas, piscina aquecida, quadras, areia, dança e bem-estar para todas as idades.
Marca · Montserrat 500–600

Exclusiva do logotipo e do cartão VIP. Espaçamento amplo.

ARENA · MOVIMENTO

Escala

TokenUsoTamanhoFamília
display-xlH1 do heroclamp(3.6rem, 8.6vw, 8.4rem)Anton
display-lH2 de seçãoclamp(2.8rem, 6vw, 5.6rem)Anton
display-mH3 de card1.5–2remAnton
labelEyebrow, botões0.95–1.05rem · tracking .06–.18emBarlow Condensed
bodyParágrafos1–1.15remBarlow
captionNotas, legendas0.8remBarlow

04Espaço, forma e luz

Grade de 1360px com margem fluida --space: clamp(1.25rem, 5vw, 5rem). Seções respiram entre 5rem e 8rem. Cantos arredondados ecoam as curvas do “388”.

Espaçamento (base 4px)
8
16
24
32
48
64
96
Raios
s · 8px
m · 16px
l · 28px
pill
Brilho neon · --glow

Hover de CTAs, foco de campos, moldura do vídeo.

Movimento · --ease

cubic-bezier(.2,.7,.2,1) · 250ms para interações, 800ms para entradas. Animações respeitam prefers-reduced-motion. Elementos-assinatura: feixes de luz diagonais, faixa inclinada (-1,5°), leve rotação em molduras (±2,5°).

05Componentes

Peças reutilizáveis presentes em index.html. As classes abaixo são as mesmas do site.

Botões

Primário SecundárioSobre lima

Rótulos e tags

Eyebrow de seção

Piscina aquecidaEm breve

Cards e blocos

Card de modalidade

  • Quando04 a 22 de janeiro
  • Horário13h às 17h30

Info tile

Colônia de Férias 202704 a 22 de janeiro →

Chip flutuante do hero

Wellhub

Parceria

Formulário

06Mascote · Jacarena

Jacarena de braços cruzados em quadra de basquete

O Jacarena é o jacaré oficial da Arena 388: uniforme preto com filetes lima, camisa 388 e tênis preto com cadarço lima. A pose de braços cruzados é a assinatura de confiança usada no site; a pose acenando serve para boas-vindas.

Faça

  • Sobre fundos escuros, com luz verde de contorno.
  • Mantenha o uniforme e as proporções da ficha oficial.
  • Use em Colônia de Férias, eventos e redes.

Evite

  • Recolorir a pele ou o uniforme.
  • Colocar texto sobre o rosto.
  • Usar como substituto do logotipo.
Ficha de consistência do Jacarena

07Tom de voz

Próximo, energético e de bairro — fala com a família da Vila da Penha. Frases curtas, imperativas e com exclamação, como nos cartazes.

Energia

Vem pra Arena!

Pertencimento

Aqui você é VIP.

Orgulho local

A Vila da Penha merece!

08Tokens CSS

Fonte única da verdade: bloco :root de theme.css. Para uma nova unidade ou campanha, altere apenas estes valores.

:root {
  --lime-388:  #AECE2E;  /* logotipo */
  --lime-neon: #C8F53A;  /* destaque / CTA */
  --lime-deep: #56700F;  /* verde sobre branco */
  --jacare:    #5E7A2B;  /* mascote */
  --black: #000000;  --carbon: #0A0B08;  --graphite: #14160F;  --steel: #1F2218;
  --smoke: #3A3E30;  --fog: #B4B9A8;     --white: #FFFFFF;     --line: rgba(255,255,255,.12);
  --pool: #22C3E6;   --danger: #FF4D4D;
  --display: 'Anton';  --condensed: 'Barlow Condensed';  --sans: 'Barlow';  --brand-font: 'Montserrat';
  --space: clamp(1.25rem, 5vw, 5rem);  --width: 1360px;
  --radius-s: 8px;  --radius-m: 16px;  --radius-l: 28px;
  --glow: 0 0 0 1px rgba(200,245,58,.35), 0 0 32px rgba(200,245,58,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
}