Site institucionalNo ar
neptay.com
Nosso site institucional — mídia, tecnologia e serviços para clientes em um único sistema, em dez idiomas e dois modos de cor.
Por dentro do projeto
Um olhar sobre o sistema.
A página inicial nos modos claro e escuro, a paleta da marca, a escala tipográfica e os dez idiomas em que o site é publicado.
Visão geral
Nosso site é a primeira coisa que clientes e parceiros veem. Ele apresenta cada área da Neptay com o mesmo padrão que levamos aos projetos de clientes.
O briefing
- Problema
- Apresentar uma empresa de mídia e tecnologia — duas divisões e uma área de serviços para clientes — como uma marca única, clara e confiável.
- Restrição
- Dez idiomas, um deles da direita para a esquerda, e dois modos de cor.
- Solução
- Um sistema de design baseado em tokens: uma paleta, tipografia grande, painéis cinza e um único marcador amarelo.
A Neptay Media & Technology Services é uma empresa de mídia e tecnologia. O site apresenta duas divisões e uma área de serviços para clientes como uma marca única e clara.
O sistema de design parte da paleta da marca: dois neutros claros, dois tons escuros e um único destaque amarelo. Um só conjunto de tokens comanda o modo claro, que é o padrão, e o modo escuro; cada interface do site é desenhada em código, por isso acompanha o produto em cada mudança.
O site é publicado em dez idiomas a partir de uma única camada de conteúdo, incluindo o japonês e o árabe, da direita para a esquerda. Os layouts usam propriedades lógicas e, por isso, se espelham de forma limpa; roteamento, metadados, hreflang e dados estruturados respeitam o idioma em todas as páginas.
Abordagem
Três princípios, mantidos do início ao fim.
A tipografia faz o trabalho
Títulos grandes e compactos, textos de abertura calmos e suaves. Um único título em dois tons carrega a ideia e o seu contexto. Nenhum ícone faz um trabalho que a tipografia pode fazer.
Um destaque, usado como marcador
O amarelo da marca sinaliza ações e ênfases — um botão, uma frase em destaque, um pequeno quadrado. Todo o resto é tinta, painéis cinza e linhas finas, nos modos claro e escuro.
O movimento confirma, nunca se exibe
O conteúdo sobe para o seu lugar na primeira aparição, os blocos se elevam ao passar o cursor e toda animação para quando o visitante prefere movimento reduzido.
Resultados
O que ele entrega.
Localização
10idiomas
Inglês, turco, alemão, espanhol, francês, português, russo, árabe, japonês e chinês — com hreflang em todas as páginas.
Layout
Da esquerda para a direita e vice-versa
O árabe espelha todo o layout por meio de propriedades lógicas, não de uma folha de estilos separada.
Cor
Uma paleta, dois modos
Cinco cores da marca aplicadas como tokens: um modo claro padrão e um modo escuro, alternáveis em todas as páginas.
Sistema
Um só conjunto de tokens
Todas as páginas, os dois modos de cor e os dez idiomas compartilham um único conjunto de design tokens.
Tecnologias
- Next.js 15
- React 19
- TypeScript
- CSS design tokens
- Geist
- Vercel