# 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 ``` ### 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.