À propos de ce modèle
Cette fiche présente Northstar en landing page, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La palette est sarcelle #1D8FB8 en fond, blanc #EEF2F3 pour le texte et orange sourd #F0DAC8 pour les accents, composée en Instrument Serif. La livraison tient en vanilla JS, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se résume à 580ms de transitions et cubic-bezier(.16,1.3,1). Gardez-la ouverte pendant la rédaction, car le brief de 11 589 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les chefs de produit qui doivent chiffrer la reconstruction liront un easing cubic-bezier(.16,1.3,1) comme le périmètre du travail.
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un cadre 1280x956 au lieu de laisser le modèle décider.
- Des designers qui veulent d’abord les chiffres, des sections de 100vh et des pas d’espacement de 14px, tous cités depuis le brief.
Ce qui est inclus
- Une barre sans superflu. La navigation est une bande fine et non un bandeau, avec le nom de marque à gauche, les liens vers le centre droit et une action en #F0DAC8, le tout posé en tête de landing page, sans fond propre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #F0DAC8 est le seul élément de la barre à porter du gras.
- Les chiffres portés jusqu’au build. Les valeurs sont la spécification, des sections de 100vh, des pas d’espacement de 14px, des transitions de 580ms et un easing cubic-bezier(.16,1.3,1), relevées sur 1280x956 et non déduites d’une capture d’écran. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement. Les chiffres sont le design, le reste est de l’arrangement.
- L’échelle est le style. Avec Instrument Serif aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. Remplacer la fonte est possible, mais les proportions doivent survivre à la substitution.
- Une navigation sur une seule ligne. La barre se pose sur la composition 1280x956 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Les durées du brief
Survol, appui et focus se règlent tous en 580ms, et c’est ce qui rend l’interface immédiate. La durée citée couvre les changements d’état, donc le retour est la part spécifiée de l’animation.
Une animation qui reste discrète
Il n’y a aucune bibliothèque de scroll ici, la composition en 1280x956 reste immobile et seuls les éléments qui vous répondent bougent. Le brief ne contient aucune bibliothèque d’animation, ce qui garde la reconstruction légère. L’immobilité est un choix valable.
L’ordre de landing page
Là où une page marketing empile les preuves sous la ligne de flottaison en espérant, le design de landing page met la navigation, le titre, la ligne de statistiques, le clip de fond et le pied de page devant le lecteur et retient le reste. Un lecteur agence reçoit l’offre avant les options.
Pourquoi cette composition fonctionne pour agence
Comparé à un hero de template, la différence tient à ce qui manque. Pas de grille de cartes, pas de carrousel, pas de second appel à l’action, seulement la navigation, le titre, la ligne de statistiques, le clip de fond et le pied de page, avec des sections de 100vh et des pas d’espacement de 14px comme référence de taille. Northstar énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Adapter landing page à votre marque
Une ligne, une police, un accent, ces trois substitutions changent le plus le design, et rien d’autre, les valeurs à ne pas bouger étant des sections de 100vh, des pas d’espacement de 14px, des transitions de 580ms et un easing cubic-bezier(.16,1.3,1). Réécrivez le texte et les médias avant de recolorer quoi que ce soit.
Questions fréquentes
Le prompt de Northstar est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1280x956, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Northstar dépend de vanilla JS?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour vanilla JS, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
D’où vient le design de Northstar?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1280x956.
