Langage de design

Canevas

Les icônes sont dessinées sur un canevas de 31×29 unités, avec le dessin centré sur (15,5 ; 12,5). Quatre lignes-guides, des formes de repère qui donnent aux icônes la même taille visuelle, fixent les limites extérieures : un cercle de 23 unités de diamètre, un carré de 20,6 unités, un rectangle paysage de 23×18,4 et un rectangle portrait de 18,4×23. Les icônes sont centrées, pas alignées en bas.

Couches

Une icône comporte une pièce arrière de teinte moyenne avec une ombre portée, et le plus souvent une pièce avant plus claire avec un léger reflet sur son bord supérieur. Un contenu blanc, comme un symbole ou des traits, peut se placer entre les deux. Une icône sans pièce avant a un contenu blanc assez grand pour former une seconde couche. Les angles supérieurs de la pièce avant sont arrondis séparément, ce qui laisse apparaître la pièce arrière dans les angles.

Contours et angles

Les contours font 1 unité de large et se placent à l’extérieur du remplissage. Le rayon d’angle est de 2,2 pour le corps d’une icône (3,2 avec le contour) et de 1,2 pour le contenu. Une bande colorée à l’intérieur d’un contour fait au moins 2 unités de large, sinon elle est omise.

Couleur

Chaque teinte est conçue à partir d’un bleu de référence, puis décalée vers la couleur d’accent en gardant sa luminosité relative à cet accent. Les tracés sont blancs sur les pièces de teinte moyenne et sombres sur les pièces claires.

Tracés

Les tracés sont les traits et les symboles dessinés sur une icône. Les traits de contenu ont une épaisseur de 1,6, les tracés directionnels comme les flèches 2,2, et les contours 1. Les éléments de type pointeur font exception, avec 2,6 ou 2,0. Le plus petit élément fait 2,4 unités. Les pointes de flèche sont des triangles pleins.

Animation

L’animation comporte deux images clés, la pose de repos et la pose au survol, et dure 460 ms. Une icône ne mime que ce que fait l’objet réel : un dossier s’ouvre, une enveloppe se décachette, un calendrier tourne une page. L’animation ne remplace pas une idée abstraite.

Les règles complètes se trouvent dans PROMPT.md, rédigé en chinois simplifié.