À propos de ce modèle
Orbis Hello est un exemple de page à propos lifestyle, construit à partir d’un seul brief écrit, et cette page documente ce brief. La couleur se réduit à bleu profond #13142D en fond, blanc #EFF4FF pour le texte et vert anis vif #6FFF00 pour les accents, composée en Anton. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. Si vous préparez un brief pour page à propos lifestyle, partez de cette composition et remplacez le sujet.
Conçu pour
- Ce design de page à propos est fait pour les agences qui ont besoin que le cadre 640x470 survive à trois séries de retours client.
- Équipes internes qui étendent ce design de page à propos et ont besoin de retrouver une typographie de 14px à 68px et des pas d’espacement de 20px à l’identique dans les nouveaux blocs.
- Cette base est calibrée pour un fondateur seul qui livre un design de page à propos pour une marque lifestyle, sans design system derrière.
Ce qui est inclus
- Les pas d’espacement sont cités. Le brief énonce ses tailles à la capture (une typographie de 14px à 68px et des pas d’espacement de 20px), une reconstruction peut donc être vérifiée au lieu d’être approximée. 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.
- Des chiffres traités comme de la typographie. Une rangée de chiffres se place au-dessus de la ligne de flottaison, composée en Anton en haut de l’échelle, l’accent #6FFF00 réservé aux chiffres qui portent une affirmation. Les chiffres portent l’accent #6FFF00 tandis que tout ce qui les entoure reste sur la couleur d’encre.
- Les chiffres portés jusqu’au build. Les espacements sont cités de la même façon (une typographie de 14px à 68px et des pas d’espacement de 20px), et non comme une échelle qui grandit toute seule.
- La preuve sur une seule rangée. Les chiffres sont traités comme de la typographie, avec des valeurs au corps display et des libellés au plus petit palier du brief, le tout en #6FFF00 ou sur la couleur d’encre plutôt que sur une carte colorée.
Animation et interaction
Une petite surface interactive
Seuls les contrôles réagissent au pointeur (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc la page paraît réactive sans transformer chaque élément en cible. Chaque état ne change qu’une propriété, ce qui garde le retour lisible. Quelques états fiables valent mieux qu’une longue liste d’effets.
Une animation qui reste discrète
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.
Le gain pour une marque lifestyle
Orbis Hello est la référence de page à propos pour une marque lifestyle, et elle répond au problème que ce public a réellement. La palette reste disciplinée (bleu profond #13142D et vert anis vif #6FFF00) et la typographie est composée en Anton, donc rien dans la composition ne dépend d’une tendance empruntée. Quand vous briefez un build, c’est la partie à copier, une promesse au corps display et le détail de soutien tenu en dessous. Elle donne à un lecteur lifestyle le chemin le plus court vers l’offre.
Ce qui bouge dans Orbis Hello
Comptez les éléments animés, la liste est courte, des états de survol et de clic. Rien ne s’anime pour lui-même dans le design de page à propos.
Le réagencement de page à propos
Le brief décrit ce qui change à chaque largeur (l’échelle est fluide plutôt que par paliers), la version mobile est donc une décision et non un écrasement. Le contraste est tenu sur l’accent #6FFF00 par-dessus le média, et la vidéo est muette et en lecture inline. Les deux états sont décrits dans le même brief.
Questions fréquentes
Le prompt de Orbis Hello est-il une spécification aboutie ou un simple point de départ?
Le prompt complet qui produit la page, avec la mise en page, la palette, la typographie et les transitions, plus un transfert vers Studio en un clic, le brief déjà prérempli. Le prompt lui-même n’est pas reproduit ici, vous pouvez le copier ou l’envoyer à Studio. La référence a été capturée en 640x470.
Quelle part de Orbis Hello dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Orbis Hello 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.
Combien de couleurs compte Orbis Hello?
La composition repose sur bleu profond #13142D, avec vert anis vif #6FFF00 qui porte les actions. La palette échantillonnée est listée en entier plus haut, et chaque valeur vient du brief du design lui-même, pas d’un template.
