83 lines
2.2 KiB
Markdown
83 lines
2.2 KiB
Markdown
# Référence Typographie et Espacement
|
|
|
|
**Auteur** : Équipe 4NK
|
|
**Date** : 2025-01-27
|
|
|
|
## Système de tailles de texte
|
|
|
|
### Hiérarchie typographique
|
|
|
|
| Usage | Classe Tailwind | Taille | Exemple |
|
|
|-------|----------------|--------|---------|
|
|
| Métadonnées, labels | `text-xs` | 12px | Dates, catégories, badges |
|
|
| Texte secondaire | `text-sm` | 14px | Descriptions, helper text |
|
|
| Corps de texte | `text-base` | 16px | Contenu principal (défaut) |
|
|
| Sous-titres | `text-lg` | 18px | Titres de sections |
|
|
| Titres de sections | `text-xl` | 20px | Titres de modals |
|
|
| Titres principaux | `text-2xl` | 24px | Titres d'articles, pages |
|
|
| Titres hero | `text-3xl+` | 30px+ | Titres de landing |
|
|
|
|
### Poids de police
|
|
|
|
| Usage | Classe | Poids |
|
|
|-------|--------|-------|
|
|
| Texte courant | `font-normal` | 400 |
|
|
| Emphase légère | `font-medium` | 500 |
|
|
| Emphase moyenne | `font-semibold` | 600 |
|
|
| Titres, CTA | `font-bold` | 700 |
|
|
|
|
## Espacement
|
|
|
|
### Échelle Tailwind (4px base)
|
|
|
|
- `gap-2` : 8px - Espacement serré (icônes, badges)
|
|
- `gap-4` : 16px - Espacement standard (éléments de liste)
|
|
- `gap-6` : 24px - Espacement large (sections)
|
|
- `gap-8` : 32px - Espacement très large (sections principales)
|
|
|
|
### Padding
|
|
|
|
- Cards : `p-4` (compact) ou `p-6` (standard)
|
|
- Containers : `px-4 py-8` (mobile) ou `px-6 py-12` (desktop)
|
|
- Sections : `mb-8` ou `mb-12` entre sections
|
|
|
|
### Marges verticales
|
|
|
|
- Entre éléments liés : `mb-2` à `mb-4`
|
|
- Entre sections : `mb-8` à `mb-12`
|
|
- Espacement de page : `py-8` (mobile) ou `py-12` (desktop)
|
|
|
|
## Largeur de ligne optimale
|
|
|
|
Pour le contenu de lecture :
|
|
- Utiliser `max-w-prose` pour le contenu texte
|
|
- Largeur max ~65-75 caractères
|
|
- Padding horizontal : `px-4` (mobile) ou `px-6` (desktop)
|
|
|
|
## Exemples d'utilisation
|
|
|
|
### Titre de page
|
|
```tsx
|
|
<h1 className="text-2xl font-bold text-neon-cyan mb-4">Titre de page</h1>
|
|
```
|
|
|
|
### Titre de section
|
|
```tsx
|
|
<h2 className="text-lg font-semibold text-neon-cyan mb-2">Section</h2>
|
|
```
|
|
|
|
### Corps de texte
|
|
```tsx
|
|
<p className="text-base text-cyber-accent">Contenu principal</p>
|
|
```
|
|
|
|
### Texte secondaire
|
|
```tsx
|
|
<p className="text-sm text-cyber-accent/70">Description ou helper text</p>
|
|
```
|
|
|
|
### Métadonnées
|
|
```tsx
|
|
<span className="text-xs text-cyber-accent/50">Date, catégorie</span>
|
|
```
|