Document interne · non indexé
Kit de composants
La référence vivante du site : les jetons, les composants et les règles qui les gouvernent, rendus par la feuille de style réelle.
Cette page n’est pas une maquette. Chaque bloc ci-dessous est rendu par la feuille de style de production. Si un composant change, il change ici en même temps. C’est le seul endroit où l’on peut vérifier une décision graphique sans ouvrir dix pages.
Fondations
Les quatre règles non négociables
- L’or clair ne porte jamais de texte sous 18 px. Les surtitres et les coches utilisent l’or foncé
#7A5A18— 6,10:1 sur porcelaine. - Aucune section marine derrière le logo. Marine sur noir tombe à 1,61:1 : le logo devient illisible.
- Corps de texte à 17 px minimum. La cliente type a entre 35 et 55 ans et lit souvent sur téléphone, en boutique.
- Tout aplat or porte du texte marine, jamais blanc. Blanc sur
#FFE15B= 1,43:1.
Ces quatre règles viennent du design system d’origine et ont été vérifiées au contraste. Elles priment sur toute considération esthétique.
Couleur
Palette
Le marine porte l’autorité, la porcelaine porte le texte, l’or ne sert qu’à souligner. L’or est un filet, pas un aplat — la logique du kintsugi, pas celle du surligneur.
Contrastes vérifiés
| Combinaison | Ratio | Verdict |
|---|---|---|
| Marine 800 sur porcelaine | 14,8:1 | AAA — corps de texte |
| Or 900 sur porcelaine | 6,10:1 | AA — surtitres, petits libellés |
| Or 500 sur marine 700 | 14,2:1 | AAA — aplats et libellés sur marine |
| Blanc sur marine 700 | 13,0:1 | AAA — boutons pleins |
| Or 500 sur porcelaine | 1,42:1 | Interdit pour du texte |
| Blanc sur or 500 | 1,43:1 | Interdit |
Typographie
Deux familles, pas trois
Fraunces en titrage — approximation libre de Bogart Italic, la police d’accent du logo, qui est payante. Inter en interface et en corps. Aucune police script en corps de texte : sur le site d’une graphiste, cela fait amateur.
Chaque histoire est unique
Trois façons de démarrer
Du fichier à la pose
Votre communication devrait l’être aussi.
Du logo à l’enseigne, je conçois l’identité visuelle des commerces et des artisans de Besançon.
Ce qui me distingue
Demander un devis
Motifs
Asanoha et seigaiha
Deux motifs traditionnels japonais, tracés en SVG vectoriel — environ 0,5 Ko chacun, nets à toute échelle, sans requête réseau. L’asanoha (feuille de chanvre) habille les fonds marine ; le seigaiha (vagues) ne sert qu’en ornement de coin, jamais en fond plein.
Actions
Boutons et liens
Un seul bouton plein par écran. Le marine est l’action principale (13:1, AAA) ; le contour or est l’action secondaire. Sur fond marine, les rôles s’inversent : l’aplat devient or, avec du texte marine.
Un lien dans le texte porte un soulignement or fin, décalé de 0,24 em : voir la grille tarifaire. Dans un index ou une carte, le soulignement disparaît — la ligne entière fait office de cible.
Bande marine
Le registre sombre
Une seule bande marine par page, au maximum deux. Elle sert à marquer le différenciateur, jamais à décorer. Le fond porte l’asanoha or à 55 % d’opacité.
- Losange or7 px, rotation 45°, jamais de puce ronde
- Encart translucidefond marine 900 à 42 %, filet or à 28 %
- Texte courant#E8E4DA, jamais blanc pur sur une longue ligne
Encarts
En bref, cartes, formules
L’encart « En bref » ouvre chaque page de service : c’est le format le plus facilement cité par les moteurs génératifs. Filet or à gauche, pas de cadre, pas d’ombre.
En bref — Com’Lisa conçoit l’identité visuelle des commerces, restaurants et artisans de Besançon : logo, charte graphique, supports print, vitrine, enseigne et marquage. Trois formules : 1 500 €, 2 500 € et 5 500 €. Devis gratuit sous 48 h.
Enseigne et signalétique
Dimensionnement à la distance de lecture, dossier de déclaration préalable, fichiers prêts pour l’enseigniste.
à partir de 450 €
Le plus demandé
Développement
Vous devez être vu sur le terrain
2 500 €
- Tout l’Essentielle
- Affiche
- Vitrine
- Marquage véhicule
Le témoignage se pose sur un filet or, en Fraunces italique. Il n’est jamais mis en avant tant qu’il n’est pas réel.
Données
Grille tarifaire
Un tableau de prix n’a ni bordure extérieure ni fond alterné : deux colonnes, un filet fin entre les lignes, le montant en Fraunces à droite, chiffres tabulaires.
| Logo professionnel | 500 € |
| Refonte de logo (direction créative déjà établie) | 350 € |
| Mini charte graphique | 300 € |
| Carte de visite | 150 € |
TVA non applicable, article 293 B du CGI.
Séquence
Étapes
1
Filet or en tête
Il vire au marine au survol
2
Chiffre en Fraunces 300
30 px, couleur or 700
3
Apparition au défilement
Désactivée si mouvement réduit
Rythme
Espacement et mesure
- Rythme de section —
clamp(52px, 6vw, 96px)en haut et en bas de chaque bande pleine largeur. - Marge latérale —
clamp(20px, 5vw, 40px). - Mesure de lecture — 68 caractères, appliquée à tout paragraphe courant. Les surtitres, prix et libellés en sont exclus.
- Rayons — 2 px sur les images, 4 px sur les cartes, pilule sur les boutons. Rien d’autre.
- Jonction de bandes — deux bandes claires consécutives partagent un filet et un rythme réduit, pour ne pas créer de vide.