195 lines
7.5 KiB
Markdown
195 lines
7.5 KiB
Markdown
# Charte graphique — Sunrise
|
||
|
||
Thème lumineux, éditorial, chaleureux. Inspiré des tons ambrés du petit matin.
|
||
Sobre sans être froid, accessible sans être infantile.
|
||
|
||
---
|
||
|
||
## Couleurs
|
||
|
||
### Palette principale
|
||
|
||
| Token | Hex | Usage |
|
||
|---------------|-----------|--------------------------------------------|
|
||
| `--bg` | `#fef6ee` | Fond de page — crème orangé très doux |
|
||
| `--surface` | `#ffffff` | Cartes, navbar, modals |
|
||
| `--surface-warm` | `#fff7ed` | Fond de champ input, surfaces secondaires |
|
||
| `--surface-tint` | `#ffedd5` | Hover sur items de dropdown, fond actif |
|
||
|
||
### Orange
|
||
|
||
| Token | Hex | Usage |
|
||
|------------------|-----------|-------------------------------------------------|
|
||
| `--orange` | `#ea580c` | Couleur principale — boutons, liens, logo |
|
||
| `--orange-mid` | `#f97316` | Hover sur boutons primaires |
|
||
| `--orange-light` | `#fed7aa` | Fond cellule surlignée (grille de jeu) |
|
||
| `--orange-pale` | `#fff7ed` | Fond très pâle — identique à `--surface-warm` |
|
||
|
||
> La couleur d'accentuation unique est l'orange `#ea580c` (orange-600 Tailwind).
|
||
> Ne pas introduire de seconde couleur d'accentuation.
|
||
|
||
### Texte
|
||
|
||
| Token | Hex | Usage |
|
||
|-----------------|-----------|-------------------------------------------|
|
||
| `--text` | `#1c1917` | Corps de texte, labels, titres |
|
||
| `--text-muted` | `#78716c` | Texte secondaire, descriptions |
|
||
| `--text-faint` | `#a8a29e` | Placeholders, métadonnées, separateurs |
|
||
|
||
### Bordures et ombres
|
||
|
||
| Token | Valeur | Usage |
|
||
|------------------|---------------------------------|-----------------------------------|
|
||
| `--border` | `#e8d5c0` | Bordures standard — chaudes |
|
||
| `--border-warm` | `#fdba74` | Bordure cellule active (grille) |
|
||
| `--shadow-warm` | `rgba(180, 100, 30, 0.08)` | Ombre douce sur cartes et navbar |
|
||
|
||
---
|
||
|
||
## Typographie
|
||
|
||
### Polices
|
||
|
||
| Rôle | Famille | Google Fonts |
|
||
|---------------|------------------|-------------------------------------|
|
||
| Titres / Logo | **Fraunces** | Sérif optique, poids 400 et 700 |
|
||
| Corps | **Inter** | Sans-serif, poids 400, 500, 600, 700 |
|
||
|
||
```html
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
```
|
||
|
||
### Hiérarchie
|
||
|
||
| Niveau | Police | Taille | Poids | Utilisation |
|
||
|------------|------------|--------|-------|--------------------------------------|
|
||
| H1 page | Fraunces | 26px | 700 | Titre de page (login, register) |
|
||
| H2 modal | Inter | 18px | 700 | Titres de modals |
|
||
| Logo | Fraunces | 22px | 700 | Navbar brand |
|
||
| Corps | Inter | 15px | 400 | Texte courant, inputs |
|
||
| Label | Inter | 13px | 600 | Labels de formulaire |
|
||
| Secondaire | Inter | 14px | 400 | Items dropdown, descriptions |
|
||
| Micro | Inter | 11–12px| 600 | Badges, headers dropdown, métadonnées|
|
||
|
||
### Règles typographiques
|
||
|
||
- Titres Fraunces : `letter-spacing: -0.3px` pour un rendu serré et élégant
|
||
- Pas de `text-transform: uppercase` sauf pour des labels discrets (taille ≤ 12px, spacing ≥ 0.5px)
|
||
- Interlignage corps : `1.5` minimum
|
||
- Taille minimale affichée : `11px`
|
||
|
||
---
|
||
|
||
## Rayons (Border radius)
|
||
|
||
| Token | Valeur | Usage |
|
||
|---------------|--------|----------------------------------------------|
|
||
| `--radius-sm` | `6px` | Inputs, cellules grille, petits éléments |
|
||
| `--radius-md` | `10px` | Dropdowns, popovers, tooltips |
|
||
| `--radius-lg` | `18px` | Cartes auth, modals |
|
||
| Pilule | `100px`| Bouton primaire, bouton submit |
|
||
|
||
> Le bouton primaire utilise systématiquement `border-radius: 100px` (forme pilule).
|
||
> Les champs de saisie utilisent `--radius-sm` (6px), jamais la pilule.
|
||
|
||
---
|
||
|
||
## Composants
|
||
|
||
### Bouton primaire
|
||
|
||
```css
|
||
background: #ea580c;
|
||
color: #ffffff;
|
||
border-radius: 100px;
|
||
padding: 9px 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
```
|
||
|
||
**Hover :** `background: #f97316` + `transform: translateY(-1px)` + `box-shadow: 0 4px 16px rgba(234,88,12,0.25)`
|
||
|
||
### Navbar
|
||
|
||
- Hauteur : `64px`
|
||
- Fond : `#ffffff`
|
||
- Bordure basse : `1px solid #e8d5c0`
|
||
- Ombre : `0 2px 12px rgba(180,100,30,0.08)`
|
||
- Padding horizontal : `40px`
|
||
- Logo (Fraunces, 22px, `#ea580c`) à gauche
|
||
- Actions à droite — icônes rondes (`border-radius: 50%`), hover sur fond `--surface-tint`
|
||
|
||
### Champ de formulaire
|
||
|
||
```css
|
||
background: #fff7ed;
|
||
border: 1.5px solid #e8d5c0;
|
||
border-radius: 6px;
|
||
padding: 11px 14px;
|
||
font-size: 15px;
|
||
```
|
||
|
||
**Focus :** `border-color: #ea580c` + `box-shadow: 0 0 0 3px rgba(234,88,12,0.12)`
|
||
|
||
### Cellule de grille (lettre)
|
||
|
||
- Taille : `38 × 38px`
|
||
- Fond normal : `#ffffff`, bordure `#e8d5c0`
|
||
- Fond rempli : `#fff7ed`, bordure `#fdba74`
|
||
- **Surlignée** (lettre cible) : fond `#fed7aa`, bordure `#ea580c`, texte `#ea580c`
|
||
- Focus : bordure `#ea580c` + ring `rgba(234,88,12,0.15)`
|
||
- Espacement entre cellules (`border-spacing`) : `5px`
|
||
|
||
### Dropdown
|
||
|
||
- Fond : `#ffffff`
|
||
- Bordure : `1px solid #e8d5c0`
|
||
- Rayon : `10px`
|
||
- Ombre : `0 8px 32px rgba(180,100,30,0.08), 0 2px 8px rgba(0,0,0,0.06)`
|
||
- Item hover : fond `#ffedd5`, couleur `#ea580c`
|
||
- Header : `11px`, uppercase, `#a8a29e`, séparateur bas
|
||
|
||
### Badge notification
|
||
|
||
```css
|
||
background: #ea580c;
|
||
color: #ffffff;
|
||
border-radius: 8px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
min-width: 16px;
|
||
height: 16px;
|
||
```
|
||
|
||
### Modal
|
||
|
||
- Fond : `#ffffff`
|
||
- Rayon : `12px` (légèrement plus petit que `--radius-lg` pour la hiérarchie visuelle)
|
||
- Ombre : `0 8px 24px rgba(0,0,0,0.12)`
|
||
- Overlay : `rgba(0,0,0,0.4)`
|
||
|
||
---
|
||
|
||
## Ombres
|
||
|
||
Toutes les ombres sont **chaudes** (teinte orange-brun), jamais neutres grises.
|
||
|
||
| Niveau | Valeur CSS |
|
||
|--------------|------------------------------------------------------------------|
|
||
| Légère | `0 1px 3px rgba(180,100,30,0.08)` |
|
||
| Navbar | `0 2px 12px rgba(180,100,30,0.08)` |
|
||
| Carte | `0 4px 32px rgba(180,100,30,0.08)` |
|
||
| Dropdown | `0 8px 32px rgba(180,100,30,0.08), 0 2px 8px rgba(0,0,0,0.06)` |
|
||
| Bouton hover | `0 4px 16px rgba(234,88,12,0.25)` |
|
||
|
||
---
|
||
|
||
## Règles d'usage
|
||
|
||
1. **Orange réservé à l'accentuation.** Ne pas l'utiliser pour du texte courant de longue lecture.
|
||
2. **Fond de page ≠ blanc.** Toujours `#fef6ee` pour le fond, `#ffffff` pour les surfaces élevées (cartes, navbar).
|
||
3. **Ombres chaudes uniquement.** Aucune ombre `rgba(0,0,0,X)` seule sur des surfaces visibles — toujours teintée.
|
||
4. **Bouton primaire = pilule.** Boutons destructifs ou secondaires peuvent utiliser `--radius-sm`.
|
||
5. **Fraunces uniquement pour les titres de page et le logo.** Pas dans le corps, pas dans les labels.
|
||
6. **Pas de couleur rouge** pour les erreurs — utiliser `#b45309` (ambre foncé) ou `#dc2626` uniquement pour les messages d'erreur critiques, jamais comme couleur d'interface.
|