Le logo, les couleurs et les boutons de Nota sont ici. Utilisez les ressources directement dans votre site, votre présentation ou votre signature de courriel.
Le logo officiel réunit la tuile N au bleu de marque, les lettres OTA blanches et le point carré du même bleu. Il se pose sur le canevas marine de la marque, dans les deux thèmes, et conserve les couleurs et le relief du maître PNG.
Cliquez sur une couleur pour copier sa valeur hexadécimale. Le mauve accompagne les notaires, le jaune les partenaires, l’indigo les clients et Futur. L’aide reste neutre au repos. Les données gardent leurs couleurs de service.
Un titre est blanc ou noir, en toutes circonstances. Le bleu ne porte jamais le libellé principal : il mentionne une information, et cela reste rare.
Titres, sur-titres et libellés principaux. Sur fond clair, le noir. Sur fond de nuit, le blanc. Un état (survol, choix, onglet retenu) ne change pas l’encre d’un titre : c’est le fond, le cadre ou le crochet qui le disent.
h1, h2, h3 color: var(--ink) .eyebrow color: var(--subtitle-ink) .pulse-svc color: var(--ink) /* même survolé */
Un montant, un lien, une pastille, un glyphe, le cadre d’un contrôle retenu. Sur fond de nuit, la marque devient de l’encre illisible (2,5:1) : c’est --brand-on-surface qui prend le relais, jamais --brand nu. Le logo choisi conserve sa tuile au bleu de marque, ses lettres blanches et sa transparence. Aucun filtre ni plaque ne change son dessin.
.nc-h-amt color: var(--brand) .chip.is-on color: var(--brand-on-surface)
Les mêmes repères guident le site, le guide de marque et la présentation.
Logo à gauche, commandes à droite. Sur téléphone, les commandes des documents se rangent dans le menu.
Le N visible du logo commence sur la marge de la page, à l’aplomb du titre. Un jeton compense la zone transparente du maître PNG, sans retoucher l’image.
Hauteur de l’en-tête : 64 px. La hauteur du logo et les espacements viennent des mêmes jetons dans chaque en-tête. Les commandes conservent une cible de 44 px.
Dans les en-têtes, le logo complet conserve sa transparence, sans fond ni contour ajouté. Le badge Québec reste un élément distinct, lisible dans les deux thèmes. Les téléchargements conservent le dessin complet.
Sora 800 pour les titres. Inter pour le texte, les introductions et les commandes. L’encre suit le thème.
Titre de page : 26 à 36 px. Section : 19 à 24 px. Carte : 17 px. Petit titre : 15 px.
Une marge latérale de 16 à 40 px et une largeur maximale de 2 200 px. Les paragraphes longs gardent une mesure de lecture plus étroite.
Texte courant et introduction : 16 px. Espacement des sections du guide : 32 px.
Le pied porte le même canevas marine que l’en-tête. Le N visible du logo s’aligne sur la colonne Nota, la première des quatre colonnes : Nota, Ressources, Légal et Contact.
Dans la colonne Contact, après l’adresse, Facebook, LinkedIn et YouTube affichent leur glyphe officiel en blanc sur fond transparent, sans plaque ni contour. Le f de Facebook est blanc. Les glyphes restent petits et alignés sur le bord gauche de la colonne.
TikTok et Reddit ont aussi leur glyphe officiel, prêt pour le jour où leur profil est confirmé. Un réseau sans profil confirmé n’est jamais affiché.
Deux polices, une seule échelle. Sora pour les titres, Inter pour le texte et les commandes. Chaque niveau lit un jeton : aucune règle ne pose sa propre taille.
Titre de page : 26 à 36 px
Section : 19 à 24 px
Carte : 17 px
Petit titre : 15 px
--type-h1: clamp(26px, 2.25vw, 36px) --type-h2: clamp(19px, 1.5vw, 24px) --type-h3: 17px --type-h4: 15px
Introduction : 16 px, interligne 1,6. La phrase d’accueil qui précède un contenu.
Texte courant : 16 px, interligne 1,5. Le corps de chaque carte, chaque paragraphe, chaque description.
SUR-TITRE : 12 px, interlettrage 0,1 em
--type-lead: 16px / 1.6 --type-body: 16px / 1.5 --type-eyebrow: 12px / .1em
Une échelle de pas, du plus serré au plus large. Chaque composant lit un barreau. Aucun nombre n’est posé à la main.
--space-1--space-2--space-4--space-6--space-8--space-12--space-16--space-1: 2px --space-8: 16px --space-2: 4px --space-12: 24px --space-4: 8px --space-16: 32px --space-6: 12px
Les cartes et les surfaces partagent les mêmes bourrages. Le dialogue, plus aéré, lit un barreau dédié.
var(--pad-card) : 12 px × 14 pxvar(--pad-card-lg) : 16 px × 18 pxvar(--pad-dialog) : 24 px--pad-card: var(--space-6) var(--space-7) --pad-card-lg: var(--space-8) var(--space-9) --pad-dialog: var(--space-12)
Les actions courantes utilisent un contour et une teinte de survol liée à leur section. Le bouton d’aide reste neutre au repos : son point d’interrogation et son libellé suffisent à le repérer. Les titres conservent l’encre du thème.
L’action primaire se distingue par son contour et sa graisse. La secondaire porte un contour discret. Le survol et le focus utilisent l’accent de la section, avec une cible d’au moins 44 px.
.btn-primary border: 1px solid var(--action-ink)
color: var(--action-ink)
background: transparent
.btn-secondary border: 1px solid var(--border)
color: var(--ink)
Le CTA principal (.btn-lg) porte un padding généreux. Il est le premier geste de l’utilisateur, il doit respirer. L’espacement entre les deux parcours suit l’échelle de pas.
.btn-lg padding: 10px 20px
.hero-cta gap: var(--space-7) /* 14 px entre les parcours */
margin-top: var(--space-10) /* 20 px sous le texte */
.experience-path gap: var(--space-5) /* 10 px entre étiquette et bouton */
Les contrôles retenus se distinguent par leur contour, leur fond ou un crochet. Les pastilles de données utilisent les couleurs de leur service.
.chip.is-on border: 1px solid var(--brand)
color: var(--brand-on-surface)
.pill background: var(--brand-tint-solid)
color: var(--subtitle-ink)
Un bouton qui ouvre une autre tâche (inscription, détails, conditions) ouvre une modale. Il ne déplie rien sous lui et ne remplace pas l’écran où il se trouve : la page reste où elle était.
Seul un formulaire peut se remplacer par son propre résultat : envoyé, enregistré, erreur.
<button aria-haspopup="dialog"> <dialog> <form method="dialog" class="dlg-x-form">✕</form>
Des mots-clés, un parcours, une image.
.kw-tile .kit-grid .step-rail .kit-figure
Le mot-clé donne le premier repère. Un clic ouvre le texte complet dans la fenêtre de lecture. La page garde sa place. Sans cette fenêtre, le texte reste visible ici.
Un choix clair, au clavier comme au toucher.
NotaSelect.enhance(select) NotaSelect.refresh(selectOrRoot) NotaSelect.close(selectOrRoot) NotaSelect.destroy(selectOrRoot)
Trois barreaux, une seule courbe. Chaque transition du produit lit un jeton de durée : aucune règle ne pose son propre timing.
Survol, couleur, focus, petits changements d’état.
Panneaux, dialogues, entrée de surface.
Les arrivées plus amples : film, panneau de marché.
--motion-fast: 150ms --motion-ui: 220ms --motion-enter: 320ms --ease-ui: cubic-bezier(.22, 1, .36, 1)
Les mouvements d’ambiance (la dérive lente d’un dégradé, le cycle orbital d’un fond) se mesurent en secondes. Ils ne sont pas des retours d’interface et n’entrent dans aucun barreau.
/* Ambiance — hors registre */ igLightDrift 26s igOrbit 40s button-spinner 600ms
L’aperçu d’arrivée (ADR 0056, mécanisme remplacé par ADR 0075 : une porte à la fois, une à trois commandes par porte) possède ses propres jetons. Depuis l’ADR 0077, une flèche se pose à côté du cadre. Trop court, il brise la première impression. Trop long, il retient l’utilisateur. Chaque scène doit respirer.
/* Arrivée — guidage, pas feedback */ --arrival-start: 900ms /* délai avant la première scène */ --arrival-scene: 5000ms /* chaque commande reste présentée */ --arrival-read: 13000ms /* budget de lecture partagé par les scènes */ --arrival-pulse: 1800ms /* respiration du cadre retenu */ --arrival-enter: 480ms /* trait d’entrée du cadre et de sa phrase */ --arrival-frame-offset: 9px /* distance du cadre à la commande */ --arrival-frame-weight: 3px /* épaisseur des équerres */ --arrival-frame-corner: 42% /* longueur de chaque équerre */ --arrival-cursor-size: 40px /* hauteur de la flèche */ --arrival-cursor-ratio: .714 /* largeur de la flèche sur sa hauteur */ --arrival-travel: 1400ms /* plafond d’un glissement de la flèche */ --arrival-cursor-stroke: 1.5 /* liseré de la flèche, en unités de son dessin */ --arrival-layer: 45 /* l’aperçu, au-dessus de l’en-tête collant */ --arrival-layer-note: 1 /* la phrase, sous le cadre */ --arrival-layer-frame: 2 /* le cadre, sous la flèche */ --arrival-layer-cursor: 3 /* la flèche, au-dessus des deux */
Le mouvement respecte prefers-reduced-motion : une préférence système qui réduit toute transition à un temps négligeable.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .001ms !important;
}
}
Un bloc de porte entre une seule fois, quand il croise l’écran : il monte d’un pas et s’éclaircit sur le barreau des entrées. Ses voisins suivent à 40 ms. Le trait d’accent d’une carte se trace de gauche à droite à l’arrivée.
Sans script, sans observateur ou en mouvement réduit, rien n’est jamais caché : le contenu est lisible d’abord, animé ensuite.
.reveal /* le bloc qui entre */
--reveal-i /* son rang : n × --menu-stagger */
.accent-line /* le trait de 3 px qui se trace */
/* Ambiance d’une porte : sa boucle vit
dans SON jeton, hors des trois barreaux */
.nc-sync { --nc-sync-loop: 3.6s; }
Un trait fin structure les sections et les cartes. Sa couleur suit le contexte : mauve pour les notaires, jaune pour les partenaires, indigo pour les clients et Futur. Les indicateurs de données gardent leur couleur métier.
Un trait horizontal de 2 px peut introduire une section. Il utilise l’accent de son contexte et accompagne un titre lisible dans les deux thèmes.
/* Séparateur de section, 2 px */ border-top: 2px solid var(--action-ink);
Les cartes qui présentent un parcours peuvent porter un trait supérieur de 3 px. Ces exemples reprennent le mauve du parcours notaire et le jaune du parcours partenaire. Les cartes de données conservent leurs couleurs de service ou de statut.
/* Choisir l’accent de la section */ --action-accent: var(--accent-purple); --action-ink: color-mix(in srgb, var(--action-accent) 45%, var(--ink)); border-top: 3px solid var(--action-ink);
Dans le carnet, chaque cellule de calendrier porte un trait vertical de 3 px qui code le niveau d’urgence : standard, rapide, prioritaire, urgence, extrême. La couleur vient du domaine, jamais d’un magic number.
/* Le trait vertical vient du tier de la donnée */
.cal-cell[data-tier]::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--tier-attr);
}
var(--action-ink). Une donnée utilise le jeton de son service ou de son niveau d’urgence. Chaque couleur suit le thème.border-top. L’indicateur de donnée est toujours à gauche (::before, 3 px, pleine hauteur).Pour votre portfolio, votre site ou votre présentation, utilisez uniquement les fichiers ci-dessous. Les planches exploratoires ne sont pas des variantes approuvées.
Ouvrez le modèle, copiez la signature dans votre logiciel de courriel, puis remplacez le nom et le rôle par les vôtres.
Ouvrir la signatureConservez les proportions, l’alpha, les lettres blanches et l’espace libre du maître PNG. Les variantes claire et sombre conservent le même dessin original, sans filtre, ombre ni lettres redessinées. Pour le favicon et les icônes d’app, utilisez le N recadré du même maître PNG. Conservez ses pixels, ses couleurs et son relief.
Utilisez Sora pour les titres et Inter pour le texte. Les polices et leur licence sont offertes dans le dossier fonts.
Télécharger l’icône d’appGardez le logo intact, conservez son espace libre et utilisez les tokens sémantiques plutôt que des couleurs arbitraires.
Pour une référence toujours à jour, utilisez l’asset public :
<img src="https://brand.gonota.ca/nota-logo.png" alt="Nota" width="200" height="67">
Ce sont les noms exacts que Nota utilise dans son propre code (ADR 0048) : un site partenaire parle ainsi la même langue.
:root {
--nota-blue-950: #101b26; /* bleu nuit */
--nota-blue-900: #264961; /* bleu profond */
--nota-blue-800: #274a62; /* survol / profond */
--nota-blue-600: #386888; /* action primaire */
--nota-blue-500: #407598; /* point signal */
--nota-blue-50: #ebf1f5; /* lavis Québec */
--accent-warm: #b45309; /* #f79009 en sombre */
}