Primaire 01
Marine exécutif
#132238
Navbar, hero, boutons primaires et titres de structure.
Architecture digitale
Une homepage Nexfranchise pensée comme un cabinet: nette, calme, crédible.
Le système visuel privilégie la lisibilité, la hiérarchie et la retenue. L’objectif est de donner à Nexfranchise une présence premium sans couleur criarde ni sur-design.
Cadre de lecture
9 couleurs · Inter · 4 surfaces clés
Le livrable couvre la homepage, la page /offres, la FAQ et le footer avec une logique cohérente sur desktop comme sur mobile.
Premium ne veut pas dire démonstratif: la hiérarchie repose sur l’espace, le contraste et une information immédiatement exploitable.
Design system
Palette, typographie, composants et responsive
La direction retenue repose sur un luxe discret: contraste fort, fonds ivoire, bleu marine profond, accents sable et états sobres. Toute la hiérarchie typographique repose sur Inter.
Primaire 02
Bleu cadrage
#31506F
Liens actifs, badges, lignes de séparation fortes.
Secondaire 01
Bronze calme
#8A7157
Accents premium, puces, tags et micro-contrastes.
Secondaire 02
Sable structuré
#D6CABC
Fonds de cartes secondaires, hover subtil, zones informatives.
Neutre 01
Noir texte
#161B22
Titres, textes à forte priorité, bordures actives.
Neutre 02
Gris lecture
#5E6773
Corps de texte, labels, navigation secondaire.
Neutre 03
Ivoire fond
#F6F3EE
Fond principal, respiration visuelle, contraste sobre.
État succès
Vert validation
#2F6B57
Validation, points de confiance, notes positives.
État alerte
Ambre attention
#A46B3A
Cadres, disclaimers, limites ou informations sensibles.
H1
64 px / 72 px / 700
Architecture digitale premium pour Nexfranchise
H2
48 px / 56 px / 700
Sections structurées et lisibilité maximale
H3
36 px / 44 px / 650
Composants UI principaux
H4
28 px / 36 px / 600
Hiérarchie visuelle stable
H5
22 px / 30 px / 600
Bloc fonctionnel
H6
18 px / 26 px / 600
Label de section
Lead
20 px / 32 px / 400
Une voix éditoriale calme, experte et immédiatement crédible.
Body
16 px / 28 px / 400
Le corps de texte reste généreux, lisible et stable sur l’ensemble du parcours.
Body Small
14 px / 24 px / 400
Mentions, labels, aides à la lecture et micro-contenus.
Grille
Desktop: Container max 1200 px, grille 12 colonnes, gap 24 px.
Mobile: Pile simple ou grille 2 colonnes, gouttières 20 px, aucune carte en largeur forcée.
Espacements
Desktop: Sections 96 px, blocs internes 32 px, cartes 24 px.
Mobile: Sections 64 px, blocs internes 24 px, cartes 20 px.
Typographie
Desktop: Titres larges et lead 20 px pour installer l’autorité.
Mobile: Réduction maîtrisée des titres, line-height préservée, jamais de texte tassé.
Navigation
Desktop: Navbar complète avec navigation centrale et CTA à droite.
Mobile: Navigation réduite, CTA conservé, footer empilé et lisible sans effort.
Composants UI
Une grammaire simple pour garder l’interface premium
Les composants ont été pensés pour éviter l’effet template: peu de variantes, beaucoup de cohérence, et des surfaces qui respirent.
Boutons
Trois variantes pour conserver une hiérarchie claire sans sur-solliciter l’utilisateur.
- Primaire pour l’action principale de la page.
- Secondaire pour le parcours alternatif à forte valeur.
- Ghost pour la navigation, la documentation et les actions de support.
Cards
Cartes sobres à bord fin, grand rayon, fond ivoire et ombre diffuse courte.
- Card service pour les sections marketing et éditoriales.
- Card architecture pour la spécification layout / composants / espacement / mobile.
- Card data pour les tableaux, matrices et comparatifs.
Navbar
Barre sticky avec bloc marque, navigation centrale et CTA discret mais visible.
- Hauteur cible 72 à 84 px sur desktop.
- Fond semi-opaque pour conserver la sensation premium.
- Menu réduit sur mobile, CTA conservé en accès direct.
Tableau
Tableau à entêtes fermes et lignes respirantes pour synthétiser les décisions.
- Fond clair, bordures très légères et valeurs alignées à gauche.
- Usage prioritaire pour comparatifs, échelle typo et règles responsive.
- Scroll horizontal assumé sur mobile plutôt que compression du texte.
Aperçu navbar
Nexfranchise
Bloc marque + baseline courte
AccueilOffresFAQContact
CTA discret
Aperçu tableau
| Bloc | Objectif | Layout | Composants |
|---|---|---|---|
| Hero | Poser la promesse et séparer immédiatement les deux parcours. | 7/5 colonnes | Navbar, H1, lead, badges, CTA |
| Cartes d’offres | Permettre une lecture rapide du périmètre et du prix. | 2 colonnes égales | Cards, listes, boutons |
| Comparatif | Aider à arbitrer sans lire l’ensemble des paragraphes. | Table pleine largeur | Tableau, tags, lignes d’aide |
| Rassurance | Traiter livraison, confidentialité et contact humain. | 2 colonnes | Cards info, body small, CTA secondaire |
Homepage
Architecture section par section de la homepage
La homepage sert de page directrice. Elle présente le système, installe la crédibilité de la marque et oriente ensuite vers les pages opérationnelles.
Section
Hero de marque
Layout
Grille 12 colonnes avec texte principal sur 7 colonnes et panneau synthèse sur 5 colonnes.
Composants
NavbarEyebrowH1LeadBouton primaireBouton secondaire
Espacements
Padding vertical 120 px desktop / 80 px mobile, gap 32 px entre colonnes.
Mobile
Passage en pile, panneau de synthèse sous les CTA, boutons pleine largeur.
Section
Design system
Layout
Palette sur 3 colonnes puis tableau typographique pleine largeur.
Composants
Swatches couleurTableau typographiqueCards data
Espacements
96 px entre sections, 24 px entre cartes, 32 px avant le tableau.
Mobile
Swatches sur 2 colonnes, tableau en scroll horizontal, marges réduites à 20 px.
Section
Composants UI
Layout
3 cartes de composants et 1 aperçu de tableau sur 12 colonnes.
Composants
BoutonsCardsNavbar miniTableau
Espacements
Grille 3 colonnes desktop, 1 colonne mobile, 24 px d’écart uniforme.
Mobile
Chaque composant devient un bloc autonome, aucun alignement fin imposé.
Section
Architecture page par page
Layout
Grille 2 colonnes de cartes techniques avec détails par section.
Composants
Cards architectureTagsListes structurées
Espacements
Section respirante avec 24 px entre cartes et 18 px entre sous-blocs.
Mobile
Passage en une colonne, informations conservées dans l’ordre layout > composants > spacing > mobile.
Section
CTA final
Layout
Bloc simple centré avec texte court et deux actions.
Composants
Card CTABouton primaireBouton ghost
Espacements
Padding 40 px desktop / 28 px mobile, écart CTA 12 px.
Mobile
Texte centré, boutons empilés et largeur 100 %.
/offres
Architecture de la page Offres
La page /offres doit convertir sans devenir agressive: séparation claire des parcours, comparatif rapide et rassurance forte.
Section
Hero page /offres
Layout
Grille 12 colonnes avec promesse à gauche et note d’usage à droite.
Composants
H1LeadBadgesCTA
Espacements
96 px avant la grille d’offres, 32 px entre texte et aside.
Mobile
Aside bascule sous le titre, pas de colonnes concurrentes.
Section
Grille d’offres
Layout
Deux cartes majeures de largeur égale en desktop.
Composants
Cards offreBoutons primaire/ghostListes d’inclusion
Espacements
24 px entre cartes, 32 px internes, badges prix visibles en tête.
Mobile
Cartes empilées, ordre Franchisé puis Franchiseur, CTA largeur pleine.
Section
Tableau comparatif
Layout
Tableau pleine largeur sous les cartes pour arbitrage rapide.
Composants
TableauTags d’usageLignes de décision
Espacements
32 px au-dessus du tableau, 20 px de padding interne.
Mobile
Scroll horizontal assumé avec libellés courts et lignes stables.
Section
Rassurance & conversion
Layout
Deux colonnes: règles d’achat à gauche, note de contact à droite.
Composants
Cards informationBouton secondaireMentions small
Espacements
80 px avant footer, gap 24 px entre colonnes.
Mobile
Empilement simple, note de contact en dernier.
/faq
Architecture de la page FAQ
La FAQ n’est pas un bloc de texte défensif. Elle agit comme un filtre de réassurance, avec des thèmes visibles et des réponses rapides à parcourir.
Section
Hero page /faq
Layout
Grille 12 colonnes avec promesse de clarté et rappel du périmètre.
Composants
H1LeadBadgeCTA ghost
Espacements
96 px avant les catégories, 32 px entre blocs.
Mobile
Structure en pile, aucun texte sur deux colonnes.
Section
Sommaire des thèmes
Layout
4 cartes catégories sur grille 4 colonnes.
Composants
Cards navigationTagsLiens d’ancre
Espacements
24 px entre cartes, padding 24 px.
Mobile
2 colonnes puis 1 colonne selon largeur, cartes cliquables entières.
Section
Réponses détaillées
Layout
Liste verticale d’accordéons ou de cards FAQ.
Composants
FAQ itemsBodyBody smallSéparateurs
Espacements
16 px entre réponses, 24 px à l’intérieur de chaque item.
Mobile
Interaction simple au tap, texte toujours sur une seule colonne.
Section
Clôture / contact
Layout
Bloc CTA compact aligné sur le container principal.
Composants
Card CTABouton primaireBouton ghost
Espacements
64 px avant footer, 12 px entre actions.
Mobile
Boutons empilés, contenu recentré.
Footer
Architecture du footer
Le footer prolonge la crédibilité de la marque. Il doit résumer la promesse, donner les accès utiles et rappeler le cadre sans alourdir la fin de page.
Section
Bloc marque
Layout
Colonne 1 dédiée à la promesse, au contact et au niveau de service.
Composants
Logo texteBody smallLien email
Espacements
Padding 32 px, 12 px entre éléments textuels.
Mobile
Bloc toujours en premier, largeur 100 %.
Section
Navigation utile
Layout
Colonne 2 avec liens courts, groupés par usage.
Composants
Liens footerTitres de groupe
Espacements
8 px entre liens, 20 px entre groupes.
Mobile
Liens empilés après la marque, aucun multi-colonnes.
Section
Cadre & mentions
Layout
Colonne 3 pour le rappel des règles, du support et des mentions.
Composants
Body smallTags d’étatLien mentions
Espacements
12 px entre paragraphes, 20 px sous le titre de colonne.
Mobile
Bloc final, espacement augmenté pour préserver la lisibilité.
Sortie
Le livrable est prêt à être décliné dans le site
Les pages suivantes reprennent la même logique: une lecture simple, une hiérarchie forte et un comportement mobile prévisible. Le système peut maintenant être branché sur un contenu commercial final sans refaire la base.