243 lines
10 KiB
Markdown
243 lines
10 KiB
Markdown
# Référence de marque — Rubis Sur l'Ongle
|
||
|
||
> Version : 0.1 · Dernière maj : 2026-05-05
|
||
|
||
Ce document est la source de vérité écrite pour la marque. Pour la présentation visuelle, voir `/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** | Google Fonts | 500, 600, 700, 800 |
|
||
| Body (texte courant, UI) | **Inter** | Google Fonts | 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](https://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.
|