À propos de ce modèle
Lisez Equilibrium comme une spécification de section hero, dont les valeurs ont été écrites avant la construction de la page. La couleur se réduit à bleu profond #0F1118 en fond et orange sourd #CDBAB2 pour le texte, composée en Geist. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. Gardez-la ouverte pendant la rédaction, car le brief de 4 787 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de section hero et laissez le prompt porter un cadre 640x472.
- Des designers qui veulent d’abord les chiffres, des pas d’espacement de 72px, tous cités depuis le brief.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Equilibrium.
Ce qui est inclus
- Une navigation sans fond. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Geist pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 640x472 sans fond propre, la vidéo court donc bord à bord en dessous.
- Des valeurs vérifiables. Rien ici n’est estimé à l’œil. La spécification fixe des pas d’espacement de 72px, et le reste de la mise en page découle de ces valeurs. Chaque valeur se vérifie contre le prompt capturé, ce qui rend une reconstruction vérifiable plutôt qu’approximative.
- Un bandeau de nav volontairement fin. La barre tient sur une rangée de texte et une action, mesurée à des pas d’espacement de 72px pour se lire comme un filet et non comme un bandeau.
- Des tailles fixées par le brief. Les espacements sont cités de la même façon (des pas d’espacement de 72px), et non comme une échelle qui grandit toute seule.
Animation et interaction
Du survol, mais avec parcimonie
Le retour d’information se limite à des états de survol sur les boutons et les liens plutôt que sur chaque carte, et c’est ce qui évite à un premier écran dense de paraître surchargé. Les états viennent de la palette de la page et non d’un défaut de composant.
Statique par choix
Celle-ci est livrée comme une composition fixe en 640x472, donc la hiérarchie doit tenir sans animation, et elle tient. La composition reste immobile, donc la hiérarchie doit porter la page, et elle le fait. Gardez le mouvement sur les contrôles.
Lire Equilibrium comme une spécification
C’est ce qui rend la référence réutilisable, des pas d’espacement de 72px. Rien n’est laissé à un réglage par défaut, une substitution qui garde ces chiffres garde donc la composition. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Le réagencement de section hero
En large, la composition est dense, en étroit, la navigation se replie en menu mobile. Les deux états sont décrits dans le brief. Les deux états sont décrits dans le même brief.
Comment Equilibrium ordonne la première lecture
Un écran, une action, et la navigation, le badge d’annonce, la ligne de statistiques et le clip de fond entre les deux. Le brief fixe cet ordre au lieu de confier le premier écran à une pile de sections. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière Equilibrium?
Comptez 4 787 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Faut-il React et Tailwind CSS pour reconstruire Equilibrium?
La fiche indique React et Tailwind CSS pour la provenance, parce que Equilibrium 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.
Qu’est-ce qui déclenche les animations de Equilibrium?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage moins d’une seconde. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place. La référence a été capturée en 640x472.
