Guide de style

Noms de classes « Client-First », variables Webflow et contrôles du Designer. Code personnalisé uniquement pour ce que le Designer ne permet pas d'exprimer (:has, :checked, autofill, keyframes), placé dans l'en-tête de la page et commenté.

Le rythme vertical correspond à l'espacement au sein d'une section, et non à la marge entre les sections. À l'intérieur d'une section, l'espacement est défini par une propriété « flex » ou un espacement de grille, et non par la propriété « margin-bottom ». Chaque classe de texte doit réinitialiser ses marges supérieure et inférieure à 0, sinon les marges par défaut de Webflow pour les titres et les paragraphes s'appliquent.

Utiliser le px uniquement pour les bordures et les ombres, qui sont des éléments décoratifs. Utiliser le rem pour la police, les marges intérieures et les espacements, afin qu’ils s’adaptent à la taille de police choisie par le lecteur. Utiliser le ch pour la mesure de lecture (la largeur maximale du texte est de 60 ch). Définir l’espacement entre les lettres en em, afin que celui-ci s’adapte à la taille de la police.

Les dimensions sont définies par point de rupture dans le Designer (ordinateur de bureau, tablette, mobile), jamais à l'aide de la fonction `clamp()`. Ce que vous voyez dans un point de rupture correspond exactement à ce qui sera affiché.

Les classes de texte définissent la police, la taille et la couleur. L'alignement et la largeur sont déterminés par l'élément conteneur : le même élément `heading-style-h1` est centré sur la page d'accueil (à l'intérieur de `section-header.is-center`) et aligné à gauche sur la page « Contact » et « Ventes ».

Chaque règle est presque noire, jamais grise ; les règles grises sont considérées comme manquantes. La propriété « border/subtle » s'applique uniquement aux bords des panneaux.

Une modification spécifique à une page est convertie en classe de liste déroulante ; ainsi, la classe partagée reste inchangée partout ailleurs. Nommez la liste déroulante en fonction de sa fonction (is-line, is-full, is-tight), et renommez-la lorsque celle-ci change.

Pas d'étapes épinglées, d'alignement au défilement ni de défilement par pas à l'aide de la molette. La propriété « motion » ne s'applique qu'au contenu qui défile normalement ; l'utilisation de la propriété CSS native « sticky » est autorisée, car c'est toujours le lecteur qui la contrôle.

Un paragraphe d'introduction, à utiliser avec parcimonie lorsqu'une section nécessite une mise en valeur supplémentaire.

Corps du texte. Noir, jamais en arrière-plan ni en couleur secondaire. À associer à la propriété `max-width-text` (60 caractères) pour tout texte dépassant la longueur d'une ligne.

Détails secondaires : rôles associés à un nom de personnage, descriptions des cartes.

Les boutons, balises, pilules, onglets et éléments de navigation conservent leur propre classe, mais associent la taille de police, l'interligne et la famille de polices aux mêmes jetons ui/type. Ne saisissez jamais une taille de police brute.

Les chiffres « Geist Mono » (ui-num, ui-mono, ui-deal_num), les initiales de l'avatar en 11 px, le glyphe de la touche du clavier (ui-key) et l'heure de la barre d'état avec une épaisseur de 600.

Une taille unique partout : 16 px, aussi bien sur les écrans d'ordinateur que sur ceux des téléphones. Le glyphe reprend la couleur de son conteneur ; veillez donc à définir la couleur sur l'élément parent, et jamais sur l'icône elle-même. Ne collez jamais un fichier SVG directement dans une illustration : ajoutez d'abord l'icône au dossier « Product Icons », puis insérez-la.

Les icônes « Orbit » et « Consolidate » conservent leurs dimensions d'origine. Les flèches filaires, les étoiles, les curseurs, les barres ondulées et les avatars photo ne sont pas des icônes.

container-large : 90 rem (1 440 px) ; ainsi, les ordinateurs portables dont la largeur est comprise entre 1 440 et 1 728 px conservent une marge latérale. container-medium : 64 rem ; container-small : 48 rem. Les bandes multimédias se situent à l'intérieur du conteneur, sans déborder ; seule la bande « hero » dépasse de celui-ci.

1,5 rem de chaque côté à chaque point de rupture.

Marge supérieure et inférieure de chaque section. La classe « .is-hero » définit une marge supérieure de 3rem afin que la photo du produit s'affiche dès l'arrivée sur la page.

Titre et introduction d'une section. La classe .is-tight réduit l'espace par rapport au contenu, tandis que la classe .is-center centre tout ce qu'elle contient (bannière d'accueil).

D'après les mesures effectuées dans Figma : les cartes en 5-up et la rangée de logos en 6-up ne s'adaptent pas à une grille à 12 colonnes. Ce qui reste constant, ce sont la mesure et l'espacement de 1,5 rem, de sorte que les rangées constituent des fractions égales. Les sections « hero » à deux colonnes utilisent leur propre grille (contact-hero : 1 fr 1 fr, espacement de 6 rem, empilées sur tablette).

