À propos de ce modèle
Rocket Pricing est un exemple de section tarifs SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. La page affiche son propre titre, « Clear pricing plans that scale with you », et la composition est construite autour de ces mots exacts. La palette repose sur noir #0E0D0E en fond, et la page est composée en Inter. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de section tarifs dans un projet sans passation de design. Traitez-la comme le brief de section tarifs pour un produit IA ou SaaS, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Équipes growth qui rhabillent un design de section tarifs pour un produit IA ou SaaS et veulent garder le cadre 640x472 pendant que le texte de l’offre change.
- Si trois personnes doivent modifier ce design de section tarifs, donnez aux responsables de contenu des pas d’espacement de 11px plutôt qu’une capture d’écran.
- Équipes produit qui rédigent leurs propres textes de Section tarifs et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
Ce qui est inclus
- Rien n’est hérité ici. Typographie et espacements sortent ici de la même liste, des pas d’espacement de 11px. Chaque valeur se vérifie contre le prompt capturé, ce qui rend une reconstruction vérifiable plutôt qu’approximative. Mesurez avant d’ajuster.
- Une pastille pour la seule nouveauté. Un badge, un message. La pastille se place au-dessus du titre en Inter au plus petit palier, et rien d’autre ne vient concurrencer cette position. Il n’y a qu’une annonce, c’est ce qui donne au badge sa valeur d’information.
- Une structure en un seul écran. 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. Gardez le cadre, changez le sujet.
- Des tailles fixées par le brief. Les espacements sont cités de la même façon (des pas d’espacement de 11px), et non comme une échelle qui grandit toute seule.
Animation et interaction
Le retour sur les contrôles
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. Le retour d’information se limite aux contrôles, donc la composition reste immobile autour d’eux.
Statique par choix
Le brief laisse l’animation de côté et laisse la mise en page en 640x472 porter la page, les états de survol et d’appui étant les seuls changements. La composition reste immobile, donc la hiérarchie doit porter la page, et elle le fait.
Par où commencer dans Rocket Pricing
Comparez avec un départ sur page blanche. Ici, le cadre (640x472) est fixé et le travail sur des pas d’espacement de 11px est déjà fait, donc l’essentiel est de substituer, pas de composer. Réécrivez la ligne affichée avant de toucher à la couleur.
Pourquoi cette composition fonctionne pour SaaS
8 841 caractères de brief produisent un écran sans remplissage. Les valeurs y sont explicites (des pas d’espacement de 11px), et c’est pourquoi la composition tient encore quand les mots changent. Rocket Pricing énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Comment Rocket Pricing ordonne la première lecture
Une page de ce type enterre d’habitude l’action sous une grille de fonctionnalités. Celle-ci place le badge d’annonce, la ligne de statistiques, la grille de cartes et la liste de fonctionnalités dans une séquence fixe, avec l’action dans le premier écran plutôt qu’après trois écrans de défilement. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière Rocket Pricing?
Comptez 8 841 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 Rocket Pricing est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 8 841 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 Rocket Pricing?
La fiche indique React et Tailwind CSS pour la provenance, parce que Rocket Pricing 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.
