À propos de ce modèle
La capture de ADHD Planner a été faite en 1458x1080 et conservée comme spécification, pas comme image de galerie. La palette est orange sourd #F6E4CF en fond, orange profond #321C04 pour le texte et orange sourd #D9C4AA pour les accents, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 1458x1080 pour que le cadre soit fixé avant la première ligne de code. La page s’en tient à 300ms de transitions, cubic-bezier(0.77,0,0.175,1) et un fond vidéo en boucle. Empruntez la structure et pas le sujet, car les valeurs de section tarifs passent à votre marque sans modification.
Conçu pour
- Partez de une typographie de 42px à 96px et des pas d’espacement de 25px et laissez la palette suivre, car ce sont les espacements qui font lire ce design de section tarifs.
- Cette page est dimensionnée pour les chefs de produit qui veulent un design de section tarifs cadré sur un sprint et aucun nouveau visuel à produire.
- Ce design de section tarifs sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte santé peut porter 7,3s de vidéo en boucle.
Ce qui est inclus
- Une navigation sans fond. Nom de marque, liens et action en #D9C4AA partagent une même ligne de base, c’est ce qui évite qu’une rangée fine paraisse accidentelle. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #D9C4AA est le seul élément de la barre à porter du gras. Dessinez l’état replié avant d’ajouter un sixième lien.
- Le brief nomme les pas. Chaque mesure du brief est un nombre que vous pouvez remesurer, une typographie de 42px à 96px, des pas d’espacement de 25px, des transitions de 300ms et un easing cubic-bezier(0.77,0,0.175,1). Le brief énonce des valeurs et non des proportions, la composition garde donc ses relations quand le texte change de longueur.
- Un clip, pas une illustration. Le média fait un travail d’ambiance et non de récit, une seule boucle de 7,3s en 1458x1080 derrière tout le reste. La boucle est assez courte (7,3s) pour que l’œil la lise comme une texture et non comme une timeline.
- Les cartes font la structure. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de section tarifs balayable. Les titres internes des panneaux se placent un palier au-dessus de leur propre texte, et non un palier sous le titre de la page. L’ordre des panneaux est l’ordre de lecture.
Animation et interaction
De l’animation sur le texte seul
L’animation d’entrée est dépensée sur un seul élément (les sections se révèlent à leur entrée dans le viewport), et c’est ce qui évite à un premier écran chargé de paraître surchargé. En mouvement réduit, l’élément apparaît simplement et la mise en page ne bouge pas. Testez la page sans l’animation.
Une boucle, pas une timeline
Un clip de 7,3s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
L’ordre de section tarifs
Une page de ce type enterre d’habitude l’action sous une grille de fonctionnalités. Celle-ci place la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes dans une séquence fixe, avec l’action dans le premier écran plutôt qu’après trois écrans de défilement. Un lecteur santé reçoit l’offre avant les options.
Les timings derrière section tarifs
Là où un template anime chaque section à l’entrée, ce design anime 300ms de transitions, une boucle média de 7,3s et une apparition au scroll puis se tient tranquille. Rien ne s’anime pour lui-même dans le design de section tarifs.
Adapter section tarifs à votre marque
Composez le nouveau texte au corps d’affichage nommé dans le brief (une typographie de 42px à 96px et des pas d’espacement de 25px), et le reste de l’échelle suit sans refonte. La composition est la partie réutilisable, et elle survit à une autre marque.
Questions fréquentes
Que faire du brief de ADHD Planner une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 8 810 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que contient réellement le brief derrière ADHD Planner?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1458x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de section tarifs de ADHD Planner avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que ADHD Planner 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.
