update theme
This commit is contained in:
thibaud-leclere
194
designs/sunrise-charte.md
Normal file
194
designs/sunrise-charte.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user