À propos de ce modèle
La capture de Portal a été faite en 800x609 et conservée comme spécification, pas comme image de galerie. Elle ouvre sur « A voyage through forgotten realms, where past and future intertwine » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette est noir #292926 en fond, orange sourd #F3BC9E pour le texte et rouge #E1836B pour les accents, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 800x609 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à 300ms de transitions. Cette référence s’adresse à une marque lifestyle qui veut un premier écran réglé avant le début du build.
Conçu pour
- Cette base est calibrée pour un fondateur seul qui livre un design de section hero pour une marque lifestyle, sans design system derrière.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 6 663 caractères comme point de départ.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Portal.
Ce qui est inclus
- Une barre de navigation discrète. 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 #E1836B, 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 #E1836B est le seul élément de la barre à porter du gras. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- Les tailles sont dans le brief, pas dans une échelle. Typographie et espacements sortent ici de la même liste, des pas d’espacement de 20px et des transitions de 300ms. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu.
- Des fontes à rôle unique. Avec Inter aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. Le texte d’interface reste sur une seule fonte, la page ne mélange donc jamais deux voix au même corps.
- Les liens avant l’action. La barre se pose sur la composition 800x609 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Rythme court, timings cohérents
Survol, appui et focus se règlent tous en 300ms, et c’est ce qui rend l’interface immédiate. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger.
L’interaction reste locale
L’interaction reste locale à chaque contrôle (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc rien d’autre sur la page ne bouge. Chaque état ne change qu’une propriété, ce qui garde le retour lisible.
Comment Portal ordonne la première lecture
L’attention est dirigée plutôt que laissée au hasard. La page le dit sans détour, « A voyage through forgotten realms, where past and future intertwine ». La séquence suit la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond, et chaque étape est calibrée sur des pas d’espacement de 20px et des transitions de 300ms pour que rien n’arrive dans le désordre. Un lecteur lifestyle reçoit l’offre avant les options.
Par où commencer dans Portal
Commencez par la promesse, pas par la décoration. Réécrivez « A voyage through forgotten realms, where past and future intertwine » en une phrase qui dit ce que vous faites, puis composez-la en Inter au corps display du brief. Remplacez rouge #E1836B par votre propre accent et vérifiez-le contre noir #292926 avant de toucher au reste. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Lire Portal comme une spécification
Presque chaque décision ici est une valeur vérifiable, des pas d’espacement de 20px et des transitions de 300ms. Le média est une image fixe en 800x609. La typographie reste en Inter, une substitution doit donc garder les mêmes proportions. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Que contient réellement le brief derrière Portal?
Comptez 6 663 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.
Faut-il React et Tailwind CSS pour reconstruire Portal?
La fiche indique React et Tailwind CSS pour la provenance, parce que Portal 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.
D’où vient le design de Portal?
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 800x609.
