Système

Les jetons dont le site est fait. Cette page est vivante : elle lit les mêmes variables que le reste du produit, donc elle ne peut pas mentir sur ce qui est réellement en vigueur.

Couleurs

Des neutres presque parfaitement gris, pour que l'accent soit la seule chose chaude de la page. Un seul accent, sur tout le site, dans les deux thèmes.

Neutres

--paper

Fond de page

--sunken

Creux : gouttières de grille, pistes

--raised

Surfaces posées : contrôles, panneaux

--rule

Filets de structure

--rule-strong

Filets appuyés, bordures de contrôles

--ink-3

Texte tertiaire, étiquettes

--ink-2

Texte secondaire, corps long

--ink

Texte principal

Accent

--accent

Aplats, marques graphiques

--accent-ink

Accent en taille de texte, contraste AA

--accent-wash

Fond teinté très léger

--accent-contrast

Texte posé sur un aplat d'accent

L'accent existe en deux valeurs parce qu'un vermillon lisible en aplat ne l'est plus en corps de texte. Ce texte utilise accent-ink et passe le seuil AA sur les deux fonds.

Typographie

Instrument Sans pour la voix, IBM Plex Mono pour la donnée. Pas de serif : rien dans ce sujet ne relève de l'édition ou du patrimoine.

Affichage

14 Sol

Titre de section

Treize mois de vingt-huit jours

Sous-titre

Chaque mois commence un lundi et finit un dimanche.

Corps

Kodak a fait tourner ses usines sur ce calendrier de 1928 à 1989.

Corps réduit

Une lunaison dure 29,53 jours. Un mois fixe en dure 28.

Chiffres

Le produit est une grille de nombres qui changent chaque seconde. Ils sont donc tous tabulaires : une horloge qui gigote est une horloge cassée.

Plex Mono, chasse fixe

11 : 08 : 41

11 : 08 : 42

Sans, chasse proportionnelle

11 : 08 : 41

11 : 08 : 42

Formes

Un instrument est anguleux. Trois rayons seulement, chacun avec un emploi, et aucun rayon en gélule nulle part.

--r-0 0 px

Cellules de calendrier, filets, blocs pleine largeur

--r-1 3 px

Contrôles : boutons, champs, puces

--r-2 6 px

Surfaces flottantes : panneaux, dialogues

Mouvement

Trois courbes, six durées. Aucune animation n'existe sans raison : hiérarchie, récit, retour d'action ou changement d'état.

ease-outcubic-bezier(0.23, 1, 0.32, 1)

Entrées et sorties. Le mouvement démarre immédiatement, donc l'interface répond.

ease-in-outcubic-bezier(0.77, 0, 0.175, 1)

Déplacement ou morphing à l'écran, quand les deux extrémités doivent se poser.

ease-drawercubic-bezier(0.32, 0.72, 0, 1)

Course de tiroir, à la iOS. Longue détente, arrivée douce.

Durées

--t-pressLa pression elle-même

--t-releaseLe relâchement : l'interface qui répond

--t-hintInfobulles, petits popovers

--t-menuMenus, sélecteurs, bascule de thème

--t-panelDialogues, tiroirs

--t-storyMouvement explicatif : le morphing des grilles

Tout ce qui répond au doigt reste sous le quart de seconde. Une surface qui parcourt une vraie distance prend plus longtemps. Seul le mouvement explicatif dépasse la demi-seconde, parce qu'il raconte quelque chose plutôt que de réagir.

Couches

Les seules valeurs de z-index autorisées. Toute autre valeur dans le code est un bug.

base0

raised10

sticky30

nav40

modal50

grain60