Cité de France · Paris, France
Quand une initiative nationale trouve
son identité institutionnelle.
Zéro marque. Zéro design. Zéro site. Construit de A à Z — identité, design system, 13 pages, performances Lighthouse, doctrine éditoriale complète.
Les décisions
6 choix structurants
Construire from scratch, ce n'est pas choisir des couleurs et un template. C'est prendre des dizaines de décisions dont aucune n'est neutre — et pouvoir justifier chacune d'entre elles.
Identité typographique
Choix
Cormorant Garamond — sérifé historique français
Résultat
Crédibilité institutionnelle immédiate. La police porte 400 ans d'imprimerie française avant que le visiteur lise un mot.
Un élu perçoit une autorité. Un donateur perçoit une permanence. La typographie est la première décision politique d'un site institutionnel.
Palette chromatique
Choix
Beige pierre #F2EDE4, bleu profond #1B3A6B — jamais blanc, jamais tech-blue
Résultat
Chaud, souverain, opposé au générique startup. Rappelle le papier à lettre officiel et le bleu marine de la République.
Le blanc dit startup. Le beige dit institution. Le bleu profond dit permanence. Trois choix qui écartent les mauvaises comparaisons avant qu'elles naissent.
Navigation chromatique
Choix
Nav qui change de couleur selon le fond sous-jacent (data-nav-dark + IntersectionObserver)
Résultat
Immersion totale sur les sections photo sans sacrifier la lisibilité — aucune bibliothèque externe.
Le défi : la nav doit rester lisible sur fond clair ET sur fond sombre. Solution maison : un observeur qui détecte quelles sections passent sous la nav. Zéro dépendance.
Bleuet de France
Choix
Section pleine largeur hors grille, toutes les 5 actions visibles simultanément
Résultat
Valeur perçue 3× supérieure vs. une simple carte dans la grille des 5 autres axes.
Le Bleuet de France est l'axe le plus reconnaissable nationalement. Le traiter différemment signale immédiatement sa singularité — sans texte d'explication.
Architecture technique
Choix
Server Components partout, Client uniquement sur les interactions (Nav, Accordion, AnimateIn)
Résultat
Bundle JS minimal, TTI optimal, scalable sans refonte pour les phases 2 et 3.
Next.js 15 App Router permet de ne livrer du JavaScript que là où il est nécessaire. Sur un site institutionnel, c'est 80% de Server Components.
Financement technique
Choix
Headers CSP, HSTS, COOP + AVIF/WebP + prefetch tunnels + sitemap + JSON-LD
Résultat
Lighthouse SEO 100, Accessibility 92 (→100), Best Practices 96, zéro erreur console, headers sécurité A+.
Un site institutionnel est jugé par les moteurs ET par les navigateurs. Les deux audiences méritent le même niveau de sérieux.
Le défi
Cité de France n'avait rien.
Pas de marque. Pas de site. Pas d'identité visuelle.
L'initiative existe. Le projet est solide. Mais sans présence, une institution n'existe pas aux yeux de ceux qu'elle veut convaincre — les maires, les donateurs, les partenaires institutionnels.
Le défi était double : créer quelque chose qui inspire confiance à un élu de 60 ans ET désir à un donateur de 35 ans. Simultanément. Sans compromis sur l'un ni sur l'autre.
Le cahier des charges implicite : une présence qui dit "nous savons ce que nous faisons" avant que le visiteur lise un seul mot de contenu.
La méthode
Pas un template.
Une doctrine de A à Z.
Avant d'écrire la première ligne de code : 8 fichiers de doctrine — identité, éditorial, design, motion, SEO, architecture. Chaque décision visuelle ou technique est fondée sur un principe écrit.
Résultat : 13 pages livrées en 3 sessions. Un design system complet utilisable par n'importe quel développeur futur. Aucun compromis technique — les mêmes standards qu'un grand site national.
13
Pages livrées
SEO 100
Lighthouse
0
Lib UI externe
Votre organisation · votre institution · votre marque
Cité de France avait un projet.
Il lui manquait une présence.
Vous aussi ?
Si votre organisation mérite une présence à la hauteur de ce qu'elle fait — marque, design system, site — nous avons 30 minutes à vous offrir.