Folhagem verde-clara iluminada

Design system

Cores

Laranja é a marca; vinho organiza os títulos. Branco e preto completam a paleta. Texto branco pequeno sobre laranja não passa em contraste: use-o apenas em tamanhos grandes ou em negrito ≥ 19px.

  • Laranja#ED7102Marca · header, rodapé, overlay
  • Vinho#8A264FTítulos e divisórias
  • Verde#00745DFundos de publicação
  • Lima#C1D83FDestaques, Fellows
  • Violeta#443D91Ilustração
  • Vermelho#E74124Autor e data
  • Azul#1D1E55Texto sobre lima, foco
  • Fundo#EFF5CFPáginas internas
  • Pêssego#FAD4B3Fundo editorial da home

Tipografia

Transformar
o futuro

Seiva Display Medium (opsz 24 · peso 550) · 80/83 desktop · 48/50 mobile · caixa alta

Mais recentes

Seiva Display Medium · 52/54

Chamada em duas ou três linhas

Card · Seiva Display Medium · 27/30

Articular caminhos para um desenvolvimento justo.

Texto · Seiva Regular (opsz 12 · peso 400) · 20/26 · mínimo 15–16px reais · um único arquivo variável para todos os estilos

Escala fluida

Acima de tablet tudo é proporcional à largura da tela: fontes, margens laterais, paddings, imagens e gaps. Cada medida do layout de 1920 vira calc(N × 100vw / 1920), então a composição é a mesma em 1280, 1920 ou 2560.

Abaixo de 1024px a base é o layout mobile de 540, limitada para não crescer demais em tablets. Textos de leitura têm piso de 15–16px e todo alvo de toque tem pelo menos 44px. A altura da tela só entra em ajustes finos de blocos específicos.

  1. 15Ajuste
  2. 30Interno · padrão
  3. 60Editorial · default
  4. 90Respiro
  5. 120Amplo

Container e grid

1800 = 12 × 122,5 + 11 × 30. Spans de 2 / 4 / 6 / 8 colunas → 275 / 580 / 885 / 1190. Coluna de leitura de 733 fica fora do grid. Margem editorial 60 (30 no mobile); imagens podem sangrar até 30 (15 no mobile).

Transição de página

Da rede ao próximo olhar: cerca de 3 segundos de movimento sutil, sem contar a espera da rede. A página recua, o símbolo do logo aparece de leve, só com parte dos pixels acesos, e uma nuvem de pixels o preenche de branco; a primeira área fechada revela, no centro da tela, a foto do topo da página seguinte, que cresce junto com a máscara até o lugar exato da abertura. Se o clique foi num card, é a foto do card que vai para o centro e cresce. Só o símbolo se anima — o lettering nunca é deformado.

  1. 01

    Origem

    0 ms

    Página inteira no enquadramento original.

  2. 02

    Encolher

    0–180 ms

    A origem recua; o overlay laranja permanece.

  3. 03

    Linhas formando rede

    120–440 ms

    O símbolo é traçado rapidamente; até 3 nós nos encontros.

  4. 04

    Primeiro circuito fechado

    420–560 ms

    A primeira área fechada revela a foto do topo da página seguinte.

  5. 05

    Expandir com swing

    560–1080 ms

    Máscara e foto crescem juntas, com pequeno overshoot.

  6. 06

    Hero destino

    1080–1200 ms

    A foto casa com o retângulo real do hero; o overlay sai e o conteúdo sobe em fade.

Com “reduzir movimento” ativado no sistema, a troca vira um fade curto, sem encolher nem balançar. Se a navegação falhar ou for cancelada, a página volta ao estado original e o link segue normalmente.

Ver a transição

Imagens: máscara e parallax

Cada imagem entra por um recorte a cada vez que passa pela tela: descendo, o recorte abre de baixo para cima e a foto desce até se encaixar; subindo, tudo acontece ao contrário. Na rolagem, a foto se desloca um pouco no sentido do movimento e volta ao lugar quando para. Nos cards, o mouse faz a foto crescer com um leve balanço e o símbolo se desenha por cima em pixels brancos — sutil porque só 20% dos pixels acendem, nunca por opacidade.

Banner da home em shader

O topo da home é uma floresta vista de cima, gerada ao vivo: vídeos aéreos tocam ocultos e cada quadro é convertido pelo navegador (WebGL) para a paleta da marca — lima e violeta em pixels pontilhados, com linhas lilás que descem como nuvens e trocas de cena por ondas de pixels. A ordem das cenas muda a cada visita.

Para quem usa: um poster pontilhado aparece na hora enquanto o vídeo carrega; o efeito pausa fora da tela e com a aba em segundo plano; sem WebGL ou com "reduzir movimento", fica só a imagem estática. No celular o bloco ocupa a tela inteira.

Laboratório do shader da floresta

Ajustes do shader

Teste visual: os ajustes aparecem ao vivo. "Salvar" guarda esta configuração para todos que abrirem esta página. A home não muda.

Hover em nuvem de pixels

Todo link de texto ganha uma linha de 2 px na cor do texto que surge em nuvens de pixels agrupadas e aleatórias até ficar sólida; em textos que quebram, uma linha por linha, do tamanho exato do texto. Ao sair, a nuvem se desfaz. O foco por teclado mostra o mesmo efeito.

Nos ícones das redes no rodapé, a nuvem preenche o fundo quadrado em branco e o ícone passa a laranja — o alvo de toque tem pelo menos 44 px.

Passe o mouse aqui

Movimento e menus

Textos e rolagem. Títulos e blocos de texto aparecem a cada passagem — de baixo para cima ao descer, de cima para baixo ao subir. A rolagem é suave com mouse e teclado (no toque, nativa), e as setas e links internos deslizam até o destino.

Menu. No desktop, passar o mouse sobre Institucional ou Iniciativas faz o header crescer e revelar os subitens; clicar no item abre a página principal da seção. No toque, o primeiro toque abre e o segundo navega; rolar, tocar fora ou escolher um subitem fecha. No mobile, a tela laranja abre como uma onda que nasce no botão. Esc fecha; o foco fica dentro do menu aberto.

Navegação e medição

O swup 4 intercepta os links internos, baixa a próxima página em segundo plano e troca só o conteúdo principal, mantendo header, menu e o overlay da transição. Antes da troca, tudo da página anterior é desligado; depois, cada módulo é iniciado uma única vez. Se a rede falhar, o link segue como navegação normal — e o site funciona por completo sem JavaScript.

GA4 com page_view manual: um envio inicial e um por navegação concluída, com URL, título e referrer da nova página. Prefetch, cancelamento ou erro não contam. Consentimento negado por padrão.

Arquivo MCP

Style guide completo, princípios de usabilidade, variáveis de design e instruções para replicar o banner em shader, a transição com swup 4, a revelação das imagens, os hovers, os menus e a medição.

Baixar arapyau-design-system.mcp.json JSON · ~15 KB

Acompanhe nossos projetos

Junte-se a nós na construção de um futuro mais justo e sustentável. Sua participação é fundamental para transformar realidades e promover mudanças significativas.

Cadastre-se para receber as novidades do Arapyaú (abre em nova aba)