Site institutionnelEn ligne
neptay.com
Notre site institutionnel — médias, technologie et services aux clients dans un même système, en dix langues et deux modes de couleur.
Dans les coulisses
Le système, de près.
La page d’accueil en mode clair et en mode sombre, la palette de la marque, l’échelle typographique et les dix langues du site.
Vue d’ensemble
Notre site est la première chose que voient nos clients et nos partenaires. Il présente chaque facette de Neptay avec l’exigence que nous apportons aux projets clients.
Le brief
- Problème
- Présenter une entreprise de médias et de technologie — deux pôles et une activité de services aux clients — comme une marque unique, claire et crédible.
- Contrainte
- Dix langues, dont une de droite à gauche, et deux modes de couleur.
- Réponse
- Un système de design fondé sur des tokens : une seule palette, une typographie généreuse, des panneaux gris et un unique marqueur jaune.
Neptay Media & Technology Services est une entreprise de médias et de technologie. Le site présente deux pôles et une activité de services aux clients sous une seule marque, claire et cohérente.
Le système de design repose sur la palette de la marque : deux neutres clairs, deux tons sombres et un unique accent jaune. Un même jeu de tokens pilote le mode clair par défaut et le mode sombre, et chaque interface du site est dessinée en code, pour rester en phase avec le produit.
Le site est publié en dix langues à partir d’une seule couche de contenu, dont le japonais et l’arabe, qui se lit de droite à gauche. Les mises en page reposent sur les propriétés logiques et s’inversent donc proprement en miroir ; routage, métadonnées, hreflang et données structurées s’adaptent à la langue sur chaque page.
Approche
Trois principes, tenus de bout en bout.
La typographie fait le travail
Des titres grands et serrés, des chapôs calmes et discrets. Un seul titre en deux tons porte l’idée et son contexte. Aucune icône ne fait ce que la typographie sait faire.
Un seul accent, utilisé comme marqueur
Le jaune de la marque signale les actions et les points d’emphase — un bouton, une expression mise en avant, un petit carré. Tout le reste n’est qu’encre, panneaux gris et filets, en mode clair comme en mode sombre.
Le mouvement confirme, sans spectacle
Le contenu se met en place à sa première apparition, les tuiles se soulèvent au survol, et toute animation s’arrête si le visiteur préfère réduire les mouvements.
Résultats
Ce que le site apporte.
Localisation
10langues
Anglais, turc, allemand, espagnol, français, portugais, russe, arabe, japonais et chinois — avec hreflang sur chaque page.
Mise en page
De gauche à droite et de droite à gauche
L’arabe inverse toute la mise en page grâce aux propriétés logiques, sans feuille de style séparée.
Couleur
Une palette, deux modes
Cinq couleurs de marque appliquées sous forme de tokens : un mode clair par défaut et un mode sombre, activable sur chaque page.
Système
Un seul jeu de tokens
Chaque page, les deux modes de couleur et les dix langues partagent un même jeu de design tokens.
Technologies
- Next.js 15
- React 19
- TypeScript
- CSS design tokens
- Geist
- Vercel