À propos de ce modèle
Asme est un exemple de section hero SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. La palette repose sur noir #000000 en fond et gris #C9CAB9 pour le texte, et la page est composée en Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 800x582 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à 500ms de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 4 360 caractères est la partie qui se transfère à votre page.
Conçu pour
- 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 Asme.
- Les responsables de contenu qui doivent faire tenir un titre plus long utiliseront le nombre de lignes de Instrument Serif comme limite, pas le nombre de caractères.
- Fondateurs qui lancent un design de section hero pour un produit IA ou SaaS et doivent avoir tranché Instrument Serif et l’échelle typographique avant qu’un développeur commence.
Ce qui est inclus
- Repli des liens à une largeur. Une barre fine se pose en tête de section hero, avec le nom de marque à gauche et les liens composés en Instrument Serif, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. La barre se pose sur la composition 800x582 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré contre le viewport. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (des transitions de 500ms). La liste est assez courte pour être vérifiée élément par élément. Remplacez la fonte ou le texte, pas l’échelle.
- Un bandeau de nav volontairement fin. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à des transitions de 500ms pour ne jamais concurrencer la composition en dessous.
- Une seule échelle, texte et cadre. Les espacements sont cités de la même façon (des transitions de 500ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
États de pointeur, rien de plus
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é. Rien sur la page n’ouvre de modale ni ne détourne le scroll, les interactions restent locales à l’élément.
Des durées en millisecondes
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 500ms. Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. Les états de focus utilisent la même durée que le survol, donc le retour au clavier et à la souris est identique.
Le réagencement de section hero
On ne règle pas un écran étroit en le réduisant. Ce brief traite le changement dans la typographie et la navigation, l’échelle est fluide plutôt que par paliers. Un simple écrasement aurait coûté moins cher et n’aurait pas tenu.
Comment Asme ordonne la première lecture
Quand un lecteur SaaS arrive sur un écran unique, il balaie avant de lire. La mise en page y répond en réglant la navigation, le titre, la ligne de statistiques, le clip de fond et le pied de page pour le balayage, des transitions de 500ms gardant chaque étape distincte. Un lecteur SaaS reçoit l’offre avant les options.
Ce qui bouge dans Asme
Quand une page paraît agitée, la cause est souvent un excès d’entrées. Celle-ci garde la liste courte, 500ms de transitions et des états de survol et de clic. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que contient réellement le brief derrière Asme?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x582, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il React et Tailwind CSS pour reconstruire Asme?
La fiche indique React et Tailwind CSS pour la provenance, parce que Asme 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 utiliser Asme dans un projet client?
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 800x582.
