---
name: brief-extraction
description: Récupère le brief client et produit une direction artistique complète avec palette, typo, ambiance et animations
---

# Extraction du Brief & Direction Artistique

## Objectif

Récupérer toutes les informations du brief client (depuis Notion, Gmail, appel de lancement), les analyser, et produire un document de direction artistique (DA) complet et actionnable. Ce document sert de fondation à tout le travail de design.

## Sources du Brief

### 1. Notes de l'appel de lancement
- Objectifs business du client
- Cible / persona principal
- Mots-clés d'image (ex: "premium", "chaleureux", "tech")
- Ce que le client aime / déteste
- Références citées pendant l'appel

### 2. Assets reçus par email / Drive
- Logo (analyser les couleurs, le style, la personnalité)
- Photos existantes (qualité, ambiance, utilisabilité)
- Charte graphique existante (si applicable)
- Textes / contenus fournis

### 3. Formulaire Notion (si rempli)
- Secteur d'activité
- Concurrents identifiés
- Sites admirés (avec commentaires)
- Ton de communication souhaité
- Fonctionnalités prioritaires

### 4. Benchmark concurrentiel
- Résultats du **competitor-benchmark** si réalisé
- Opportunités visuelles identifiées

## Production de la Direction Artistique

### Structure du Document DA

```markdown
# Direction Artistique — [Nom du Projet]
Date : [date]
Client : [Nom]
Secteur : [secteur]

## 1. Positionnement & Personnalité de Marque

### Mots-clés d'image
[3-5 mots qui définissent l'univers visuel]
Ex : Premium — Épuré — Confiance — Innovation — Chaleur

### Ton de communication
[Description du ton : formel/informel, tutoiement/vouvoiement,
technique/accessible, sérieux/décalé]

### Cible principale
[Description du persona principal : âge, profession, attentes,
niveau tech, device principal]

## 2. Palette de Couleurs

### Couleurs principales
- **Primaire** : #[HEX] — [Nom descriptif] — [Usage : CTAs, liens, accents]
- **Secondaire** : #[HEX] — [Nom descriptif] — [Usage : backgrounds, hover]

### Couleurs neutres
- **Texte principal** : #[HEX] — [Utilisation]
- **Texte secondaire** : #[HEX] — [Utilisation]
- **Background principal** : #[HEX]
- **Background secondaire** : #[HEX]
- **Bordures / Séparateurs** : #[HEX]

### Couleurs d'accent
- **Succès** : #[HEX]
- **Erreur** : #[HEX]
- **Warning** : #[HEX]

### Ratio de contraste
- Texte sur fond : minimum 4.5:1 (WCAG AA)
- Grands textes : minimum 3:1

### Exemples de palettes par secteur

**Restaurant / Food :**
- Tons chauds (terracotta, crème, olive)
- Noir profond + or pour le premium
- Vert + blanc pour le healthy

**Tech / SaaS :**
- Bleu électrique + violet (confiance + innovation)
- Fond sombre + accents néon
- Gradients subtils

**Immobilier :**
- Bleu marine + or (luxe)
- Vert sauge + beige (éco-responsable)
- Noir + blanc + bois

**Santé / Bien-être :**
- Vert doux + blanc + beige
- Bleu ciel + lavande
- Tons pastels apaisants

**Artisan / BTP :**
- Bleu foncé + jaune/orange (fiabilité + énergie)
- Gris anthracite + vert
- Tons terreux + accents vifs

## 3. Typographie

### Heading Font
- **Nom** : [Ex: "Space Grotesk"]
- **Source** : Google Fonts / Adobe Fonts / Variable font
- **Poids utilisés** : Bold (700), Medium (500)
- **Usage** : titres, sous-titres, éléments d'impact

### Body Font
- **Nom** : [Ex: "Inter"]
- **Source** : Google Fonts
- **Poids utilisés** : Regular (400), Medium (500), SemiBold (600)
- **Usage** : paragraphes, navigation, labels

### Échelle typographique
```css
--font-hero: clamp(3rem, 8vw, 6rem);     /* Hero headline */
--font-h1: clamp(2.5rem, 5vw, 4rem);     /* Page titles */
--font-h2: clamp(1.75rem, 3vw, 2.5rem);  /* Section titles */
--font-h3: clamp(1.25rem, 2vw, 1.75rem); /* Subsections */
--font-body: clamp(1rem, 1.2vw, 1.125rem); /* Body text */
--font-small: 0.875rem;                   /* Captions, labels */
--line-height-heading: 1.1;
--line-height-body: 1.6;
```

### Recommandations typographiques par positionnement

**Premium / Luxe :** Serif élégante (Playfair Display, Cormorant) + Sans-serif clean (Inter, Outfit)
**Tech / Moderne :** Géométrique (Space Grotesk, Syne) + Neutre (Inter, DM Sans)
**Créatif / Artistique :** Display font forte (Clash Display, Cabinet Grotesk) + Readable body
**Traditionnel / Confiance :** Serif classique (Lora, Source Serif) + Sans-serif neutre

## 4. Ambiance & Références Visuelles

### Moodboard
[Description de l'ambiance générale : lumière, texture, espace,
densité d'information, ratio texte/image]

### Sites de référence
Pour chaque référence (3-5 sites) :
- **URL** : [lien]
- **Ce qu'on retient** : [élément spécifique à s'inspirer]
- **Ce qu'on ne reprend pas** : [si applicable]
- **Screenshot annoté** : [si possible]

### Style photographique
- [Style : lifestyle, corporate, artistique, produit, etc.]
- [Traitement : lumineux, contrasté, désaturé, coloré, etc.]
- [Cadrage : plans larges, portraits, détails, etc.]
- Sources recommandées si photos stock : Unsplash, Pexels (collections spécifiques)

### Iconographie
- Style : outlined / filled / duotone
- Épaisseur : 1.5px / 2px
- Source recommandée : Lucide Icons, Phosphor Icons, custom

## 5. Plan d'Animations

### Philosophie d'animation
[Ex: "Animations subtiles et fluides qui guident l'oeil sans
distraire. Chaque animation a un but : révéler du contenu,
créer de la profondeur, ou guider l'interaction."]

### Animations globales
- **Smooth scroll** : Lenis, vitesse [valeur], easing [type]
- **Loader initial** : [description si applicable]
- **Transitions de page** : [description si applicable]
- **Cursor personnalisé** : [oui/non, description si oui]

### Animations par section
```
Homepage :
  Hero :
    - Titre : split text, reveal par mot, stagger 0.05s
    - Image/Vidéo : clip-path reveal ou scale-in
    - CTA : fade-up avec delay

  Section Services :
    - Cards : stagger fade-up au scroll
    - Icônes : draw SVG au scroll

  Section Références :
    - Galerie : horizontal scroll ou parallax
    - Images : reveal au scroll avec clip-path

  Section Témoignages :
    - Carousel auto ou scroll horizontal

  CTA Final :
    - Text reveal + animation background

  Footer :
    - Fade-in éléments au scroll
