Ver o site

Versão 1.0 · Matrículas 2027

Design System
Time Araújo

Referência de cores, tipografia, espaçamento, componentes e uso da marca. A paleta foi amostrada diretamente dos pixels das duas logos: símbolo e marca completa.

Princípios

Movimento

Formas curvas e contínuas, como os arcos do símbolo. Cantos arredondados em tudo.

Acolhimento

Base de tons quentes (cacau e creme) em vez de preto e cinza. Linguagem próxima e direta.

Energia

O âmbar é reservado para o que exige ação: matrícula, WhatsApp, destaques.

1. Paleta de cores

Cada família nasce de um elemento da logo. A cor de origem amostrada está indicada; os demais tons foram derivados para cobrir fundos, textos e estados.

Símbolo do Time Araújo
  • Figura · #773C0C → Cacau 600
  • Arco esquerdo · #F0890A → Âmbar 500
  • Arco inferior · #7AB1B8 → Céu 400
  • Arco direito · #116B72 → Petróleo 600

Marrom Cacau

Primária · figura e wordmark da logo · origem #773C0C

Laranja Âmbar

Destaque · arco esquerdo · origem #F0890A

Azul Petróleo

Secundária · arco direito · origem #116B72

Azul Céu

Auxiliar · arco inferior · origem #7AB1B8

Neutros quentes

Fundos e divisores

Tokens semânticos

Componentes usam apenas estes nomes. Para trocar a identidade, altere o mapeamento em src/styles/tokens.css.

TokenValorUso
--color-bgcremeFundo da página
--color-bg-altareiaSeções alternadas
--color-surfacebrancoCards e formulários
--color-darkcacau-900Hero, CTA final
--color-textcacau-900Texto principal
--color-text-muted#6b5443Texto secundário
--color-primarycacau-600Botão primário, seção Matrícula
--color-accentambar-500CTA principal, destaques
--color-accent-textambar-700Âmbar como texto sobre fundo claro
--color-secondarypetroleo-600Ações de apoio, bairros, rítmica
--color-softceu-400Grafismos e ilustrações
--color-focuspetroleo-500Anel de foco

Proporção de uso

2. Tipografia

Aa

Outfit

Títulos, números, botões. Geométrica e arredondada, conversa com o wordmark da logo. Pesos 500 a 900.

Aa

DM Sans

Corpo de texto, formulários, rótulos. Alta legibilidade em telas pequenas. Pesos 400, 500 e 700.

--text-heroOutfit 900clamp(6rem, 11vw, 10rem)Ano da campanha no hero

2027

--text-3xlOutfit 800clamp(3rem, 7vw, 6rem)Títulos de impacto (Matrícula, CTA)

Sua vaga no time

--text-2xlOutfit 800clamp(2.25rem, 4.4vw, 3.75rem)H2 de seção

Um time em movimento

--text-xlOutfit 700clamp(1.5rem, 2.2vw, 1.875rem)H3, títulos de card

Ginástica Artística

--text-lgDM Sans 5001.25remLead, parágrafo de abertura

Todo movimento é uma conquista.

--text-baseDM Sans 4001.0625remCorpo de texto

Aulas para crianças a partir de 3 anos e adultos.

--text-smDM Sans 400/7000.875remEndereços, legendas, chips

Avenida Meriti, 2090, Vila da Penha

--text-xsDM Sans 700 · caixa alta0.75remEyebrows e rótulos

MATRÍCULAS 2027

3. Espaço, forma e elevação

Espaçamento (base 4px)

--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
--space-996px

Seções usam --section-y: clamp(80px, 10vw, 144px). Container máximo de 1240px com margem lateral de 24px (16px no celular).

Raios

--radius-sm8px · Campos
--radius-md16px · Cards, galeria
--radius-lg28px · Cards de destaque
--radius-pill999px · Botões, badges, chips

Sombras

--shadow-smCards em repouso
--shadow-mdHover de cards
--shadow-lgCard do hero, formulário

4. Componentes

Garantir vaga 2027 Como funciona Ver no mapa Ver unidades

Botões

  • Âmbar (.btn--accent): ação principal da página. Texto Cacau 900. Um por bloco.
  • Cacau (.btn--primary): ação primária em fundo claro.
  • Petróleo (.btn--secondary): ações de apoio e filtros.
  • Contorno (.btn--ghost): ação secundária sobre vídeo ou fundo escuro.
  • Formato pílula, altura mínima 48px (58px no tamanho --lg). Hover: sobe 2px e troca o tom. Foco: anel Petróleo 500 de 3px.
