À propos de ce modèle
Stark Minimal Footer est un design de pied de page pour une entreprise industrielle, livré avec les instructions qui l’ont produit. La page affiche son propre titre, « © 2026 EngineTech. All rights reserved », et la composition est construite autour de ces mots exacts. La palette repose sur noir #0A0A0A en fond et blanc #FFFFFF pour le texte, et la page est composée en Geist. L’ensemble est livré en un seul composant, ce qui permet de transposer un design de pied de page dans un projet sans passation de design. L’animation se limite à 180ms de transitions. Elle est surtout utile quand le texte de pied de page Industrie change sans qu’une refonte soit nécessaire.
Conçu pour
- Mettez un seul composant dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Ce design de pied de page vise les équipes qui connaissent déjà un seul composant et veulent simplement retrouver un breakpoint à 1820px par écrit.
- Empruntez la structure de pied de page telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un cadre 640x472.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La barre se superpose à pied de page au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. Sous 1820px, les liens se replient au lieu de passer sur une seconde ligne.
- Chiffres sur la ligne de base. Les chiffres sont composés en Geist à une taille plus proche du titre que du texte courant. Les chiffres reposent sur la même ligne de base que le texte autour, la rangée se lit donc comme un seul objet.
- Le comportement est défini par largeur. Les changements de largeur sont gérés dans la typographie même, un clamp entre 22px et 14px porte le titre du téléphone au desktop sans composition mobile séparée. Les contrôles restent assez grands pour être touchés et le texte garde son ordre de lecture à toute largeur. Dessinez la mise en page étroite, ne l’écrasez pas.
- Le pied de page est une composition entière. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. L’accent est réemployé sur une seule action du pied de page plutôt que sur toute la bande. La référence a été capturée en 640x472.
Animation et interaction
Des durées en millisecondes
Les changements d’état sont fixés à 180ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Si l’easing change, la durée doit être revue avec lui. Conservez les durées quand vous changez l’habillage de la page.
Les contrôles forment la couche interactive
Les états sont gérés composant par composant (des états de survol sur les boutons et les liens plutôt que sur chaque carte) plutôt que par une couche d’animation globale. Les cibles interactives sont assez grandes pour être touchées et le traitement du pointeur reste cohérent entre elles.
L’ordre de pied de page
Lisez le premier écran d’un seul passage et l’offre est déjà claire, car l’ordre de la navigation, la ligne de statistiques et le pied de page se suit d’un bout à l’autre, avec des pas d’espacement de 14px et des transitions de 180ms comme séparation plutôt que des traits décoratifs. Un lecteur industrie reçoit l’offre avant les options.
Les chiffres derrière pied de page
Le coût d’une échelle fixe est une marge d’improvisation plus faible, car la composition reste cohérente grâce à des pas d’espacement de 14px et des transitions de 180ms et un nouvel élément doit s’ajuster plutôt que se poser. Rien dans le design de pied de page ne dépend d’une valeur par défaut.
Le réagencement de pied de page
Comparé à une mise en page mobile qui masque des sections, cet exemple les garde et change leur forme, l’échelle est fluide plutôt que par paliers et la mise en page bascule à 1820px. Rien d’important n’est supprimé en largeur étroite.
Questions fréquentes
Quelle est la longueur du prompt derrière Stark Minimal Footer?
Comptez 5 437 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.
Pourquoi la fiche mentionne-t-elle un seul composant?
La fiche indique un seul composant pour la provenance, parce que Stark Minimal Footer 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 Stark Minimal Footer n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 5 437 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
