À propos de ce modèle
Cette fiche présente Beauty Categories en section fonctionnalités, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La palette est blanc #EBEBEB en fond, orange profond #251E18 pour le texte et orange #593C2D pour les accents. La livraison est en React et Tailwind CSS, capturée en 640x470 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 150ms de transitions, assez discrète pour que le texte reste au premier plan. C’est la référence qu’il faut pour un design de section fonctionnalités destiné à une marque e-commerce, quand le premier écran doit sembler intentionnel.
Conçu pour
- Cette base est calibrée pour un fondateur seul qui livre un design de section fonctionnalités pour une marque e-commerce, sans design system derrière.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section fonctionnalités dont le titre doit rester aussi long que celui de Beauty Categories.
- Quiconque briefe un modèle sur un design de section fonctionnalités utilisera le prompt de 4 038 caractères comme point de départ.
Ce qui est inclus
- Mesuré, pas estimé à l’œil. Le brief énonce ses tailles à la capture (des pas d’espacement de 20px et des transitions de 150ms), une reconstruction peut donc être vérifiée au lieu d’être approximée. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme.
- Aucune couleur décorative. L’accent porte chaque action de la page, orange #593C2D pour les boutons et les liens, blanc #EBEBEB pour le cadre derrière eux. Tout le reste repose sur blanc #EBEBEB, ce qui garde lisible une palette saturée.
- Une structure en un seul écran. La construction de section fonctionnalités fait arriver le texte avant tout le reste, la typographie porte la hiérarchie, le cadre 640x470 tient la composition, et les valeurs secondaires restent discrètes. La page est une seule composition en 640x470, c’est pourquoi elle tient quand le texte change. Le brief est la spécification.
- Les tailles sont dans le brief, pas dans une échelle. Les espacements sont cités de la même façon (des pas d’espacement de 20px et des transitions de 150ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Assez rapide pour être voulu
Les changements d’état sont fixés à 150ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger.
Statique par choix
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. La composition reste immobile, donc la hiérarchie doit porter la page, et elle le fait. Aucune timeline de scroll nécessaire.
Par où commencer dans Beauty Categories
Là où un thème vous donne des composants, ce brief vous donne une composition, des pas d’espacement de 20px et des transitions de 150ms et un cadre média, le sujet restant à votre charge. Le cadre et l’échelle sont ce qu’il faut laisser tranquilles.
Le gain pour une marque e-commerce
Comptez les décisions de section fonctionnalités, elles remontent toutes à un seul document, 4 038 caractères qui nomment le cadre en 640x470, la typographie et le rythme. Elle donne à un lecteur e-commerce le chemin le plus court vers l’offre.
Comment Beauty Categories ordonne la première lecture
Lisez le premier écran d’un seul passage et l’offre est déjà claire, car l’ordre de la ligne de statistiques, la grille de cartes et le clip de fond se suit d’un bout à l’autre, avec des pas d’espacement de 20px et des transitions de 150ms comme séparation plutôt que des traits décoratifs. Un lecteur e-commerce reçoit l’offre avant les options.
Questions fréquentes
Que recevez-vous en copiant le brief de Beauty Categories?
Comptez 4 038 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.
Quelle part de Beauty Categories dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Beauty Categories 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 se comportent les transitions de 150ms dans Beauty Categories?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 150ms. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
