Identité visuelle

La marque

Les couleurs, les typographies et les logos de l'atelier, avec leurs règles d'usage. Cette page est fabriquée à partir de la feuille de style du site : ce qui est affiché ici est exactement ce qui est utilisé, il n'y a pas de recopie possible à côté de la plaque.

Les logos

Version principaleCelle de l'en-tête. Les trois perforations disent le cinéma d'animation sans le dessiner.

Version blocPour les fonds clairs chargés, quand il faut poser la marque sur une image.

Version couleurRéservée aux usages festifs : affiche, story, image de partage. Pas pour l'interface.

Le symbole seulLes perforations sans le nom. Icône d'onglet, tampon, filigrane. Reste lisible à 16 pixels.

Le texte des logos est vectorisé : le dessin des lettres ne dépend pas de la présence de la police sur la machine qui les affiche.

Les couleurs

--papier #FBFAF7 off-white, presque blanc, neutre

--bloc #F3F1EC un cran sous le fond

--bloc-2 #EAE7E1 blocs latéraux

--encre #003049 Deep Space Blue, le texte

--gris #4A6274 le bleu nuit adouci, texte secondaire : 5,4:1 sur les blocs

--trait #DFDBD3 les filets

--accent #C1121F Flag Red : 5,5:1 sur le fond, lisible même en petit

--accent-fonce #C1121F le même rouge : il passe déjà le contraste en petit

--accent-clair #F9DDCB le rouge très dilué, fond du bloc d'appel

--accent-sombre #FF8F87 le rouge éclairci pour du texte sur bleu nuit (6,3:1)

--aqua #669BBC Steel Blue

--aqua-clair #D6E4EC le bleu acier très dilué

--lave #780000 Molten Lava, les titres de section

--blanc #FFF le blanc pur, texte sur les aplats

Règle de contraste : le rouge passe le contraste partout (5,5:1 sur le fond, 6,2:1 en texte blanc). Sur le bleu nuit, le texte passe au blanc cassé ou au rouge éclairci.

Les typographies

L'Atelier en Mouvement

Karrik · Jean-Baptiste Morizot et Lucas Le Bihan, fonderie Velvetyne, licence SIL Open Font License. Pour les titres, la navigation et les mentions en capitales.

Une seule graisse, jamais de gras. Le faux-gras appliqué par le navigateur casse le dessin des lettres. La hiérarchie se fait à la taille et à la casse.

On fabrique des images qui bougent.

Newsreader · Production Type, licence SIL Open Font License. Pour le texte courant.

Police variable : un seul fichier couvre les graisses 300 à 600 et les tailles optiques 6 à 72. Hébergée sur le site, jamais appelée chez Google.

Les mesures

échelle du site112.5%
largeur du contenumin(1280px, 100% - 3rem)
arrondi des blocs10px

Tout le CSS est en rem : l'échelle du site agrandit ou réduit l'ensemble en conservant les proportions. Au-delà de 118 %, la barre de navigation touche les bords.

Ce qui ne se négocie pas

Aucun prix affiché sur le site tant que les tarifs ne sont pas arrêtés. On parle du principe solidaire, pas de montants.
Ce qui n'est pas décidé porte une étiquette : prévisionnel, en recherche, à confirmer. Ne jamais présenter comme acquis ce qui ne l'est pas.
Une image qui n'est pas de l'atelier porte la mention Illustration.
Karrik ne se met jamais en gras.