À propos de ce modèle
Avant toute reconstruction de landing page pour un produit fintech, lisez USD Halo, qui publie ensemble la composition et la spécification. Elle ouvre sur « An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à blanc #F5F5F5 en fond et indigo profond #2B2644 pour le texte, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 458x800 pour que le cadre soit fixé avant la première ligne de code. Traitez-la comme le brief de landing page pour un produit fintech, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Les responsables marketing qui héritent de ce design de landing page utiliseront une typographie de 13px à 16px et des sections de 100vh pour vérifier qu’une réécriture a gardé l’échelle.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 8 531 caractères comme point de départ.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de landing page dont le titre doit rester aussi long que celui de USD Halo.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Une courte suite de liens et une seule action se posent au-dessus de landing page, tenues à une typographie de 13px à 16px et des sections de 100vh pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 458x800 sans fond propre, la vidéo court donc bord à bord en dessous. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- 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 landing page en liste de fonctionnalités. La rangée s’aligne sur la même marge que le titre au-dessus.
- Des panneaux, pas des paragraphes. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de landing page balayable. Les titres internes des panneaux se placent un palier au-dessus de leur propre texte, et non un palier sous le titre de la page. Une idée par panneau.
- Les liens avant l’action. Les états de survol et de focus sont spécifiés pour chaque lien, ce qui évite qu’une barre fine paraisse inerte. Tenez la rangée sur une seule ligne.
Animation et interaction
Les contrôles forment la couche interactive
Le travail au pointeur est réduit et spécifié (des états de survol sur les boutons et les liens plutôt que sur chaque carte), appliqué aux éléments qui ont déjà l’air interactifs. Parce que les états sont simples, ils se portent dans n’importe quel système de composants.
La bande qui ne s’arrête jamais
Un bandeau défilant traverse la composition en boucle sans fin, composé en Inter. Le bandeau défilant reprend la police de l’interface, donc il se lit comme du contenu et non comme un ornement.
Le réagencement de landing page
Le design de landing page est composé en 458x800 puis recomposé pour les largeurs étroites, la section est tenue à 100vh, pour que la version téléphone soit une décision et non un écrasement. L’ordre est la dernière chose à changer.
Par où commencer dans USD Halo
Le brief nomme Inter et l’échelle qui l’accompagne. Substituez une police aux mêmes proportions et la composition survit. Une autre marque peut réutiliser tout le cadre.
Lire USD Halo comme une spécification
La plupart des références montrent le résultat et gardent les chiffres. Celle-ci inverse, en publiant une typographie de 13px à 16px, des sections de 100vh et des pas d’espacement de 15px à côté de la page, si bien que le résultat se reproduit au lieu d’être approximé. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Que contient réellement le brief derrière USD Halo?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 458x800, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que USD Halo 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.
Comment gérer les médias de USD Halo 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 458x800.