Ginástica Artística Ginástica Rítmica Para alunos da escola

Badges e chips

  • Badges identificam modalidade e restrição de acesso. Âmbar para artística, petróleo para rítmica, cacau claro para informativos.
  • Chips filtram listas. Estado ativo com aria-pressed="true", fundo Cacau 600.
Ginástica Artística

Núcleo Time Araújo

Vila da Penha

Avenida Meriti, 2090, Vila da Penha · Rio de Janeiro, RJ

Ver no mapa

Card de unidade

  • Fundo branco, borda --color-border, raio 16px, padding 24px.
  • Ordem fixa: badges, nome (Outfit 700), bairro (Petróleo), endereço (texto secundário), link.
  • Hover: sobe 3px e ganha --shadow-md.
Modalidade

Preencha: nome do aluno.

Campos de formulário

  • Rótulo visível acima do campo, sempre. Nada de placeholder como rótulo.
  • Altura mínima 48px, borda 1.5px, foco com borda Petróleo e halo Petróleo 100.
  • Opções de rádio viram cartões clicáveis; o selecionado ganha borda Cacau.
  • Erros aparecem acima do botão, em texto, com role="alert".

Matrículas 2027 · Abertas

2027

Destaque de campanha

  • Selo com ponto pulsante em âmbar: status da campanha.
  • O ano usa Outfit 900 com gradiente Âmbar 500 → Âmbar 300 → Céu 300. Uso exclusivo sobre fundo escuro e apenas em textos grandes.
  • Sempre acompanhe de CTA âmbar para o WhatsApp.

5. Uso da marca

Marca completa do Time Araújo
Marca completa: cabeçalho, rodapé, materiais institucionais.
Símbolo do Time Araújo
Símbolo: favicon, avatar, espaços quadrados pequenos.
Marca completa sobre fundo escuro, dentro de placa branca
Sobre fundo escuro ou vídeo: sempre dentro de uma placa branca arredondada.

Faça

  • Mantenha a proporção original.
  • Use fundo branco ou creme atrás da logo.
  • Reserve em volta um respiro de pelo menos a altura do círculo da cabeça.
  • Largura mínima: 64px (símbolo 24px).

Evite

  • Distorcer, girar ou recortar o símbolo.
  • Recolorir a logo ou aplicá-la sobre fotos sem placa.
  • Sombras fortes, contornos ou efeitos.

Grafismo: os três arcos

Os arcos âmbar, céu e petróleo do símbolo viram um elemento decorativo (componente BrandRing). Use grande e parcialmente cortado em fundos escuros, com opacidade de 20% a 55%, ou pequeno ao lado de fotos. Nunca junto da logo, para não parecer uma segunda marca.

6. Acessibilidade (WCAG 2.1 AA)

Razões de contraste calculadas a partir dos valores hexadecimais. Texto normal exige 4.5:1; texto grande (24px, ou 18.7px em negrito) exige 3:1.

CombinaçãoExemploRazãoNível
Texto sobre creme Matrícula 2027 16.30:1 AAA
Texto secundário sobre creme Matrícula 2027 6.62:1 AA
Branco sobre Cacau 600 Matrícula 2027 8.62:1 AAA
Cacau 900 sobre Âmbar 500 Matrícula 2027 6.86:1 AA
Âmbar 500 sobre Cacau 900 Matrícula 2027 6.86:1 AA
Âmbar 700 sobre creme Matrícula 2027 4.69:1 AA
Branco sobre Petróleo 600 Matrícula 2027 6.23:1 AA
Petróleo 600 sobre branco Matrícula 2027 6.23:1 AA
Branco sobre Âmbar 500 Matrícula 2027 2.53:1 Evitar
Branco sobre Céu 400 Matrícula 2027 2.38:1 Evitar
  • Texto branco nunca vai sobre âmbar ou céu. No botão âmbar o texto é Cacau 900.
  • Âmbar como texto em fundo claro usa o tom 700.
  • Alvos de toque com no mínimo 44×44px. Foco visível em todos os elementos interativos.
  • O vídeo do hero é mudo, decorativo (aria-hidden), tem botão de pausa e para sozinho com prefers-reduced-motion.
  • Hierarquia semântica: um h1 por página, seções com aria-labelledby.