À propos de ce modèle
Cette fiche présente Bloom AI en section hero, avec le brief qui a produit la page au lieu d’une simple capture d’écran. « Innovating the spirit of bloom AI » est la ligne que la mise en page doit porter. La palette se limite à bleu profond #030E1A en fond, vert sourd #AAD9C3 pour le texte et vert #2E5648 pour les accents, et la typographie est Poppins. La livraison tient en React et Lucide icons, une seule page, sans plugin ni outillage de build entre vous et le design. C’est la référence qu’il faut pour un design de section hero destiné à un produit IA ou SaaS, quand le premier écran doit sembler intentionnel.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 800x564 comme critère de recette pour la première série.
- Les responsables marketing qui héritent de ce design de section hero utiliseront des pas d’espacement de 50px pour vérifier qu’une réécriture a gardé l’échelle.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 3 900 caractères comme point de départ.
Ce qui est inclus
- Les liens avant l’action. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #2E5648, le tout au plus petit corps de l’échelle du brief. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #2E5648 est le seul élément de la barre à porter du gras.
- Le brief nomme les pas. Les tailles ont été relevées sur le rendu en 800x564, des pas d’espacement de 50px. La typographie et la mise en page partagent les mêmes pas, rien ne dérive donc quand l’une des deux est remplacée.
- Une grille de cartes porte le milieu. La grille fait l’ordre de lecture à votre place, avec des panneaux de même poids, une idée chacun, composés en Poppins à petite taille pour que la structure reste visible. Chaque panneau reprend la même disposition interne, la grille se balaie donc à la forme.
- Une navigation sans fond. La barre se pose sur la composition 800x564 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Presque aucune animation
Le brief laisse l’animation de côté et laisse la mise en page en 800x564 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.
Statique par choix
Il n’y a aucune bibliothèque de scroll ici, la composition en 800x564 reste immobile et seuls les éléments qui vous répondent bougent.
L’argument de section hero
Bloom AI fonctionne parce que sa hiérarchie est décidée plutôt que décorée. Le brief fixe des pas d’espacement de 50px, donc un nouveau texte se pose dans le cadre au lieu de le rouvrir. Bloom AI énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Les chiffres derrière section hero
Le brief est une spécification. Il énonce des pas d’espacement de 50px et nomme le cadre média en 800x564 avant qu’on dessine quoi que ce soit autour. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Par où commencer dans Bloom AI
Changez d’abord le texte et les médias, la couleur ensuite, la mise en page en dernier. Le cadre 800x564 et l’échelle Poppins tiennent la page, faites donc vos substitutions autour d’eux plutôt qu’à travers eux. 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 Bloom AI?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x564, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Lucide icons?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour React et Lucide icons, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
D’où vient le design de Bloom AI?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 800x564.
