# HistoMétéo — Design System Evolution

Objectif : intégrer le nouveau logo HistoMétéo et faire évoluer l’interface vers un design cohérent, moderne et lisible.

Le design doit rester simple, clair et orienté données.

---

# 1. Intégration du logo

Le logo officiel devient l’élément central de l'identité visuelle.

Caractéristiques du logo :

- icône calendrier
- soleil + nuage + pluie
- palette bleu / vert
- style flat moderne

## Placement

Le logo doit apparaître :

1. dans l’en-tête principal du site
2. dans le favicon
3. dans les partages sociaux
4. dans le footer

### Header

Disposition recommandée :

[Logo] HistoMétéo

Le logo doit être cliquable et renvoyer vers la page d'accueil.

### Taille

- desktop : ~48px hauteur
- mobile : ~36px

---

# 2. Palette de couleurs

La palette du site doit être dérivée directement du logo.

## Couleurs principales

Bleu météo :

#2A7DAF

Vert météo :

#6DBE45

Bleu clair :

#5CB4D6

Couleurs météo :

- soleil : jaune
- pluie : bleu clair
- nuage : gris clair

## Couleurs UI

Background principal :

#F7F9FB

Cartes :

#FFFFFF

Texte principal :

#2A2A2A

Texte secondaire :

#6B7280

---

# 3. Typographie

Utiliser une typographie simple et moderne.

Police recommandée :

Inter

Fallback :

system-ui

Hiérarchie :

H1 — titre principal

32px
font-weight 600

H2 — sections

24px
font-weight 600

Texte normal

16px

---

# 4. Structure visuelle du site

Le design doit utiliser des **cartes (cards)** pour structurer les sections.

Sections principales :

1. recherche
2. résumé météo
3. comparaison
4. résumé par jour
5. graphique
6. détail horaire

Chaque section doit être une carte.

Exemple :

[ Card: Recherche ]

[ Card: Résumé météo ]

[ Card: Graphique ]

[ Card: Détail horaire ]

Style carte :

- background blanc
- border-radius 10px
- ombre légère

---

# 5. Icônes météo

Les icônes météo doivent reprendre le style du logo.

Principes :

- couleurs douces
- style flat
- pas trop détaillé

Conditions météo :

☀ soleil  
⛅ partiellement nuageux  
☁ couvert  
🌧 pluie

---

# 6. Boutons

Bouton principal :

Couleur :

vert météo

Style :

- border-radius 8px
- padding confortable
- hover léger

Exemple :

[ Rechercher ]

Bouton secondaire :

couleur bleu clair.

---

# 7. Graphiques

Les graphiques doivent utiliser la palette du logo.

Température :

orange / rouge

Précipitations :

bleu clair

Vent :

gris

---

# 8. Espacement

Le site doit respirer.

Utiliser un spacing cohérent :

8px base unit

Sections :

32px

Entre éléments :

16px

---

# 9. Responsive

Sur mobile :

- empiler les sections
- graphique full width
- tableaux scrollables horizontalement

---

# 10. Objectif UX

Le design doit donner l’impression d’un site :

- clair
- scientifique
- fiable
- moderne

L’utilisateur doit comprendre la météo passée **en quelques secondes**.

La lisibilité des données est la priorité.

Le design ne doit jamais nuire à la compréhension.