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 #EDE6E3 Parchment

--bloc #E4DFDC entre le parchemin et l'alabaster

--bloc-2 #DADAD9 Alabaster Grey

--encre #36382E Charcoal Brown

--gris #6C6E62

--trait #C9C5C0

--accent #F06449 Tomato

--accent-fonce #C94A31 même teinte, lisible en petit texte

--accent-clair #FBE0D9

--aqua #5BC3EB Sky Aqua

--aqua-clair #CBEAF8

--blanc #FFF le seul blanc pur du site

Règle de contraste : le Tomato est réservé aux aplats et aux grands titres. En petit texte sur fond clair son contraste est insuffisant, les petites mentions passent à l'encre ou à la version foncée.

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(1140px, 100% - 2.5rem)
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.