Une marque et un site raffinés pour une avocate en droit de l'immigration
Ivanne Tonnessen a lancé Breton Law avec une carte de visite qu'elle aimait et un wordmark déjà composé en Caslon. Nous avons repris les deux comme point de départ, étendu l'ensemble en un système de marque complet et livré un site bilingue en production sur breton-law.com.
Ivanne est arrivée avec deux décisions verrouillées — le Caslon et un teal profond. Nous les avons prises comme brief, puis nous avons construit le reste de l'identité autour : tonalité, extensions de palette, couple typographique, composants, architecture bilingue, et enfin un site de production sur breton-law.com.
Partir de la carte qu'elle avait déjà Ivanne est arrivée avec deux décisions déjà prises : une carte de visite imprimée en Caslon, et un teal profond et sourd qu'elle utilisait sur sa papeterie. Le reste était ouvert. La première phase n'a pas consisté à partir d'une page blanche, mais à lire ce que son identité existante disait déjà et à nommer la direction que son instinct désignait.
Deux directions de marque, côte à côte Deux directions de marque distinctes mais cohérentes — toutes deux ancrées dans son teal et son Caslon — divergeant sur le mood, le couple typographique et le traitement de l'imagerie. Livrées en comparaison HTML côte à côte, pour qu'Ivanne voie chaque système en contexte web réel, pas comme des planches d'ambiance. Elle a choisi First Light : la plus lumineuse, la plus contemporaine des deux.
Tonalité et terminologie verrouillées Codification de règles d'écriture précises. « Le cabinet » plutôt que « nous » tant qu'il y a une seule avocate. « Prendre rendez-vous pour une consultation » plutôt que « réservez votre appel gratuit ». Codes de visa en romain ; emprunts à l'anglais en italiques dans le texte français. Vouvoiement, espaces insécables avant les ?, !, : et ; selon la typographie française native.
Tokens de design et système typographique Le teal est resté — #285A71, repris directement de sa carte de visite. Le Caslon est resté, résolu en Libre Caslon Text (une réinterprétation Google Fonts qui prolonge la continuité avec l'imprimé) en duo avec Inter pour le corps de texte et l'interface. Ajout du vellum pour le fond de page, de l'ocre pour les filets, du sea foam pour les fonds de section. Tous les contrastes vérifiés en WCAG AA.
Développement et mise en ligne Site Astro codé à la main, tokens en LESS, @fontsource-variable pour la performance. Neuf routes EN/FR appariées avec slugs localisés. En ligne sur breton-law.com — sitemap, hreflang et schéma posés dès le départ.
Quatre décisions prises dès le départ qui ont défini la manière dont le système prolongerait l'identité existante d'Ivanne — et la manière dont tout le reste se comporterait.
Le wordmark imprimé d'Ivanne était déjà composé en Caslon. Plutôt que de la rebrander autour d'une nouvelle typo, nous avons construit le système autour de Libre Caslon Text — une réinterprétation Google Fonts qui prolonge la continuité avec l'imprimé. Inter porte le corps de texte et l'interface. Deux familles, un seul registre éditorial, et le wordmark qu'elle avait déjà au centre.
#285A71 vient directement de sa carte de visite. Plutôt que de le traiter comme une couleur parmi d'autres, nous en avons fait l'ancre de tout le système : wordmark, titres, liens. Le vellum, l'ocre, le sea foam et un teal plus profond se sont ajoutés autour — jamais en remplacement, toujours en extension.
La plupart des cabinets américains écrivent au « nous » corporate, quels que soient leurs effectifs. Breton Law est un cabinet à avocate unique — le contenu le dit. « La plupart des clients travaillent directement avec Ivanne, du premier appel à l'approbation finale. » La voix passera au « nous » uniquement quand un second avocat rejoindra le cabinet.
Le contenu français est rédigé nativement — jamais passé à la machine. Vouvoiement, guillemets « » pour les citations, espaces insécables avant les ponctuations finales, italiques pour les emprunts à l'anglais (« le H-1B ») dans le texte français. Codes de visa en romain.
Un système de marque complet prolongeant sa carte de visite, un site Astro bilingue, une bibliothèque de composants éditoriaux et un guide de marque multi-sections — chaque livrable pensé pour vivre plus longtemps que le lancement.
Système de logo (empilé, en ligne, monogramme) construit autour du wordmark Caslon existant d'Ivanne, palette à cinq couleurs ancrée au teal de sa carte de visite, couple typographique verrouillé, tonalité et terminologie consignées dans un guide multi-sections.
Codé à la main sur la base CodeStitch Advanced-Astro-i18n. Neuf routes EN/FR appariées avec slugs français localisés — /fr/a-propos, /fr/processus, /fr/domaines-de-pratique.
Composants sur mesure remplaçant l'UI générique du starter : hero portrait, fiches domaines de pratique, ouvertures de section en mot italique, filets éditoriaux en ocre, sélecteur de langue avec ARIA correct.
Un guide de marque multi-sections couvrant la palette, l'échelle typographique, la construction du wordmark, la tonalité et la terminologie, les patterns de composants, les engagements d'accessibilité et un bloc de variables CSS — prêt à être transmis à n'importe quel futur designer ou développeur.
Deux choses étaient déjà verrouillées à l'arrivée d'Ivanne : un teal profond et sourd tiré de sa carte de visite imprimée, et un wordmark composé en Caslon. Nous avons conservé les deux, puis étendu le système autour — vellum pour le fond de page, ocre pour les filets et les accents, sea foam pour les fonds de section, et un teal plus profond pour le pied de page et les surfaces d'autorité. Le couple typographique s'est résolu en Libre Caslon Text pour l'affichage (une réinterprétation Google Fonts qui prolonge la continuité avec l'imprimé) et Inter pour le corps de texte et l'interface. Chaque combinaison vérifiée en WCAG AA, chiffres elzéviriens activés sur tout le site.
Deux couleurs étaient déjà verrouillées à l'arrivée d'Ivanne : le teal profond de sa carte de visite imprimée, et le Caslon dans lequel son wordmark était composé. Nous avons conservé les deux, puis étendu autour — vellum pour la page, ocre pour les filets, sea foam pour les fonds de section, et un teal plus profond pour le pied de page. Jamais en remplacement du teal, toujours en ancrage à celui-ci.
Le Caslon est resté, hérité du wordmark existant d'Ivanne. Nous l'avons résolu en Libre Caslon Text — une réinterprétation Google Fonts qui prolonge la continuité imprimée avec sa carte de visite — et l'avons appariée avec Inter pour le corps de texte et l'interface. Deux familles, un seul registre éditorial, les deux servies localement via @fontsource-variable pour la performance.
Breton Law
APC · Conseil en immigration
Le wordmark Caslon existant d'Ivanne est devenu le système. Trois configurations : empilé (en-tête du site et papier à en-tête), en ligne (mobile et signatures e-mail), et un monogramme « BL » dans un fin cadre ovale pour les favicons et les sceaux de document. Couleur de marque sur vellum, ou vellum sur teal profond — jamais recoloré, jamais encadré sauf en monogramme.
Système de marque
Pages livrées
Langues actives
Accessibilité
Chaque couleur et chaque typographie du système remonte à ce qu'Ivanne avait déjà en main. Le teal vient de sa carte imprimée. Le Caslon est la typo dans laquelle son wordmark était déjà composé. Le reste de la palette et la typo de corps prolongent ces deux ancrages — sans jamais les remplacer.
Breton Law, c'est une seule avocate. La marque le dit. « La plupart des clients travaillent directement avec Ivanne » est à la fois le modèle de fonctionnement et le message marketing — et le contenu s'écrit à la première personne, là où la plupart des sites de cabinet retombent par défaut sur le « nous » corporate.
Pas de hreflang ajouté après coup. Neuf paires EN/FR avec de vrais slugs localisés — /fr/a-propos, /fr/domaines-de-pratique — pas des paramètres d'URL. Règles typographiques françaises (vouvoiement, guillemets, espaces insécables avant les ponctuations finales) inscrites directement dans le CSS.
Un guide de marque multi-sections couvrant la palette, la typographie, la tonalité, les patterns de composants, les engagements d'accessibilité et un bloc de variables CSS. Prêt à être transmis à n'importe quel futur designer, photographe ou développeur — sans traduction.
Le hero charge statique. Les paragraphes ne fondent ni ne glissent. Le mouvement est réservé aux états de survol, aux soulignements de liens et à un seul fondu d'apparition par section. La retenue renforce la tonalité de calme assurance du cabinet.
WCAG AA sur chaque combinaison de couleurs. La couleur ne porte jamais l'information seule. Anneaux de focus de 3px sur tout élément interactif. Liens d'évitement et sélecteur de langue avec ARIA correct. prefers-reduced-motion respecté sans exception.
Un studio de prothèses dentaires sans présence web : système de marque, système de design et architecture SEO réunis dans un site complet lancé sur digitalinnovlab.com.
Un cabinet de conseil établi depuis 20 ans, avec un site resté en 2004 — reconstruit pour le référencement moderne.
Une coach en reconversion qui avait besoin d'une identité de marque et d'un site bilingue créés de zéro.
Une plateforme communautaire qui dépassait WordPress — migrée vers une architecture statique pour la performance.
Breton Law illustre ce qui se passe quand une marque grandit à partir d'un ancrage — une carte de visite, une typographie, un teal — plutôt que de partir de rien. Que vous lanciez un cabinet ou que vous le fassiez évoluer, nous construisons des systèmes d'identité qui tiennent à toutes les échelles, de la carte dans la poche à la page d'accueil.