À propos de ce modèle
Lisez Wellbeing OS comme une spécification de section hero, dont les valeurs ont été écrites avant la construction de la page. La couleur se réduit à orange profond #2C221C en fond et orange #BF9423 pour les accents, composée en Helvetica, Segoe UI, Roboto. La livraison est en React et Tailwind CSS, capturée en 1460x1080 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à 400ms de transitions, cubic-bezier(0.16,1,0.3,1) et un fond vidéo en boucle. Elle est surtout utile quand le texte de section hero Santé change sans qu’une refonte soit nécessaire.
Conçu pour
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 5,8s de vidéo en boucle derrière le texte.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 5 051 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 Wellbeing OS.
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 #BF9423, 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 #BF9423 est le seul élément de la barre à porter du gras.
- Une seule échelle, texte et cadre. Les tailles sont citées plutôt qu’héritées, des pas d’espacement de 160px, des transitions de 400ms et un easing cubic-bezier(0.16,1,0.3,1). Changez la fonte ou le texte, ces relations tiennent toujours. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement.
- Vidéo plein cadre, aucun panneau. Le cadre 1460x1080 est rempli par une seule boucle qui tourne derrière le texte et ne réclame aucun contrôle. La boucle est assez courte (5,8s) pour que l’œil la lise comme une texture et non comme une timeline.
- La typographie fait le style. La ligne display est composée en Helvetica, Segoe UI, Roboto à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. L’interlettrage est réglé taille par taille, la ligne display et la légende ne partagent donc pas la même valeur.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 5,8s en 1460x1080 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. Rien d’autre sur la page n’anime en continu, donc le média est le seul élément qui demande l’attention.
Rythme court, timings cohérents
Le brief fixe la transition à 400ms, donc une reconstruction ne peut pas lui substituer un défaut plus lent. Chaque changement d’état nomme une valeur, donc le réglage par défaut du navigateur n’est jamais utilisé. Ne livrez pas le défaut du navigateur.
L’ordre de section hero
À lire dans l’ordre, la navigation, la ligne de statistiques, le clip de fond et le pied de page. Chaque élément a un seul rôle, et l’accent orange #BF9423 est dépensé uniquement sur l’élément que vous devez presser. Un lecteur santé reçoit l’offre avant les options.
Les timings derrière section hero
Une animation aussi réduite fait reposer la page sur la typographie et le cadre. Sans 400ms de transitions, une boucle média de 5,8s et des états de survol et de clic, la composition tiendrait encore. Rien ne s’anime pour lui-même dans le design de section hero.
Par où commencer dans Wellbeing OS
Changez d’abord le texte et les médias, la couleur ensuite, la mise en page en dernier. Le cadre 1460x1080 et l’échelle Helvetica, Segoe UI, Roboto tiennent la page, faites donc vos substitutions autour d’eux plutôt qu’à travers eux. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison.
Questions fréquentes
Que contient réellement le brief derrière Wellbeing OS?
Comptez 5 051 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 Wellbeing OS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Wellbeing OS 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.
Puis-je utiliser Wellbeing OS dans un projet client?
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 1460x1080.
