Palumen. O nosso próprio site, medido no telemóvel.
Informação do projeto
- Setor
- Estúdio de sites, design e marketing
- Ano
- 2026
- Serviços
- Entregáveis
- Site PT/EN, Casos de estudo, Pedido de proposta, llms.txt, Manual da marca
- Setor
- Estúdio de sites, design e marketing
- Ano
- 2026
- Serviços
- Entregáveis
- Site PT/EN, Casos de estudo, Pedido de proposta, llms.txt, Manual da marca
Desenhámos e programámos o nosso próprio site com três regras: uma letra só, movimento que se pode desligar, e medido no telemóvel antes de ir para o ar.
Um site em português e em inglês, com os casos, os serviços, o pedido de proposta e um resumo em texto para assistentes de IA. A mesma equipa desenhou e programou tudo.
Tipografia
Uma letra só.
O site usa uma família de letra, a Geist, e a Geist Mono para as etiquetas e os números. Não há itálicos. Com uma família só, a hierarquia faz-se com tamanho, cor e espaço.
Os tamanhos estão escritos no manual da marca, num ficheiro de tokens que o código lê: do título da página inicial, que vai de 44 a 112 px conforme a largura do ecrã, à legenda de 13 px. Cada tamanho cresce com o ecrã sem saltos, e nenhum é inventado numa página.
Movimento
Movimento que se pode desligar.
Na página inicial, a cena do caso abre das margens até à largura toda à medida que se desce. É CSS ligado ao scroll: não há JavaScript a contar píxeis, a caixa tem a largura final desde o primeiro frame e só o recorte muda, por isso a página não salta.
Quem pede menos movimento ao sistema operativo vê a cena já no sítio, os títulos sem subir e as imagens sem paralaxe. Os vídeos e as folhas que balançam têm um botão de pausa, e a pausa vale para as páginas seguintes.
Não usamos GSAP, Lenis nem Three.js. A única biblioteca de animação é o Motion, e só chega ao abrir o menu do telemóvel.
Medição
Medido antes de lançar.
Medimos o site no Lighthouse em telemóvel, com o perfil por defeito (ecrã pequeno, processador quatro vezes mais lento e uma rede 4G lenta simulada), três corridas por página, sobre o build de produção, antes de lançar. Conta a mediana. As quatro páginas medidas são a inicial, a dos serviços, a do pedido de proposta e o caso da Líquen.
Lighthouse 12, telemóvel, mediana de três corridas: desempenho entre 96 e 97 nas quatro páginas, e 100 em acessibilidade, 100 em boas práticas e 100 em SEO em todas. (22 de outubro de 2026)
Nas mesmas corridas: a maior pintura (LCP) entre 2,4 e 2,6 s, o tempo de bloqueio (TBT) entre 85 e 128 ms e um deslocamento do layout (CLS) de 0. Servidas por HTTP/2, como na Vercel, as mesmas páginas têm a LCP entre 1,8 e 2,3 s. (22 de outubro de 2026)
axe-core 4.11, com as regras WCAG 2.2 AA e as boas práticas, a 1440, 390 e 360 px de largura: 0 violações em 12 páginas, seis em português e seis em inglês (as quatro medidas, a lista de trabalho e este caso). (22 de outubro de 2026)
Build de produção: 0 KB de GSAP, Lenis ou Three.js. No primeiro carregamento destas páginas não chega nenhuma biblioteca de animação; o Motion (43 KB em gzip) só se descarrega ao abrir o menu. (22 de outubro de 2026)
O que ainda não sabemos fica marcado no código. O build de produção esconde-o, e um script percorre todas as páginas do mapa do site e conta as marcas que chegam ao ar: tem de dar zero.