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`](./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](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.