```

### Paramètres techniques
```
Durée standard : 0.8s - 1.2s
Easing : cubic-bezier(0.25, 0.46, 0.45, 0.94) ou "power2.out"
Stagger : 0.05s - 0.1s entre éléments
ScrollTrigger start : "top 80%"
ScrollTrigger end : "bottom 20%"
```

## 6. Structure du Site (Sitemap)

```
/ (Homepage)
├── /a-propos (ou /about)
├── /services
│   ├── /services/[service-1]
│   └── /services/[service-2]
├── /realisations (ou /portfolio)
├── /contact
└── /mentions-legales
```

Pour chaque page, lister :
- Les sections prévues (dans l'ordre)
- Le contenu attendu par section
- Les CTAs de chaque page
```

## Processus d'Extraction

1. **Rassembler** toutes les sources (emails, notes, Notion, assets)
2. **Analyser** le logo pour en extraire des indices de style
3. **Croiser** les références du client avec les standards Awwwards
4. **Définir** la palette en partant du logo + secteur + positionnement
5. **Sélectionner** la typographie cohérente avec la personnalité
6. **Planifier** les animations adaptées au contenu et au secteur
7. **Documenter** le tout dans Notion (page dédiée au projet)
8. **Valider** en interne avant de commencer les maquettes

## Intégration

- Alimenté par **onboarding-email-sequence** (assets reçus) et **competitor-benchmark**
- Consulte **awwwards-standards** pour les références qualité
- Sert de base au travail de design dans **sprint-planning** (J1-J2)
- Les choix DA sont justifiés dans **maquette-presentation**