# Charte Graphique JoPer

> Style : Minimaliste, épuré, comme une page de carnet à points (dot grid)

---

## 1. Philosophie visuelle

L'identité visuelle de JoPer s'inspire directement d'un **journal personnel** :
- Simplicité d'une page blanche/crème
- Discrétion des points (dot grid)
- Écriture manuscrite ou typographie simple
- Espace et respiration
- Pas de surcharge visuelle

**Mots-clés :** Minimaliste, authentique, papier, artisanal, calme, focus

---

## 2. Palette de couleurs

### Couleurs principales

| Nom | Hex | Usage |
|-----|-----|-------|
| **Blanc cassé / Crème** | `#FAF9F6` | Fond principal (comme une page de carnet) |
| **Noir encre** | `#1A1A1A` | Texte principal |
| **Gris dot** | `#D4D4D4` | Points du dot grid, éléments discrets |

### Couleur d'accent

| Nom | Hex | Usage |
|-----|-----|-------|
| **Bleu encre** | `#2C3E50` | Liens, accents, titres importants |

### Couleurs secondaires (optionnelles)

| Nom | Hex | Usage |
|-----|-----|-------|
| **Gris moyen** | `#6B7280` | Texte secondaire, métadonnées |
| **Kraft** | `#C4A77D` | Touches décoratives, badges |

### Aperçu visuel

```
┌─────────────────────────────────────────┐
│  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·    │  ← Fond #FAF9F6
│  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·    │  ← Points #D4D4D4
│  ·  ·  JoPer  ·  ·  ·  ·  ·  ·  ·  ·   │  ← Texte #1A1A1A
│  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·    │
│  ·  ·  Ton organisation  ·  ·  ·  ·    │  ← Accent #2C3E50
│  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·    │
└─────────────────────────────────────────┘
```

---

## 3. Typographies

### Police principale : Titres

**Option 1 : Libre Baskerville** (serif classique, élégant)
- Google Fonts : https://fonts.google.com/specimen/Libre+Baskerville
- Utilisation : Titres, logo

**Option 2 : Playfair Display** (serif moderne)
- Google Fonts : https://fonts.google.com/specimen/Playfair+Display

### Police secondaire : Corps de texte

**Inter** (sans-serif, très lisible)
- Google Fonts : https://fonts.google.com/specimen/Inter
- Utilisation : Paragraphes, navigation, boutons

### Police optionnelle : Manuscrite

**Caveat** (pour touches personnelles)
- Google Fonts : https://fonts.google.com/specimen/Caveat
- Utilisation : Signatures, annotations, accents décoratifs

### Hiérarchie typographique

| Élément | Police | Taille | Poids |
|---------|--------|--------|-------|
| H1 | Libre Baskerville | 2.5rem | Bold |
| H2 | Libre Baskerville | 2rem | Bold |
| H3 | Libre Baskerville | 1.5rem | Regular |
| Paragraphe | Inter | 1rem | Regular |
| Small/Meta | Inter | 0.875rem | Regular |
| Accent manuscrit | Caveat | Variable | Regular |

---

## 4. Logo JoPer

### Concept

Le logo doit évoquer :
- Un carnet / journal
- La simplicité
- L'écriture personnelle

### Logo retenu ✅

**Logo principal : Dot grid**
```
· · · · · · · · ·
· · · JoPer · · ·
· · · · · · · · ·
```
Le nom entouré de points sur 3 lignes, comme sur une page dot grid.

### Déclinaisons nécessaires

- [ ] Logo principal (horizontal)
- [ ] Logo compact (carré, pour favicon/réseaux)
- [ ] Version monochrome (noir)
- [ ] Version inversée (blanc sur fond sombre)

---

## 5. Éléments graphiques

### Dot grid (signature visuelle)

Le motif de points est la signature de JoPer :
- Espacement : 20px entre chaque point
- Taille des points : 2px
- Couleur : `#D4D4D4`
- Utilisation : Fonds, séparateurs, décorations

```css
/* Pattern dot grid CSS */
background-image: radial-gradient(#D4D4D4 1px, transparent 1px);
background-size: 20px 20px;
```

### Icônes

Style : Ligne fine (outline), pas de remplissage
Librairie suggérée : **Lucide Icons** ou **Heroicons (outline)**

### Boutons

```
┌─────────────────┐
│  À toi de JoPer │  ← Fond #2C3E50, texte blanc
└─────────────────┘

┌─────────────────┐
│  En savoir plus │  ← Bordure #1A1A1A, fond transparent
└─────────────────┘
```

### Cartes / Blocs

- Fond blanc `#FFFFFF`
- Bordure fine `1px solid #D4D4D4`
- Ombre légère (optionnel)
- Coins légèrement arrondis `4px`

---

## 6. Ton visuel

### On fait ✅

- Beaucoup d'espace blanc (respiration)
- Hiérarchie claire
- Éléments discrets et élégants
- Photos/illustrations minimalistes
- Cohérence papier/carnet

### On évite ❌

- Couleurs vives/criardes
- Trop d'éléments décoratifs
- Dégradés complexes
- Effets "glossy" ou trop modernes
- Surcharge d'informations

---

## 7. Exemples d'application

### Page type

```
┌──────────────────────────────────────────────────────┐
│  · · · · · · · · · · · · · · · · · · · · · · · · ·  │
│                                                      │
│     JoPer                        Blog | Produits     │
│                                                      │
│  ─────────────────────────────────────────────────  │
│                                                      │
│     Le Guide Complet du                              │
│     Bullet Journal                                   │
│                                                      │
│     Tu veux te lancer mais tu ne sais pas par       │
│     où commencer ? On t'explique tout...            │
│                                                      │
│     [ Lire l'article ]                              │
│                                                      │
│  · · · · · · · · · · · · · · · · · · · · · · · · ·  │
└──────────────────────────────────────────────────────┘
```

---

## 8. Ressources

### Fichiers à créer

- [ ] Logo SVG (toutes déclinaisons)
- [ ] Favicon (32x32, 180x180)
- [ ] Open Graph image (1200x630)
- [ ] Pattern dot grid (SVG ou CSS)

### Outils suggérés

- **Figma** : Maquettes et assets
- **Canva** : Visuels réseaux sociaux
- **Affinity Designer** : Logo vectoriel

---

*Document créé le 2025-12-09*