Files

thibaud-leclere 3c15c12255 update theme

2026-03-30 12:13:19 +02:00

7.5 KiB

Raw Blame History

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

<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

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)

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

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

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

background: #ea580c;
color: #ffffff;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;

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

Orange réservé à l'accentuation. Ne pas l'utiliser pour du texte courant de longue lecture.
Fond de page ≠ blanc. Toujours #fef6ee pour le fond, #ffffff pour les surfaces élevées (cartes, navbar).
Ombres chaudes uniquement. Aucune ombre rgba(0,0,0,X) seule sur des surfaces visibles — toujours teintée.
Bouton primaire = pilule. Boutons destructifs ou secondaires peuvent utiliser --radius-sm.
Fraunces uniquement pour les titres de page et le logo. Pas dans le corps, pas dans les labels.
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.

7.5 KiB Raw Blame History Unescape Escape