Document de référence pour tous les produits de Dativo SAS. Ce qui n'est pas écrit ici n'existe pas dans la marque.
Le vert primaire historique Forest #1F3D33, trop sombre, sortait noir à l'impression. La marque adopte Emerald #4E7F65 comme couleur primaire — plus claire, imprimable, et déjà dans la palette (PMS 5615 C). Toute la famille de verts en découle, validée RGAA.
| Sujet | Avant | V2 |
|---|---|---|
| Couleur primaire (logo, marque, boutons) | Forest #1F3D33 | Emerald #4E7F65 |
| Forest #1F3D33 | Primaire | Conservé comme Encre (texte, fonds foncés) |
| Déclinaisons | — | Échelle Emerald 50→900, teinte unique 148° |
| Accessibilité | WCAG AA | RGAA / WCAG 2.1 AA — boutons & états vérifiés |
:rootSource unique des variables. Aucun #hex hors de ce bloc.
:root {
/* === ÉCHELLE EMERALD (teinte 148°) === */
--emerald-900:#193828; --emerald-800:#264C38; --emerald-700:#37664D;
--emerald-600:#44755B; --emerald-500:#4E7F65; --emerald-400:#659E80;
--emerald-300:#84BD9F; --emerald-200:#A7D6BD; --emerald-100:#CAEBD9; --emerald-50:#E4F7ED;
/* === RÔLES === */
--emerald: #4E7F65; /* PRIMAIRE · logo, marque, boutons · PMS 5615 C */
--primary: var(--emerald); /* alias */
--emerald-hover: #37664D; /* survol bouton */
--emerald-active:#264C38; /* clic */
--forest: #1F3D33; /* ENCRE · textes, fonds foncés · PMS 5535 C */
--tender: #157F77; /* teal accent · PMS 562 C */
--mint: #B7DDD2; /* surface claire · PMS 565 C */
--dew: #DCF1E0; /* surface douce · PMS 9520 C */
--terra: #E37222; /* accent conversion · PMS 158 C */
--white: #FFFFFF;
}
--forest, passer à --emerald. Là où --forest servait de texte ou de fond foncé, le garder (c'est l'encre).Une famille de verts ancrée sur Emerald #4E7F65 (teinte unique 148°), plus l'encre Forest, deux accents (Tender, Terra) et les surfaces claires.
★ 500 = primaire. 700 = survol, 800 = clic. 100–300 = surfaces claires (texte encre). 900 = vert le plus profond.
--emerald · texte BLANC 4,6:1 (AA)--forest · texte BLANC 11,8:1 (AAA)--tender · texte BLANC 4,8:1 (AA)--mint · texte ENCRE 7,8:1 (AAA)--dew · texte ENCRE 9,7:1 (AAA)--terra · texte BLANC ≥19px bold (3,1:1)60 % Forest/encre (textes, nav, fonds foncés). 25 % Emerald (logo, boutons, aplats, liens). 10 % Tender + surfaces claires (Mint, Dew). 5 % Terra (accent conversion). Le blanc porte le fond global.
HEX pour l'écran, CMJN pour l'imprimeur numérique, Pantone pour l'offset ton direct. Logo toujours fourni aplati sur blanc (pas de transparence).
| Couleur | HEX | CMJN | Pantone |
|---|---|---|---|
| Emerald (primaire) | #4E7F65 | 39 · 0 · 20 · 50 | 5615 C |
| Forest (encre) | #1F3D33 | 49 · 0 · 16 · 76 | 5535 C |
| Tender | #157F77 | 83 · 0 · 6 · 50 | 562 C |
| Mint | #B7DDD2 | 17 · 0 · 5 · 13 | 565 C |
| Dew | #DCF1E0 | 9 · 0 · 7 · 5 | 9520 C |
| Terra | #E37222 | 0 · 50 · 85 · 11 | 158 C |
Picto carré (arc + point central) + mot « dativo » en Bricolage Grotesque Bold vectorisé. Le wordmark et le picto sont en Emerald #4E7F65 sur fond clair.
logo-dativo-horizontal.svglogo-dativo-horizontal-white.svglogo-dativo-horizontal-black.svglogo-dativo-icon.svgZone de respiration = hauteur du picto / 2. Tailles mini : web 120 px · picto 16 px · print 20 mm. Pour l'impression : PNG aplati sur blanc.
SVG officiels. Recolorer uniquement dans les couleurs charte (Emerald, blanc, noir mono).
Étirer, déformer, incliner, ajouter ombre/contour/dégradé.
Quatre fontes, chacune son rôle. Aucune autre.
Pour chaque fond, un seul texte officiel. Seuils RGAA : 4,5:1 texte normal · 3:1 grand texte (≥19px bold) et composants UI.
| Fond | Texte officiel | Ratio | Niveau | Usage |
|---|---|---|---|---|
| White | Forest #1F3D33 | 11,8:1 | AAA | Texte courant |
| Emerald 500 | White | 4,6:1 | AA | Bouton primaire, aplats marque |
| Emerald 700 | White | 6,6:1 | AAA | Survol bouton |
| Forest | White | 11,8:1 | AAA | Header, footer, sections foncées |
| Tender | White | 4,8:1 | AA | Highlights |
| Emerald 200 | Forest | 7,3:1 | AAA | Bouton clair, surfaces |
| Mint | Forest | 7,8:1 | AAA | Pills, CTA sur dark |
| Dew | Forest | 9,7:1 | AAA | Alerts info, surfaces |
| Terra | White | 3,1:1 | AA Large ≥19px bold | CTA accent uniquement |
Survole et clique ces boutons : la démo est réelle. Règle d'or RGAA : le texte n'est jamais de la même teinte que le fond — blanc sur vert foncé, encre sur vert clair. Au survol/clic on fonce (le contraste monte), jamais on éclaircit.
| Bouton | Fond → texte | États | Ratio |
|---|---|---|---|
| Primaire | Emerald 500 → blanc | hover 700 · active 800 · focus anneau Forest | 4,6 → 6,6 → 9,7 ✓ |
| Sombre | Forest → blanc | hover Emerald 900 | 11,8:1 ✓ |
| Clair | Emerald 200 → encre | hover Emerald 300 | 7,3:1 ✓ |
| Secondaire | blanc, contour Emerald → Forest | hover Emerald 50 | 11,8:1 ✓ |
| Accent | Terra → blanc | label ≥19px BOLD | 3,1:1 (AA large) ✓ |
| Désactivé | gris → gris | non focusable | exempté RGAA |
Focus visible : anneau 3px solid Forest, offset 2px (≥3:1 contre le fond et le bouton).
Survol/clic : foncer vers Emerald 700 puis 800. Le texte blanc reste lisible.
Texte de bouton de la même teinte que le fond (vert sur vert) = invisible. Jamais.
Éclaircir au survol vers Emerald 400/300 avec texte blanc : repasse sous 4,5:1.
Dativo parle clair, neutre, sans jargon ni vente forcée. On informe et on rassure ; on ne fait pas peur pour vendre.
Phrases courtes, zéro jargon.
On n'édite aucune plateforme : on le dit.
Pas de promesse exagérée, pas de comparatif nominatif.