À propos de ce modèle
Lisez Tech-Noir About comme une spécification de page à propos, dont les valeurs ont été écrites avant la construction de la page. La palette se limite à rouge #C40010 en fond et rouge vif #FF0000 pour les accents, et la typographie est Manrope. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Prenez-la lorsque l’ordre de page à propos doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Équipes growth qui rhabillent un design de page à propos pour un produit IA ou SaaS et veulent garder le cadre 640x470 pendant que le texte de l’offre change.
- Si l’animation doit sauter, le design de page à propos reste lisible, une typographie de 16px à 120px et des pas d’espacement de 100px assurant la hiérarchie.
- Cette base est calibrée pour un fondateur seul qui livre un design de page à propos pour un produit IA ou SaaS, sans design system derrière.
Ce qui est inclus
- Mesuré contre le viewport. Le brief nomme les chiffres, une typographie de 16px à 120px et des pas d’espacement de 100px. C’est ce qui tient la composition, parce qu’aucun pas d’espacement inventé ne s’intercale entre la typographie et le cadre. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement.
- L’accent sur les contrôles seuls. Il y a un seul accent (rouge vif #FF0000) contre rouge #C40010, et la typographie fait le reste du travail plutôt qu’une seconde couleur. Tout le reste repose sur rouge #C40010, ce qui garde lisible une palette saturée. Si une couleur ne porte pas de sens, supprimez-la.
- Les chiffres portés jusqu’au build. Les espacements sont cités de la même façon (une typographie de 16px à 120px et des pas d’espacement de 100px), et non comme une échelle qui grandit toute seule.
- Une famille, deux rôles. La ligne display est composée en Manrope à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. L’interlettrage se resserre à mesure que le corps grandit, c’est pourquoi la ligne display tient sur toute la plage 16–120px.
Animation et interaction
Une animation qui reste discrète
Il n’y a aucune bibliothèque de scroll ici, la composition en 640x470 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.
Statique par choix
Celle-ci est livrée comme une composition fixe en 640x470, donc la hiérarchie doit tenir sans animation, et elle tient.
L’ordre de page à propos
Le brief fait 3 555 caractères et nomme explicitement l’ordre de lecture, le clip de fond, avec une typographie de 16px à 120px et des pas d’espacement de 100px entre eux. Un lecteur SaaS reçoit l’offre avant les options.
Le réagencement de page à propos
Le brief décrit ce qui change à chaque largeur (l’échelle est fluide plutôt que par paliers), la version mobile est donc une décision et non un écrasement. Le contraste est tenu sur l’accent #FF0000 par-dessus le média, et la vidéo est muette et en lecture inline. La réorganisation garde l’action accessible à chaque largeur.
Les chiffres derrière page à propos
C’est ce qui rend la référence réutilisable, une typographie de 16px à 120px et des pas d’espacement de 100px. 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 page à propos ne dépend d’une valeur par défaut.
Questions fréquentes
Le prompt de Tech-Noir About est-il une spécification aboutie ou un simple point de départ?
Comptez 3 555 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.
Comment cette fiche de Tech-Noir About est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 3 555 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Faut-il React et Tailwind CSS pour reconstruire Tech-Noir About?
La fiche indique React et Tailwind CSS pour la provenance, parce que Tech-Noir About 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.
