Couleurs.

01

Les jetons.

Onze valeurs, lues en tête de grinn.css. Chacune a un emploi écrit sur la trame ; un jeton qu’on ne sait pas employer est un jeton qui dérive.

• --grinn #98D1CB Le vert. Le carré allumé, le surlignage, le bord de l’étiquette, les cellules des bandes, la lueur sous le pointeur, le carré des listes. Jamais du texte.
• --grinn-deep #367972 Le vert profond. Le texte de l’étiquette, les numéros, le prix du suivi, le fond du bouton au survol, l’anneau de focus, la barre de lecture, le rail courant.
• --grinn-light #E9F4EA Le vert clair : l’arrivée du dégradé des carrés de bandes et de cellules, le fond d’une carte d’offre au survol et d’une offre allumée sur le premier écran de l’accueil, la cellule allumée du point fort d’une page de cas.
• --color-grinn-mid #60B8AF Le vert moyen, sans alias court (la trame l’emploie sous ce nom) : un carré sur trois des bandes, des carrés de faits et de cellules, le carré des étiquettes de section, les traits d’attache du premier écran de l’accueil, et le départ des dégradés (mêlé à 55 % au pâle dans les angles).
• --color-grinn-pale #F5FAF5 La cellule pâle (--pale dans le bloc .tr). Le fond de l’étiquette, la cellule de la scène, la tête de section en cellule, le pied, la carte au survol, le code des appels, la fiche d’une page de cas, le badge des cas.
• --ink #1C1917 L’encre. Les titres, le corps, le bouton plein, les chiffres, la citation, les faits ; une seule cellule pleine, celle de l’appel de la page Réalisations.
• --ink-2 #57534E L’encre seconde. Le chapô, le corps de tête, le texte des cartes, les annotations, les étiquettes de champ, le rail.
• --ink-3 #6F6862 L’encre troisième. Le fil d’Ariane, les légendes des chiffres, le nom d’offre dans une carte, la bordure des champs.
• --line #98D1CB Le trait, en vert Grinn sur la trame depuis le 12 octobre (#D6D3D1, gris chaud, ailleurs). Le trait. Les deux rails, la ligne de section, les cellules, la bordure du bouton au trait, de l’annotation et de la carte de citation.
• --surface #FFFFFF Le blanc. Le fond de la trame, de l’en-tête, du formulaire, de l’annotation, de la carte de citation, et le texte du bouton plein.
• --photo #F5FAF5 Le vert pâle des réserves sur la trame (gris chaud #F2F0EC avant le 12 octobre) : la photo attendue, le logo et le portrait d’une citation.

<ul class="tr-grille sys-jetons" data-lignes>
  <Jeton nom="--grinn" valeur="#98D1CB" emploi="Le carré allumé, le surlignage, le bord de l’étiquette." />
</ul>

02

Jamais d’aplat.

Décision de JB : pas de section sombre, pas de bandeau vert. Le vert est un trait, une cellule allumée, un surlignage. La cellule pâle, dans une grille, est la seule surface colorée tolérée.

Emploi

Une cellule pâle dans une grille : la cellule de la scène, la tête de section en cellule, la cellule allumée, le pied, une carte au survol.

Moment

Quand une cellule doit se distinguer de ses voisines sans sortir du plan : elle reste délimitée par le même trait pointillé.

Jamais

Une section entière en vert ou en encre, un bandeau, un dégradé qui remplit toute une cellule. Le vert #98D1CB vibre en grand aplat, et un fond sombre casse le plan ; le dégradé reste ramassé dans un angle.

<Grille classe="tr-cas">
  <Cellule><Etiquette>Vous reprenez la main</Etiquette></Cellule>
  <Cellule pale><Etiquette>Vous nous le confiez</Etiquette></Cellule>
</Grille>

Les pages des cas, refaites le 12 octobre, ont deux surfaces pleines, et c’est voulu : la cellule allumée du point fort, en vert clair (--grinn-light), d’un rail à l’autre, et la cellule d’appel de la page Réalisations, sur l’encre, validée par JB sur la maquette. Toutes deux restent des cellules posées sur la trame ; aucune section n’est peinte. La vitrine d’un cas est une image : sa matière, son voile et ses cadres n’en font pas une surface de la page.

03

Où va le vert.

Chaque emploi du vert dans le bloc .tr de grinn.css. Depuis le 12 octobre, la trame suit la direction « Les verts en relief », choisie par JB, curseur un peu baissé : aucune teinte nouvelle, toute la gamme des verts Grinn et le dégradé du site, le noir réservé au texte, aux titres de section et au bouton principal. Rien d’autre n’est vert : si une règle verte manque ici, elle n’existe pas.

04

Contrastes.

Les ratios sont calculés dans cette page, par la luminance relative de WCAG 2, sur les paires que la trame emploie vraiment. Seuils : 4,5:1 pour tout texte, 3:1 pour le grand texte.