Ordinateur de bureau à partir de 992 px (avec 1 440 et 1 920 au-dessus), tablette jusqu'à 991 px, mobile en mode paysage jusqu'à 767 px, mobile en mode portrait jusqu'à 479 px. La police et l'espacement changent sur tablette et mobile.

Structure d'une section : une ligne horizontale traversant le conteneur, suivie de son titre. Utilisée dans chaque section de la page d'accueil après la zone « hero », ainsi que dans la zone « hero » de la page « Contact et ventes ».

La règle seule, lorsque le contenu définit son propre espacement (appel à l'action dans le pied de page).

Les listes sont séparées par une fine ligne horizontale en haut de chaque ligne, jamais uniquement par des espaces.

Des angles vifs partout : cartes, panneaux, zones, tuiles de logo. La seule exception est le CTA principal, qui se présente sous la forme d’une « pilule » complète (rayon de 999 px).

Les traits de cadre utilisent le contour (les quatre styles longs) ; ils n'occupent donc pas d'espace dans la mise en page et s'affichent par-dessus les éléments enfants. Tout élément unilatéral, comme une règle horizontale ou un soulignement, utilise la bordure.

Wrapper .signup-form_wrap, formulaire avec l'attribut data-folk-demo="contact", un champ input[type=email], un élément .js-select dont les valeurs sont 1-2, 3-9, 10-49, 50-249, 250-999, 1000+. Le script recherche l'entreprise lorsque le champ e-mail n'est plus au focus, puis redirige les personnes éligibles (10+) vers /demo-calendly, celles éligibles (3–9) vers /book-a-folk-demo-2, et toutes les autres vers la redirection pour les personnes non éligibles.

Adresse e-mail, taille de l'équipe et bouton dans une ligne encadrée, 0,875 rem, 3 rem de hauteur.

Contactez le service commercial. Pas de cadre, pas d'arrière-plan, texte de 1,25 rem, souligné en noir de 1 px, hauteur de 4 rem. Le texte de remplacement correspond au titre (pas d'étiquettes ; chaque champ comporte une balise `aria-label`). Le texte de remplacement et la liste déroulante non sélectionnée s'affichent en style « texte/secondaire ». Pas de soulignement lorsque le champ est sélectionné : le curseur sert d'indicateur, et la liste déroulante n'affiche une ligne de 2 px que lorsqu'elle est sélectionnée au clavier.

Pilule noire, pleine largeur, 1 rem, 3,5 rem de hauteur.

Champs rapprochés (0,5 rem), pile de boutons et de notes (1 rem), bloc (2 rem) entre les deux groupes.

Une commande « select » native par rapport aux tuiles d'options : ces dernières nécessitaient un script intermédiaire pour accéder au script de qualification, tandis que la commande « select » n'en a pas besoin. L'en-tête de la page recouvre la couleur bleue de la fonction de remplissage automatique de Chrome et conserve la police du champ sur les valeurs suggérées.

Sur une section ou une grille. Le chargement s'adapte à la page (héros) : affichage lorsque le groupe apparaît à l'écran, défilement élément par élément au fur et à mesure de leur apparition. L'attribut `data-reveal-at="60%"` retarde l'affichage jusqu'à ce que le haut de la page atteigne cette hauteur.

up : fondu entrant et remontée de 1 rem. lignes : un titre qui s'affiche ligne par ligne. fondu : opacité uniquement, utilisé pour les conteneurs très fins afin que la règle s'affiche avec sa section.

Un attribut au lieu de trois pour les modèles habituels.

Les titres situés au-dessus de la ligne de flottaison utilisent l'effet de révélation par CSS uniquement ; ils sont donc immédiatement pris en compte dans le LCP (First Contentful Paint). N'appliquez jamais d'effet de fondu JavaScript à un conteneur contenant une balise H1.

Que ce soit avec des animations réduites, sans JavaScript ou dans le Designer, tout est clairement visible. Le moteur utilisé est reveal.js, situé dans le pied de page du site ; les modes réservés à la page d'accueil se trouvent dans reveal-extra.js.

Toute modification apportée à l'un ou l'autre de ces éléments se répercute sur toutes les pages. La variante « Base » du pied de page inclut le formulaire CTA. Ne renommez jamais les éléments .nav-items-wrapper, .nav-item-wrapper, .logo-context-menu ou .sub-nav-item : les scripts et les feuilles de style CSS s'y réfèrent.

Le mur des logos et les rangées de témoignages du site, réutilisés dans le cadre des ventes par contact.

Le formulaire de démonstration intégré, déjà relié au script de qualification.

Les illustrations sont des éléments Webflow codés, et non des images : elles restent nettes quelle que soit la résolution (DPI), sont interactives et peuvent être animées. Elles utilisent leurs propres classes « ui- » et leurs propres jetons, et n'empruntent jamais les espacements de la page. Chaque illustration animée contient une instance de son composant « Code », ce qui permet de ne modifier le script qu'une seule fois. Toutes les illustrations sont répertoriées à l'adresse /illustrations ; ajoutez-y chaque nouvelle illustration.

• Obtenir une démonstration
• Découvrez quelle formule vous convient le mieux