rubis/docs/marque.md

Référence de marque — Rubis Sur l'Ongle

Version : 0.2 · Dernière maj : 2026-05-09

Ce document est la source de vérité écrite pour la marque. Pour la présentation visuelle, voir /docs/brand-identity.html. Quand les deux divergent, ce fichier gagne.

---

1. Quatre principes fondateurs

Ils ne décrivent pas la marque comme elle est aujourd'hui — ils décrivent comment trancher quand on hésite.

1. Chaleureux, pas corporate. Couleurs chaudes, neutres crème, typographie humaniste. On parle à un boulanger ou une consultante, pas à une DAF.
2. Précis, pas froid. Les chiffres sont nets. Les marges sont disciplinées. Mais on garde toujours un peu d'âme — un détail typo, un mot bien placé.
3. Action, pas finance. On dit "lancer", "récupérer", "gagné". Jamais "DSO", "créances", "AR aging" en com publique.
4. Le rubis est central, pas décoratif. Une couleur, une forme. Pas trois rouges, pas dix variantes du logo.

2. Logo

Direction validée : A — Le gem facetté

Un rubis géométrique vu de dessus, kite/diamond shape avec facettes suggérées.

Caractéristiques :

• Polygone à 4 pointes (rhombus)
• Ligne horizontale médiane (la "table" du gem) en blanc semi-transparent
• 4 lignes diagonales internes pour suggérer les facettes (haut clair, bas sombre)
• Couleur : #9F1239 plein, ou dégradé #C9415C → #9F1239 pour les grands formats

Usages :

• Favicon (16-32 px)
• App icon
• Picto réseaux sociaux / avatar
• Lockup horizontal avec wordmark "Rubis"
• Compteur de gamification dans l'app (◆ + nombre)

À ne jamais faire :

• Rotation rapide ou scintillement disco
• Variantes "ouvertes" (juste le contour) en dessous de 32 px → illisible
• Mélange avec d'autres formes géométriques (étoile, cœur, etc.)

Wordmark (direction C — à compléter plus tard)

À monter en complément en V2 : rubis en Bricolage Grotesque 800 italic, avec le point du i remplacé par un petit ◆. Servira de signature dans la doc, les emails, certains contextes éditoriaux.

