À propos de ce modèle
Avant toute reconstruction de page à propos pour un produit IA ou SaaS, lisez Build With Us, qui publie ensemble la composition et la spécification. La palette se limite à blanc #FFFFFF en fond, jaune profond #434437 pour le texte et bleu #337EC8 pour les accents, et la typographie est Inter. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de page à propos dans un projet sans passation de design. Si vous préparez un brief pour page à propos SaaS, partez de cette composition et remplacez le sujet.
Conçu pour
- Équipes qui montent un design de page à propos pour un produit IA ou SaaS et doivent consigner un cadre 640x472 par écrit avant de chiffrer.
- Des designers qui veulent d’abord les chiffres, des sections de 100vh et des pas d’espacement de 48px, tous cités depuis le brief.
- Cette page est dimensionnée pour les chefs de produit qui veulent un design de page à propos cadré sur un sprint et aucun nouveau visuel à produire.
Ce qui est inclus
- Une ligne, aucun tiroir. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #337EC8, dimensionnée pour rester discrète face au reste de la page. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #337EC8 est le seul élément de la barre à porter du gras. Une seule action par barre.
- Mesuré, pas estimé à l’œil. Typographie et espacements sortent ici de la même liste, des sections de 100vh et des pas d’espacement de 48px. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu. Emportez les valeurs avec la mise en page.
- Le corps display porte le ton. Avec Inter aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. Les chiffres partagent la fonte d’interface, statistiques et libellés appartiennent donc au même système.
- La composition est le contenu. Tout ce qui se trouve au-dessus de la ligne de flottaison mérite sa place. Le brief nomme le texte, le cadre 640x472 et les tailles de caractères, et ne laisse rien de décoratif les concurrencer. La page est une seule composition en 640x472, c’est pourquoi elle tient quand le texte change.
Animation et interaction
Le survol là où il sert
L’interaction reste locale à chaque contrôle (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc rien d’autre sur la page ne bouge. Les états sont nommés dans le brief, donc la page ne dépend pas d’une bibliothèque d’effets de survol.
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. Le brief ne contient aucune bibliothèque d’animation, ce qui garde la reconstruction légère.
Pourquoi le brief SaaS tient
La plupart des pages SaaS échouent par accumulation, plus de sections, plus de dégradés, plus de promesses. Build With Us fait l’inverse. La composition reste sur blanc #FFFFFF avec bleu #337EC8 pour les actions, ce qui suffit à paraître délibérée. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Adapter page à propos à votre marque
Une ligne, une police, un accent, ces trois substitutions changent le plus le design, et rien d’autre, les valeurs à ne pas bouger étant des sections de 100vh et des pas d’espacement de 48px. Réécrivez la ligne affichée avant de toucher à la couleur.
Le réagencement de page à propos
Ici, la typographie est fluide plutôt que par paliers (un clamp entre 32px et 48px), donc la ligne d’affichage ne saute pas d’une largeur à l’autre. La version mobile est une décision, pas un repli.
Questions fréquentes
Le prompt de Build With Us est-il une spécification aboutie ou un simple point de départ?
Comptez 6 252 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 Build With Us est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 6 252 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Puis-je reconstruire ce type de page à propos de Build With Us avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Build With Us 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.
