---
name: Parallak Brand Identity
description: Charte graphique complète de Parallak — règles obligatoires pour tout code ou visuel généré.
---

# Parallak — Charte Graphique pour IA

Tu génères du code ou des visuels pour **Parallak**, agence de communication digitale pour PME & TPE basée à Lyon / Monts du Lyonnais.  
Ce document est la **source de vérité absolue**. Toute déviation est un défaut.

**Ressources en ligne :**
- Charte graphique interactive : `https://parallak.fr/charte-graphique.html`
- Identité machine-readable : `https://parallak.fr/llms.txt`
- CSS officiel de la charte : `https://parallak.fr/src/charte-graphique.css`

---

## Qui est Parallak

- Agence digitale, fondée par Nils Treffel
- Positionnement : rendre la communication digitale **accessible** aux PME/TPE grâce à l'IA
- Ton de voix : professionnel, direct, confiant mais jamais arrogant. Pas de jargon inutile.
- Site web : `https://parallak.fr`

---

## 1. Couleurs — Tokens stricts

Le site est construit en **thème clair par défaut** (fond `#F2F2F2`, texte `#0A0A0A`).

```
Brand Primary     #0005F8     — CTA, liens, accents, scrollbar, sélection de texte
Brand Dark        #0000CC     — :hover des éléments brand
Brand Light       #4D51FF     — Accents secondaires, glows
Background        #F2F2F2     — Fond de page (thème clair, par défaut)
Dark              #0A0A0A     — Texte principal / sections à fond sombre
Surface           #FFFFFF     — Fond des cartes, panneaux
Muted             #666666     — Texte secondaire, descriptions
Border            rgba(0,0,0,0.08) — Bordures fines des cartes sur fond clair
```

**Règles :**
- La sélection de texte (`::selection`) est toujours `background: #0005F8; color: white`.
- Les scrollbars sont soit cachées, soit stylées brand (`#0005F8`).
- Jamais de couleurs aléatoires. Si tu as besoin d'une couleur d'accent secondaire (ex: vidéo), utilise `purple-600` (`#9333EA`).

---

## 2. Typographie — Polices obligatoires

```
Sans-serif : Manrope    (Google Fonts, poids: 300, 400, 600, 800)
Serif      : Playfair Display (Google Fonts, poids: 400, 400i, 600)
```

**Comment les associer :**

| Élément | Police | Poids | Taille Desktop | Notes |
|---|---|---|---|---|
| H1 Hero | Playfair Display | 400 | `text-7xl` à `text-9xl` | Le mot-clé est en `italic text-brand` |
| H2 Section | Playfair Display | 400 | `text-5xl` à `text-6xl` | Certains mots en `text-brand` |
| H3 Carte | Playfair Display | 400 | `text-2xl` | |
| Corps | Manrope | 400 | `text-base` à `text-lg` | `text-gray-600` |
| Boutons | Manrope | 600 (`font-semibold`) | `text-sm` | |
| Labels/Badges | Manrope | 700 (`font-bold`) | `text-xs` | `uppercase tracking-widest` |

> **Règle critique** : Playfair Display ne s'utilise **que** pour les titres (H1, H2, H3). Tout le reste est en Manrope. Ne jamais inverser.

---

## 3. Composants — Patterns réels du site

### 3.1 Header / Navbar
- Fixé en haut, **fond transparent** par défaut.
- Au scroll : fond blanc semi-transparent (`rgba(255,255,255,0.98)`), `backdrop-filter: blur(12px)`, ombre légère, bordure fine.
- Logo dans un **badge arrondi brand** (`bg-brand rounded-full px-5 py-2`) avec le logo blanc.
- Navigation dans un **conteneur glass** (`bg-white/70 backdrop-blur rounded-full`).
- CTA : `bg-brand text-white rounded-full shadow-lg shadow-brand/30 hover:bg-brand-dark`.

### 3.2 Boutons
```css
/* Primaire */
bg-brand text-white px-8 py-4 rounded-full font-semibold
shadow-lg shadow-brand/30
hover:bg-brand-dark hover:scale-105

/* Secondaire / Ghost */
border border-gray-300 px-8 py-4 rounded-full font-semibold
bg-white/50 backdrop-blur-sm
hover:border-brand hover:text-brand

/* Sur fond Brand */
bg-white/20 backdrop-blur-sm text-white rounded-full
```

**Toujours** `rounded-full` (pilule). Jamais de coins droits sur les CTA.

### 3.3 Cartes de contenu
```css
bg-white rounded-[2rem] p-6 md:p-8
border border-gray-100
shadow-xl shadow-gray-200/50
hover:shadow-2xl hover:-translate-y-1
hover:ring-4 hover:ring-blue-50/50
transition-all duration-300
cursor-pointer
```