Direction écartée : B (rubis brut organique) et D (sur l'ongle littéral)

• B : trop joaillerie, risque de glisser vers Cartier
• D : polarisante, risque de "manucure / cosmétique" hors contexte. Garder éventuellement pour de la com éditoriale (ads, illustrations) plus tard.

3. Couleurs

Palette de marque

Rôle	Nom	Hex	Usage
Primaire	Rubis	#9F1239	CTA, accents, ◆ gamification, jamais en grand aplat
Secondaire	Rubis profond	#771328	Hover, pressed, headers sombres
Secondaire	Rubis clair	#C9415C	Survol, dégradés, illustrations
Tertiaire	Rubis glow	#FBE4EA	Backgrounds doux, panneaux mis en avant, états succès

Neutres chauds

Rôle	Nom	Hex	Usage
Page	Crème	#FAF7F2	Fond principal — jamais de blanc pur (#FFF)
Surface 2	Crème 2	#F5EFE7	Sidebar, surfaces secondaires
Lignes	Lignes	#E8E0D6	Bordures, séparateurs
Texte muted	Encre 3	#8A7F76	Métadonnées, labels
Texte body	Encre 2	#4F4640	Corps de texte
Texte fort	Encre	#1A1410	Titres, logo mono — jamais de #000

Couleurs interdites

• Or accent : abandonné (paraît cheap)
• Bleu, vert, violet : aucune autre famille colorée n'entre dans la marque
• Orange ou écarlate : si on veut un rouge, c'est rubis ou rien

Règle d'or

Le rubis est rare — c'est ce qui le rend précieux. Une page = un seul aplat fort de rubis maximum. Tout le reste = neutres chauds.

4. Typographie

Pair principale

Usage	Typo	Source	Poids utilisés
Display (titres)	Bricolage Grotesque	self-hosted via @fontsource-variable/bricolage-grotesque	500, 600, 700, 800
Body (texte courant, UI)	Inter	self-hosted via @fontsource-variable/inter	400, 500, 600, 700

Échelle typographique

Rôle	Taille	Poids	Letter-spacing	Line-height
Display	56 px	700	-0.025em	1.05
H1	36 px	700	-0.022em	1.1
H2	24 px	600	-0.015em	1.2
H3	18 px	600	-0.01em	1.3
Body	15 px	400	normal	1.55
Small	13 px	400	normal	1.5
Caps	11 px	600	0.12em	1.4

Règles

• Titres en italic rubis sur le mot-clé (em color: #9F1239) pour casser l'austérité — un seul mot par titre
• Caps (Eyebrow) toujours en #9F1239, jamais en gris
• Inter pour tous les chiffres (rubis comptés, montants, dates) — features tabular-nums pour aligner
• Bricolage en italic réservé aux moments de personnalité, jamais en bloc de texte

5. Iconographie

Set : Lucide

• Source : lucide.dev · MIT · 1 400+ icônes
• Poids par défaut : regular (1.5px stroke)
• Taille standard UI : 16 px (inline), 20 px (boutons), 24 px (sidebar)
• Couleur : currentColor — hérite du contexte texte

Pourquoi Lucide

• Cohérent avec le ton "précis pas froid" — moderne mais pas designer-flex
• Couvre tous les use cases UI sans gymnastique
• Pas de dépendance commerciale, MIT
• Bien intégré React/Next/Vue/Vanilla

Icônes spéciales

• ◆ (rubis/gem) : SVG custom (le logo lui-même), JAMAIS une icône Lucide. C'est notre signe distinctif.
• Drag handle, dropzone : peuvent utiliser Lucide upload-cloud, move, grip-vertical
• Statuts factures : utiliser des chips colorés (cf. wireframes), pas des icônes seules

6. Voix & ton

Caractéristiques

Trait	On dit	On ne dit pas
Direct	"Vos factures relancées toutes seules."	"Optimisez votre processus de recouvrement amiable."
Concret	"5 heures par semaine récupérées."	"Améliorez significativement votre productivité."
Chaleureux	"Bonjour Arthur 👋"	"Bienvenue dans votre espace client."
Précis	"Plus de 67 % des PME respectent les délais."	"De nombreuses entreprises sont sérieuses."
Empathique	"On sait que c'est pénible. C'est pour ça qu'on le fait à votre place."	"Notre solution résout efficacement votre douleur."
Fier (sans arrogance)	"Notre OCR comprend les factures françaises mieux que personne."	"Une intelligence artificielle révolutionnaire."

Vocabulaire

À utiliser : relance, temps libéré, récupéré, sérénité, rubis gagnés, vos factures, travailler.

À éviter dans la com publique :

• Recouvrement → trop juridique, fait penser huissier
• Créances → jargon DAF
• AR / Accounts Receivable → anglo
• DSO → réservé au dashboard interne
• Mauvais payeur → trop accusateur (OK en interne app)
• Mise en demeure → présent dans l'app mais pas dans la landing

À manier avec précaution :

• Impayés → OK pour la stat, pas le cœur de la promesse (la majorité des cas sont des "retards", pas des "impayés")
• Mise en demeure → présent mais désamorcé visuellement, jamais en pop-up promotionnel

Emojis

• OK : 👋 (accueil), ✓ (succès), ↘ (delta négatif positif comme baisse de DSO)
• Pas OK : 💎, 💰, 🚀, 🔥, 💪 — trop crypto / startup-bro

7. Microcopy & state messages

Notifications & feedback

Situation	Message
Inscription réussie	"Bienvenue. Votre compte est prêt."
Première facture importée	"Première facture en route. + 1 rubis."
Relance envoyée	"Relance envoyée à {{client}}. Vous pouvez retourner travailler."
Facture marquée encaissée	"Encaissée. + {{X}} rubis bien mérités."
Erreur OCR	"On n'a pas tout compris. Vous pouvez compléter à la main ?"
Erreur technique	"Quelque chose a coincé. On a noté, on regarde."

Empty states

• Pas de factures : "Glissez vos PDF ici. L'OCR fait le reste."
• Pas encore de rubis : "Vos premiers rubis arrivent dès la première relance lancée."
• Pas de plans personnalisés : "4 plans standards déjà prêts. Vous pouvez en créer un sur-mesure."

8. Do & Don't

À faire

• Utiliser le rubis avec parcimonie — un seul aplat fort par écran maximum
• Préférer le crème #FAF7F2 au blanc pur partout
• Garder les titres en Bricolage 600/700, jamais en regular
• Aligner les chiffres (montants, rubis, dates) en colonnes nettes
• Touche d'italique rubis sur le mot-clé d'un titre pour casser l'austérité
• Utiliser le ◆ comme marqueur de gamification, jamais comme bullet générique

À éviter

• Le rouge en aplat sur plus de 30 % d'un écran
• Le noir pur (#000) — toujours #1A1410
• Le blanc pur (#FFF) sur grande surface — toujours #FAF7F2
• Mélanger le rubis avec d'autres rouges (orange, écarlate)
• Les emojis joaillerie 💎 ou financiers 💰
• Le mot "recouvrement" dans la copy publique
• Ajouter du bleu, vert, violet pour "varier" — Rubis = rubis et neutres, point
• Animer le gem en rotation rapide ou en sparkle disco

9. Application sur les supports

Email transactionnel

• Header : logo (gem + wordmark) sur crème
• Corps : Inter 15 px, ligne 1.55, encre #1A1410
• CTA principal : bouton plein rubis, blanc dessus
• Footer : adresse postale (LME requis), lien désabonnement, mention "Envoyé via Rubis"

Landing page

• Background page : crème #FAF7F2
• Hero : titre Bricolage 700 56px, italique rubis sur 1 mot
• CTA primaire : #9F1239 plein, ombre douce 0 2px 6px rgba(159,18,57,0.25)
• Sections : alternance crème / crème 2 (pas de gris), séparées par 1px ligne #E8E0D6

Carte de visite, papeterie

• Format européen 85 × 54 mm
• Logo gem + wordmark en haut-droite
• Texte aligné à gauche, Inter 11 pt
• Verso : aplat crème ou rubis (au choix), pas les deux

Réseaux sociaux

• Avatar : gem facetté blanc sur fond rubis (cf. app icon)
• Bannière : phrase courte Bricolage sur crème, gem en watermark à 18 % opacité
• Posts ads : titre fort Bricolage, ◆ en eyebrow, CTA URL en bas

10. Notes ouvertes

• Custom font : à long terme, considérer une typo custom dérivée de Bricolage pour gagner en ownability. Pas en V1.
• Animation logo : potentiel gem animé sur la landing (rotation lente, micro-scintillement). À scoper plus tard.
• Variantes saisonnières : la marque pourrait avoir des moods (Noël, fin d'année fiscale). À évaluer post-MVP.
• Accessibilité : vérifier les contrastes — #9F1239 sur crème = AAA pour le texte, OK ; #9F1239 sur blanc pur peut être limite pour le texte de petite taille → préférer #771328 dans ces cas.