Signes.

01

Le tiret pointillé.

Un trait de 4 px, un vide de 4 px, sur 1 px d’épaisseur. C’est lui qui dessine le plan : il délimite, et il ne ferme jamais rien.

Emploi

Les rails, la ligne de section, les cellules, le formulaire, le bas de l’en-tête, le haut du pied, et toutes les lignes de ces pages.

Moment

Partout où deux zones se touchent. Il remplace la bordure pleine, l’ombre et l’arrondi, qui n’existent pas sur la trame.

Jamais

En bordure pleine, en cadre fermé autour d’un bloc de texte, en double épaisseur. La seule bordure pleine est celle de la carte de citation et de l’annotation.

02

Le carré allumé.

La cellule de la trame qui s’éclaire. Petit devant un fait, grand dans la cellule allumée, à 48 px dans les bandes.

Emploi

Devant un fait (.tr-carre), dans la cellule qui finit une grille (CelluleAllumee), dans les bandes entre deux sections (Bande), devant un élément de liste dans la prose.

Moment

Quand une case de la grille serait vide, ou quand une liste a besoin d’un repère. Il s’allume à l’arrivée, puis respire.

Jamais

En puce de texte courant hors prose, en icône, en bouton. Sous 600 px, la cellule allumée d’une grille disparaît.

03

Le surlignage.

Un passage du titre est posé sur le vert ; le surlignage s’étend quand le titre apparaît. Le fond couvre le mot seul, sans l’espace avant ni l’espace après, et suit le titre s’il passe à la ligne. Au plus un passage par titre.

Emploi

Le mot du titre qui porte le gain : « grandir », « sous le même toit », « compter », « dès la première ligne », « mise en ligne ».

Moment

Sur le h2 d’une tête de section, par la prop surligne de Tete ; sur le h1 d’une page intérieure seulement si la page a une raison.

Jamais

Deux passages dans un titre, un titre entier, du corps de texte, un bouton. Ni l’espace avant ou après le mot : le fond s’arrête à ses lettres. Ni hors d’un h1 ou d’un h2 sans isoler le parent : le fond passerait sous la cellule.

<Tete variante="cellule" etiquette={ V3.offres.surtitre } titre={ V3.offres.titre } surligne={ V3.offres.surligne } sousTitre={ V3.offres.sousTitre } id="tr-offres" />

04

La flèche qui sort.

Un ↗ après le libellé de tout bouton et de tout lien de carte : l’action mène quelque part. Au survol, la flèche part de 3 px vers le haut et la droite.

Emploi

Tout bouton (Bouton, le bouton du formulaire, celui de l’en-tête), le nom d’un cas qui a sa page, les cases du sommaire, le lien vers le groupe.

Moment

Chaque fois qu’on quitte l’endroit où on est : une autre page, un autre site, l’envoi du formulaire.

Jamais

Sur un lien dans le texte courant, sur un maillon du fil d’Ariane, sur le rail, deux fois dans le même bouton.

<Bouton href="/contact/">{ V3.cta }</Bouton>
<Bouton href="/offres/" variante="trait">{ V3.ouverture.boutonOffres }</Bouton>
<Bouton href="/offres/site-internet/" variante="trait" petit>{ V3.offres.bouton }</Bouton>

05

Le trait d’attache.

Une annotation touche ce qu’elle nomme : un trait de 1 px part de son bord et se trace quand elle apparaît. Sur le premier écran de l’accueil, depuis le 12 octobre, chaque offre touche de même l’objet qu’elle nomme dans la scène : un trait pointillé, en ligne droite, de sa case à l’objet, qui s’allume avec elle.

Emploi

Sous (ou sur) chaque annotation d’une scène : 16 px, ou, ancrée sur une illustration v2, la longueur qui atteint l’objet ; et, sur l’accueil, entre chaque offre de la démonstration et l’objet qu’elle nomme dans la scène.

Moment

Dès qu’une annotation est posée sur une scène, en pourcentage ou ancrée sur un objet : le trait part du haut, ou du bas avec haut. Dans la démonstration, dès 1000 px, quand les offres entourent la scène.

Jamais

Sans annotation ni offre, entre deux blocs de texte, en flèche. Sous 700 px, l’annotation et son trait disparaissent ; sous 1000 px, les traits de la démonstration aussi.

<Puce x="2%" y="84%" n={0}>Hébergement</Puce>
<Puce x="4%" y="10%" haut vert n={1}>Sécurité</Puce>

06

Le point et le chevron.

Deux signes de ces pages et des pages intérieures : le point final vert profond des titres du design system, et le chevron qui sépare les maillons du fil d’Ariane.

<FilAriane chemin={[{ href: '/offres/', libelle: 'Offres' }, { href: '/offres/site-internet/', libelle: 'Site internet' }]} />