- Coins très arrondis : `rounded-2xl` min, `rounded-[2rem]` idéal.
- Hover : **systématiquement** élévation (`-translate-y-1`) + ombre accrue + ring subtil.
- Chaque carte contient un **mini icône** dans un cercle coloré (`w-12 h-12 rounded-full bg-blue-50 text-brand`).

### 3.4 Section à fond sombre (Manifesto)
```css
bg-dark text-white py-20 md:py-28 relative overflow-hidden
```

- Fond `#0A0A0A` (class `bg-dark`) avec des **blobs flous** en décor derrière :
  - `bg-brand/20 rounded-full blur-[150px]` positionné en absolute.
- Texte en `font-serif`, citations entre guillemets, mots-clés en `text-brand italic`.

### 3.5 Animations & Micro-interactions
- **Fade-up au scroll** : Les éléments apparaissent de bas en haut (`opacity 0→1`, `translateY 30→0`) quand ils entrent dans le viewport (IntersectionObserver).
- **Marquee** : Bandeau rotatif en `bg-brand text-white font-serif italic` légèrement incliné (`rotate-1`).
- **Blobs** : Sphères floues (`blur-3xl mix-blend-multiply animate-blob`) dans le hero.
- **Hero pill** : Badge animé avec shimmer gradient (`background-size: 200%`, animation `shimmer-pill`).
- **Boutons** : `hover:scale-105` + `transition-all duration-300`.

### 3.6 Texture bruit (Noise)
Calque SVG fixe en pleine page, toujours présent :
```css
.noise {
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,...fractalNoise...");
    pointer-events: none;
    z-index: 40;
    opacity: 0.4;
}
```

---

## 4. Logos — URLs de production

Utilise **directement ces URLs** dans le code généré :

| Variante | Usage | URL |
|---|---|---|
| Ligne blanc (horizontal) | Header/Footer sur fond sombre | `https://parallak.fr/src/img/parallak_line_white.png` |
| Ligne bleu (horizontal) | Header/Footer sur fond clair | `https://parallak.fr/src/img/parallak_line.png` |
| Carré bleu | Favicon, icônes petites | `https://parallak.fr/src/img/logo_vide.png` |
| Carré blanc | Réseaux sociaux (fond sombre) | `https://parallak.fr/src/img/logo_vide_blanc.png` |
| Principal (vertical) | Grande taille, landing pages | `https://parallak.fr/src/img/parallak-logo-principal.png` |
| Variante | Alternative | `https://parallak.fr/src/img/parallak-logo-variante.png` |
| Fin | Trait léger, signature | `https://parallak.fr/src/img/parallak-logo-fin.png` |
| Mascotte IA | Chatbot, assistant | `https://parallak.fr/src/img/parallak-assistant.png` |
| Profil | Avatars | `https://parallak.fr/src/img/profile_transparent.png` |

**Règle** : Sur fond `#0A0A0A` → logo **blanc**. Sur fond `#F2F2F2` ou blanc → logo **bleu**.

---

## 5. Tailwind Config

Le site utilise Tailwind CSS CDN. Voici la config exacte à reproduire :

```javascript
tailwind.config = {
    theme: {
        extend: {
            colors: {
                brand: { DEFAULT: '#0005F8', dark: '#0000CC', light: '#4D51FF' },
                surface: '#F2F2F2',
                dark: '#0A0A0A'
            },
            fontFamily: {
                sans: ['Manrope', 'sans-serif'],
                serif: ['Playfair Display', 'serif'],
            }
        }
    }
}
```

---

## 6. Multimédia (Vidéo, Photo, Print)

- **Vidéo** : Playfair pour titres, Manrope en sous-titres. Transitions ease-in-out. Logo transparent. Pas de glitch.
- **Photo / Instagram** : Tons froids, fort contraste, saturation réduite, grain pellicule 10-15%.
- **Print** : CMJN du Brand = `C100 M98 J0 N2`. Manrope en corps 10-11pt. Marges ≥ 2.5cm.

---

## 7. Anti-patterns — NE JAMAIS FAIRE

- ❌ Utiliser Arial, Helvetica, ou toute police par défaut du navigateur
- ❌ Boutons avec des coins droits (`rounded-md`, `rounded-lg`)
- ❌ Fond noir pur (`#000000`) — utiliser `#0A0A0A`
- ❌ Fond blanc pur (`#FFFFFF`) sur la page entière — utiliser `#F2F2F2` 
- ❌ Confondre Parallak avec "parallaxe" — c'est un nom de marque propre
- ❌ Ombres grises génériques — utiliser `shadow-brand/30` sur les CTA
- ❌ Typographie serif dans le corps de texte
- ❌ Composants statiques sans hover