À propos de ce modèle
Axion About est un exemple de page à propos SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. « Through research, creative thinking and iteration we help growing brands realize their digital full potential » est la ligne que la mise en page doit porter. Toute la page repose sur blanc #EDEDEE en fond, rouge profond #3E3133 pour le texte et orange vif #F26522 pour les accents. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. La page s’en tient à cubic-bezier(0.25,0.1,0.25,1). Traitez-la comme le brief de page à propos pour un produit IA ou SaaS, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 640x468 comme critère de recette pour la première série.
- Les responsables marketing qui héritent de ce design de page à propos utiliseront une typographie de 12px à 18px et des pas d’espacement de 12px pour vérifier qu’une réécriture a gardé l’échelle.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de page à propos comme le motif que toutes les autres pages recopient.
Ce qui est inclus
- Rien n’est hérité ici. Les tailles ont été relevées sur le rendu en 640x468, une typographie de 12px à 18px, des pas d’espacement de 12px et un easing cubic-bezier(0.25,0.1,0.25,1). Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur.
- La pastille d’annonce. L’annonce est une pastille #F26522 au-dessus du titre, d’un corps inférieur au texte secondaire pour qu’elle se lise comme un libellé et non comme un second titre. Le badge porte #F26522 tandis que le titre reste sur la couleur d’encre.
- Le brief nomme les pas. Les espacements sont cités de la même façon (une typographie de 12px à 18px, des pas d’espacement de 12px et un easing cubic-bezier(0.25,0.1,0.25,1)), et non comme une échelle qui grandit toute seule.
- Un badge au-dessus de la ligne de flottaison. Un badge, un seul message.
Animation et interaction
Assez rapide pour être voulu
Le budget d’animation est faible et explicite, 0 en cubic-bezier(0.25,0.1,0.25,1), appliqué aux changements d’état plutôt qu’aux entrées. Les états de focus utilisent la même durée que le survol, donc le retour au clavier et à la souris est identique.
Presque aucune animation
Le brief laisse l’animation de côté et laisse la mise en page en 640x468 porter la page, les états de survol et d’appui étant les seuls changements. Le mouvement est traité comme un retour d’information et non comme une décoration. Gardez le mouvement sur les contrôles.
Comment Axion About ordonne la première lecture
Ici, l’ordre est le design, car la séquence de le badge d’annonce et la ligne de statistiques met l’offre avant la preuve, et l’écart entre eux tient à une typographie de 12px à 18px et des pas d’espacement de 12px. Un lecteur SaaS reçoit l’offre avant les options.
L’argument de page à propos
Un hero standard et le design de page à propos utilisent les mêmes pièces. Ici, elles sont ordonnées par le badge d’annonce et la ligne de statistiques et mesurées avec une typographie de 12px à 18px, des pas d’espacement de 12px et un easing cubic-bezier(0.25,0.1,0.25,1), si bien que l’écran se lit comme une séquence et non comme un conteneur. Axion About énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Par où commencer dans Axion About
La plupart des gens commencent par la couleur d’accent. Commencez plutôt par la promesse, réécrivez la ligne affichée, puis retestez orange vif #F26522 sur vos propres médias. Votre accent doit passer le même test de contraste que celui de la référence.
Questions fréquentes
Que contient réellement le brief derrière Axion About?
Comptez 4 393 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.
Le brief de Axion About est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 4 393 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Axion 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.
