À propos de ce modèle
Aesthetic Onboarding conserve sa trace de décision, puisque le brief de page de connexion fait 3 133 caractères. « Welcome back » est la ligne que la mise en page doit porter. Toute la page repose sur orange vif #F09819 en fond, bleu profond #0C0C0E pour le texte et sarcelle vif #00C6FF pour les accents. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de page de connexion dans un projet sans passation de design. L’animation se résume à un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 3 133 caractères est la partie qui se transfère à votre page.
Conçu pour
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un cadre 1894x1378 au lieu de laisser le modèle décider.
- Partez de des pas d’espacement de 80px et laissez la palette suivre, car ce sont les espacements qui font lire ce design de page de connexion.
- Des responsables marketing produit qui ont besoin qu’une page de connexion reste lisible avec 5,4s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Chaque mesure est écrite. Rien dans la mise en page n’est laissé à l’impression, le brief cite des pas d’espacement de 80px et le build doit atteindre ces valeurs. Aucune valeur intermédiaire n’est inventée entre les valeurs nommées, la liste de mesures est tout le système. Remplacez la fonte ou le texte, pas l’échelle.
- Un seul média porte l’ambiance. Le brief spécifie la vidéo en 1894x1378 avec une boucle de 5,4s, et chaque élément de texte est placé contre ce cadre. Exportez en 1894x1378 ou plus large et le recadrage en cover continue de fonctionner.
- Une rangée de chiffres plutôt qu’une affirmation. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer page de connexion en liste de fonctionnalités. Les chiffres portent l’accent #00C6FF tandis que tout ce qui les entoure reste sur la couleur d’encre. Tenez la rangée sur une seule ligne.
- Mesuré contre le viewport. Les espacements sont cités de la même façon (des pas d’espacement de 80px), et non comme une échelle qui grandit toute seule.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance est un clip de 5,4s en 1894x1378, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité. Tournez ou exportez en 1894x1378 ou plus large.
Une animation qui reste discrète
Il n’y a aucune bibliothèque de scroll ici, la composition en 1894x1378 reste immobile et seuls les éléments qui vous répondent bougent. Le mouvement est traité comme un retour d’information et non comme une décoration. Aucune timeline de scroll nécessaire.
L’ordre de page de connexion
Un ordre strict coûte de la souplesse par la suite. Ajoutez une section dans le premier écran et il faut recalculer des pas d’espacement de 80px, parce que la séquence porte la structure au lieu de la décorer. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de page de connexion
Une échelle fluide et une échelle par paliers se ressemblent sur grand écran. Réduisez la fenêtre et la différence apparaît, un clamp entre 10px et 80px contre des sauts fixes. La largeur change les mesures, pas le parcours de lecture.
Pourquoi le brief SaaS tient
Un écran signifie une décision pour le lecteur, et c’est le prix de cette mise en page, tout le reste passe sous la ligne de flottaison. Le brief énonce des pas d’espacement de 80px pour que les sections basses gardent le même rythme. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Questions fréquentes
Le prompt de Aesthetic Onboarding 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 1894x1378, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de page de connexion de Aesthetic Onboarding avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Aesthetic Onboarding a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Puis-je publier une page reconstruite d’après Aesthetic Onboarding sans mentionner la source?
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 1894x1378.
