Kayzen Web
O site da agência é a sua primeira referência: é auditado com mais rigor do que os dos clientes.
- Ano
- 2026
- Conceção
- melhoria contínua
- Stack
- React · Vite · Tailwind · TypeScript · Vercel
- Estratégia
- Design system
- Desenvolvimento
- SEO
- Acessibilidade
- Redação
- acessibilidade Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- rotas pré-renderizadas no build
- 79
- projetos documentados, cada um com o seu estudo de caso
- 37
O que era preciso resolver.
O contexto
kayzen-lyon.com é a montra da agência: 79 rotas pré-renderizadas, das quais 21 páginas de serviço, 4 páginas geográficas, uma tabela de preços pública, um changelog, uma página de stack técnica e um design system aberto.
A restrição
Uma agência web é avaliada pelo seu próprio site antes de o ser pelos seus trabalhos. O mínimo defeito — uma pontuação de desempenho mediana, um contraste insuficiente, um dado estruturado inválido — torna-se um argumento contra ela. O site tinha, portanto, de resistir à inspeção técnica de um potencial cliente exigente.
A resposta
Tornámos públicos os elementos que as agências escondem: os preços, a stack, o design system e um changelog que lista as correções feitas ao próprio site. A transparência serve dois fins — tranquiliza o potencial cliente e obriga-nos a manter o nível.
As pontuações registadas na entrega.
Pontuações Lighthouse do site em produção. Publicamo-las tal como estão: quando uma delas é baixa, a causa e o plano de correção estão descritos mais abaixo, em vez de serem omitidos.
Cada opção, e a sua razão.
Um design system documentado e público
Tokens de cor, escala tipográfica fluida, quatro níveis de sombra, ritmo vertical único. A página /design-system expõe-nos. Um sistema visível é um sistema que não se desvia.
Todo o contraste medido
Cada par de cores foi calculado. As margens dos campos atingem 3:1, o anel de foco está dissociado da cor de ação para se manter visível sobre um botão colorido, e os degradés de texto foram suprimidos em favor de cores sólidas.
Apenas animações de entrada
Nenhum ciclo infinito fora do indicador de carregamento: custo permanente de GPU, bateria e desconforto vestibular. A preferência de sistema por movimento reduzido é respeitada à risca.
Paleta do projeto
Azul-marinho
#1F3B61
Títulos, estrutura
Terracota
#B7481F
Ação — 5,3:1 sobre branco
Branco
#FFFFFF
Superfície da página
Cinzento frio
#F8FAFC
Secções alternadas
Sistema tipográfico
Títulos
Outfit 800
Texto corrido
Plus Jakarta Sans 400
Duas famílias variáveis alojadas localmente, em font-display: optional — nenhum deslocamento de layout no carregamento.
O que está por baixo do capô.
- React
- Vite
- Tailwind
- TypeScript
- Vercel
Todas as rotas pré-renderizadas no build
Uma SPA serve o mesmo HTML a todos os URL: os metadados por página são invisíveis para qualquer robô que não execute JavaScript. Um script de pré-renderização visita cada rota e escreve um ficheiro HTML completo — título, descrição, canónico, Open Graph, JSON-LD.
O build recusa-se a passar com defeitos
O build falha se uma rota não tiver metadados, se a página 404 perder o noindex, se um visual ultrapassar 1440 px, se a CSP estiver desatualizada ou se uma menção «a completar» chegar ao HTML produzido. As salvaguardas valem mais do que a vigilância.
Divisão por rota
Cada página é um chunk separado, incluindo a página inicial. Uma página de aviso legal não tem qualquer razão para descarregar a biblioteca de animação da página inicial.
Como o site se torna encontrável.
Uma entrada por intenção
17 páginas de serviço e 4 páginas geográficas, cada uma a visar uma pesquisa distinta. Nenhuma é uma variante de palavras-chave de outra: são conteúdos diferentes.
Dados estruturados coerentes
Organization, LocalBusiness, ProfessionalService, WebSite, WebPage e BreadcrumbList, todos ligados por @id. Os duplicados contraditórios foram eliminados — dois breadcrumbs concorrentes no mesmo URL valem mais do que nenhum, mas por pouco.
Nenhuma avaliação autoatribuída
O aggregateRating foi retirado: as avaliações que uma empresa atribui a si própria são proibidas pelas diretrizes da Google e expõem a uma ação manual. Preferimos perder a estrela a perder o domínio.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
100/100 no Lighthouse, e uma auditoria manual
Link para saltar para o conteúdo, foco deslocado e anunciado a cada mudança de rota, alvos táteis de 44 px, modo de contraste reforçado, modo OLED e fonte adaptada à dislexia disponíveis num painel dedicado.
O que foi entregue.
- Início
- 17 páginas de serviço
- 4 páginas geográficas
- Portfólio e 37 estudos de caso
- Preços, apoios, questionário, marcação de reuniões
- Stack, design system, changelog
- Páginas legais
As etapas do projeto.
Design system
Tokens, contrastes, escala tipográfica, sombras.
Conteúdo
17 serviços, 4 zonas, preços públicos.
SEO técnico
Pré-renderização, dados estruturados, sitemap, salvaguardas no build.
Melhoria contínua
Auditorias sucessivas registadas no changelog público.
O que nos perguntam com frequência.
Outros projetos
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
Cibersegurança ofensiva & SaaSSentinel by Kayzen
Vender um produto de segurança a engenheiros: cada afirmação tinha de ser demonstrável.
Dados & Serviço meteorológicoMétéo Climat France
358 páginas indexáveis, um mapa animado em 72 horizontes — e nem uma linha de framework.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.