À propos de ce modèle
Alumica est une référence de travail pour un produit fintech, un exemple de section hero entièrement mesuré et prêt à reproduire. La page affiche son propre titre, « Automation & Fintech », et la composition est construite autour de ces mots exacts. La palette repose sur indigo profond #080210 en fond et orange vif #FF8A00 pour les accents, et la page est composée en Inter. L’ensemble est livré en un seul composant, ce qui permet de transposer un design de section hero dans un projet sans passation de design. L’animation se cantonne à 0.3s de transitions et un fond vidéo en boucle. Elle est surtout utile quand le texte de section hero Fintech change sans qu’une refonte soit nécessaire.
Conçu pour
- Prestataires qui récupèrent un design de section hero et veulent voir un seul composant dans le dépôt avant le premier commit.
- Ce design de section hero vise les équipes qui connaissent déjà un seul composant et veulent simplement retrouver un cadre 2056x1396 par écrit.
- La page sert aux développeurs front-end qui reconstruisent un design de section hero pour un produit fintech en un seul composant et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- Une navigation sans fond. La navigation est une bande fine et non un bandeau, avec le nom de marque à gauche, les liens vers le centre droit et une action en #FF8A00, le tout posé en tête de section hero, sans fond propre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #FF8A00 est le seul élément de la barre à porter du gras.
- Chaque mesure est écrite. La mise en page est résolue sur des valeurs fixes (des pas d’espacement de 10px et des transitions de 0.3s), ce qui garde le premier écran composé à n’importe quelle largeur. 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.
- Un média sans surcouche. La composition se construit par-dessus le clip 2056x1396 et non à côté, le média n’obtient donc jamais de panneau ni de bordure. Une image d’attente en 2056x1396 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Le corps display porte le ton. La typographie est Inter, et le brief assigne un rôle à la fonte plutôt que de mélanger pour varier. Graisses, interlettrage et paliers de taille sont spécifiés, la hiérarchie survit donc à un remplacement. Les chiffres partagent la fonte d’interface, statistiques et libellés appartiennent donc au même système.
Animation et interaction
Tout le budget d’animation
Survol, appui et focus se règlent tous en 0.3s, et c’est ce qui rend l’interface immédiate. L’easing est spécifié avec la durée (0.3s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Du survol, mais avec parcimonie
Le retour d’information se limite à des états de survol sur les boutons et les liens plutôt que sur chaque carte, et c’est ce qui évite à un premier écran dense de paraître surchargé. Les états viennent de la palette de la page et non d’un défaut de composant. Gardez la couche interactive réduite.
Lire Alumica comme une spécification
2 424 caractères de brief produisent une spécification complète. La partie porteuse est courte, des pas d’espacement de 10px et des transitions de 0.3s. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Par où commencer dans Alumica
La substitution directe a une limite, car si votre produit demande une autre hiérarchie, il se heurtera à des pas d’espacement de 10px et des transitions de 0.3s. Dans ce cas, changez l’ordre d’abord et les valeurs ensuite. Le sujet est la partie qui doit changer.
Comment Alumica ordonne la première lecture
Un ordre strict coûte de la souplesse par la suite. Ajoutez une section dans le premier écran et il faut recalculer des pas d’espacement de 10px et des transitions de 0.3s, parce que la séquence porte la structure au lieu de la décorer. Un lecteur fintech reçoit l’offre avant les options.
Questions fréquentes
Que contient réellement le brief derrière Alumica?
Comptez 2 424 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 Alumica dépend de un seul composant?
La fiche indique un seul composant pour la provenance, parce que Alumica 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.
Pourquoi le prompt de Alumica n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 2 424 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
