# Hungry Nuggets — Design System

> Source de vérité pour la direction artistique et le langage de design de Hungry Nuggets. Ce document est destiné à être consommé par les humains de l'équipe **et** par les agents IA (Claude Design, Claude Code, etc.) pour générer des artefacts visuels et front-end fidèles à la marque.

**Version** : 1.0 — 2026-04-30
**Sources** : hungrynuggets.com, click.hungrynuggets.com, signature mail HN, @hungry_nuggets (Instagram)

---

## 1. Brand identity

| Champ | Valeur |
|---|---|
| Nom | Hungry Nuggets |
| Type | Agence créative — communication visuelle |
| Localisation | Ottignies-Louvain-la-Neuve, Belgique |
| Tagline principal | *La photo, le web, le design, la vidéo nous fait craquer* |
| Mission | Créer une communication visuelle soignée — design, audiovisuel, conseil stratégique — qui résiste au test du temps. |
| Valeurs | Équilibre, transparence, partage, recherche, co-création, bienveillance |
| Structure interne | « Tribu » (≠ équipe / staff) |
| Audience | PME et marques qui veulent une com créative, soignée, durable |

### 1.1 Sous-marques

- **Click by HN** (`click.hungrynuggets.com`) — branche performance / contenu social conversionnel. Tone plus direct, plus orienté résultats. Garde la palette parente mais bascule sur les fontes Bricolage Grotesque + Inter au lieu de Figtree.

---

## 2. Design principles

1. **Soigné aux petits oignons** — pas d'à-peu-près. Chaque détail compte. Espacements précis, alignements parfaits, copie relue.
2. **Du fond avant la forme** — un design joli qui ne convertit pas / ne communique pas est un échec. La psychologie et la stratégie viennent avant l'esthétique.
3. **Maximum de message dans minimum d'espace** — minimaliste, mais pas froid. Chaud par la couleur et le ton.
4. **Chaleur humaine** — la marque parle comme un·e ami·e qui s'y connaît, jamais comme un consultant. Métaphores food, tutoiement assumé.
5. **Durable plutôt que tendance** — éviter les modes éphémères. Choisir des fondations qui vieillissent bien.

---

## 3. Voice & Tone

### 3.1 Personnalité

Casual professional. Passionné·e. Curieux·se. Bienveillant·e. Confiant·e sans être arrogant·e. Pince-sans-rire.

### 3.2 Métaphores food (lexique de marque)

À utiliser avec parcimonie mais à reconnaître comme signature :

- **pépites** — projets, idées, opportunités (« Nos pépites ont faim »)
- **bouchée / bite** — premier essai, petit format (cf. tier *Just a Bite*)
- **dévorer / croustiller** — engagement, plaisir
- **café / thé** — invitation au dialogue (« Ton café… avec ou sans sucre ? »)
- **soigné aux petits oignons** — qualité, soin
- **t'as faim ?** — punchline d'invitation

### 3.3 Voix selon contexte

| Contexte | Tu | Vous | Niveau food | Exemple |
|---|---|---|---|---|
| Site agence | tu | rare | élevé | « Et toi, t'as faim ? » |
| Click (perf) | je / vous | mixte | modéré | « Faites décoller vos ventes » |
| Email client B2B | vous | direct | léger | « Hello [prénom] » + signature warm |
| Réseaux sociaux | tu | jamais | élevé | « Nos pépites craquent pour ce projet » |

### 3.4 Choses à NE PAS dire

- Jargon corporate vide (« leverage », « synergies », « ecosystem »).
- Promesses creuses (« nous sommes les meilleurs »).
- Métaphores food forcées sur un sujet sérieux (deuil, sécurité, RGPD).
- Anglicismes inutiles quand un mot français existe.

---

## 4. Color palette

> Palette construite autour de l'**anthracite (texte)** et du **jaune nugget (signature)**, posés sur des **neutres chauds** plutôt que froids.

### 4.1 Primaires

| Token | Hex | RGB | Usage |
|---|---|---|---|
| `--ink` | `#1E2122` | 30 33 34 | Texte principal, fonds dark, logo wordmark sombre |
| `--accent` | `#FBBB21` | 251 187 33 | Jaune nugget — couleur de marque, CTA, hover, accents |
| `--cream` | `#F9F7F2` | 249 247 242 | Fond chaud signature (vs blanc clinique) |

### 4.2 Neutres (échelle anthracite chaud)

| Token | Hex | Usage |
|---|---|---|
| `--ink` | `#1E2122` | Niveau 900 — texte fort |
| `--ink-700` | `#374047` | Niveau 700 — sous-titre |
| `--ink-600` | `#606E79` | Niveau 600 — texte secondaire / muted |
| `--ink-500` | `#6E7481` | Niveau 500 — métadonnée |
| `--ink-400` | `#6B6B6B` | Niveau 400 — placeholder |
| `--ink-200` | `#DEE1E3` | Niveau 200 — bordures, séparateurs |
| `--ink-100` | `#ECEEEF` | Niveau 100 — fond zone secondaire |
| `--ink-050` | `#FAFAFA` | Niveau 050 — fond léger |
| `--white` | `#FFFFFF` | Blanc pur — cards |

### 4.3 Accent variations

| Token | Hex | Usage |
|---|---|---|
| `--accent` | `#FBBB21` | Jaune nugget brand |
| `--accent-soft` | `#FFE79B` | Halo / focus ring (alpha-friendly) |
| `--accent-warm-bg` | `#FFF7E0` | Fond très léger pour zones sponsored / featured |

### 4.4 Sémantiques

| Token | Hex | Usage |
|---|---|---|
| `--success` | `#22A06B` | Confirmations, validations |
| `--warning` | `#FBBB21` | Réutilise l'accent (pas de couleur dédiée) |
| `--error` | `#D63B3B` | Erreurs, suppressions |
| `--info` | `#1E73BE` | Liens info, banners (présent sur le site) |

### 4.5 Règles d'usage couleur

- **Jaune nugget = signature, pas wallpaper.** À doser : un CTA, un accent, un halo. Jamais un fond plein de section longue.
- **Cream `#F9F7F2`** est le fond **par défaut** des pages, pas le blanc pur.
- **Le contraste minimal AA** (4.5:1 sur du texte body) est non-négociable.
- En **dark mode**, l'anthracite `#1E2122` devient le fond, le jaune nugget reste accent (taux de saturation à conserver — ne pas désaturer le jaune en dark).

---

## 5. Typography

### 5.1 Familles

| Système | Display / Heading | Body |
|---|---|---|
| **HN principal** | Figtree (400, 500, 600, 700, 800, 900) | Figtree (400, 500) |
| **Click by HN** | Bricolage Grotesque (200-800) | Inter (300-700) |

> **Default** : Figtree partout, sauf branche Click qui a sa propre identité plus performance/tech.

### 5.2 Stack de fallback

```css
font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
```

### 5.3 Échelle de taille (modular fluide)

| Token | Mobile | Desktop | Usage |
|---|---|---|---|
| `--text-2xs` | 12px | 12px | Légende, badge, méta |
| `--text-xs` | 13px | 14px | Méta secondaire |
| `--text-sm` | 14px | 15px | Texte secondaire |
| `--text-base` | 16px | 16px | Corps de texte |
| `--text-md` | 17px | 18px | Lead paragraph |
| `--text-lg` | clamp(18px, 1.75vw, 20px) | 20px | Sous-titre |
| `--text-xl` | clamp(20px, 2.1vw, 24px) | 24px | Titre tertiaire |
| `--text-2xl` | clamp(24px, 2.8vw, 32px) | 32px | Titre secondaire H3 |
| `--text-3xl` | clamp(32px, 4.2vw, 48px) | 48px | Titre principal H2 |
| `--text-display` | clamp(36px, 5.4vw, 62px) | 62-80px | Hero / display |

### 5.4 Poids et usage

| Weight | Token | Usage |
|---|---|---|
| 400 | regular | Body |
| 500 | medium | Sub-headlines, captions importantes |
| 600 | semibold | Boutons, micro-titres, navigation |
| 700 | bold | H1-H4, CTAs |
| 800 | extrabold | Display rare |
| 900 | black | Très ponctuel — display/hero choc |

### 5.5 Line-heights

| Usage | Valeur |
|---|---|
| Display / hero | 1 — 1.1 |
| Headings | 1.2 — 1.3 |
| Sub-headings / lead | 1.4 |
| Body | 1.5 — 1.6 |
| Small / caption | 1.4 |
| Code | 1.6 |

### 5.6 Letter-spacing

| Contexte | Valeur |
|---|---|
| Display / hero | -0.02em (tracking serré) |
| Heading | -0.01em |
| Body | 0 |
| Eyebrow / kicker | 0.12em uppercase |
| Button | 0.01em |

---

## 6. Spacing system

Échelle 4-based. **Jamais** de valeur arbitraire — toujours dans l'échelle.

| Token | Valeur | Usage type |
|---|---|---|
| `--space-0` | 0 | — |
| `--space-1` | 4px | Gap inter-icon ↔ texte |
| `--space-2` | 8px | Padding badge, gap mini |
| `--space-3` | 12px | Padding card mini, gap section |
| `--space-4` | 16px | Padding card / button |
| `--space-5` | 20px | Padding card large, gap form |
| `--space-6` | 24px | Padding section, gap entre cards |
| `--space-8` | 32px | Padding container, gap entre groupes |
| `--space-10` | 40px | Padding section verticale |
| `--space-12` | 48px | Padding hero mobile |
| `--space-16` | 64px | Padding hero desktop |
| `--space-20` | 80px | Padding section mega |
| `--space-24` | 96px | — |

---

## 7. Border radius

| Token | Valeur | Usage |
|---|---|---|
| `--radius-none` | 0 | Bord tranchant |
| `--radius-xs` | 4px | Petit composant (tag, code inline) |
| `--radius-sm` | 8px | Input, button discret |
| `--radius-md` | 12px | Card mini, button standard |
| `--radius-lg` | 16px | Card standard |
| `--radius-xl` | 22px | Card large, modal |
| `--radius-2xl` | 24px | Hero card, panel |
| `--radius-pill` | 999px | Badge, pill button (50px à 500px sur le site existant) |
| `--radius-full` | 50% | Avatar, social icon |

---

## 8. Shadows / Elevation

Pour fond clair (cream/white).

| Token | Valeur | Usage |
|---|---|---|
| `--shadow-none` | none | Pas d'élévation |
| `--shadow-xs` | `0 1px 2px rgba(30,33,34,0.04)` | Card discret |
| `--shadow-sm` | `0 4px 12px -4px rgba(30,33,34,0.08)` | Card hover |
| `--shadow-md` | `0 8px 24px -8px rgba(30,33,34,0.12)` | Card surélevée |
| `--shadow-lg` | `0 14px 30px -10px rgba(30,33,34,0.18)` | Modal, sticky CTA |
| `--shadow-xl` | `0 20px 40px -12px rgba(30,33,34,0.22)` | Hero card |
| `--shadow-glow` | `0 12px 28px rgba(251,187,33,0.35)` | Mise en avant brand (logo nugget) |

En dark mode, augmenter les opacités (× 1.5 à × 2) car le contraste de l'ombre est plus faible.

---

## 9. Motion

### 9.1 Durations

| Token | Valeur | Usage |
|---|---|---|
| `--motion-fast` | 150ms | Hover, focus, micro-interactions |
| `--motion-base` | 250ms | Default — show/hide, transform |
| `--motion-slow` | 400-500ms | Modal in/out, page transitions |
| `--motion-pace` | 600-800ms | Animations narratives, fade-up sequences |

### 9.2 Easings

| Token | Valeur | Usage |
|---|---|---|
| `--ease-standard` | `cubic-bezier(0.22, 1, 0.36, 1)` | Default — tout ce qui s'apparente à un *snap* élégant |
| `--ease-out` | `cubic-bezier(0.16, 1, 0.3, 1)` | Apparitions (fade-in, slide-in) |
| `--ease-in` | `cubic-bezier(0.7, 0, 0.84, 0)` | Disparitions |
| `--ease-bouncy` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Mascot wobble, élément fun |

### 9.3 Patterns

- **Card hover** : `translateY(-2px)` + augmentation de shadow + transition 250ms.
- **Button press** : retour à `translateY(0)` en 100ms.
- **Reveal séquentiel** : fade-up avec délais staggerés de 40-60ms.
- **Reduce motion** : toujours respecter `prefers-reduced-motion: reduce` (ramener les durées à 0.01ms).

---

## 10. Iconography

- **Style** : line icons à stroke 1.8-2px, terminaisons rounded.
- **Référence** : Lucide / Feather Icons (mêmes proportions).
- **Taille standard** : 20-24px à l'intérieur de cards, 32-40px dans les illustrations hero.
- **Couleur** : `currentColor` — l'icône hérite de la couleur de son parent.
- **Container** : pour les icônes en avatar dans une card, container 40×40px, radius 12px, fond `rgba(251,187,33,0.14)` (jaune transparent).
- Les icônes brand (réseaux sociaux) prennent la version officielle du réseau (Instagram glyph officiel, etc.) avec stroke 1.8px ou en filled selon contexte.

---

## 11. Imagery

### 11.1 Le « croc » HN — signature visuelle

Le shape signature de Hungry Nuggets : **un cercle jaune nugget avec une morsure (« croc ») croquée à droite**.

- **Usage** : photo de profil dans signatures mail, avatars équipe, hero brand.
- **Variante site links** : nugget seul (cercle + croc) avec wordmark *hungry nuggets* en anthracite à l'intérieur.
- **Asset** : `nugget-shape.png` (extrait pixel-perfect de la photo de profil de Thomas, 481×484, transparent, jaune `#FBBB21`).
- **Règle d'or** : ne **jamais** changer le shape ni l'orientation du croc. C'est l'élément de cohérence inter-supports.

### 11.2 Photo style

- **Lifestyle, pas studio froid.** Lumière naturelle, fond simple, sujet humain ou produit en action.
- **Treatment** : couleurs poussées légèrement vers la chaleur (saturation +5, balance des blancs un poil chaude). Pas de filter Instagram daté.
- **Format profil équipe** : portrait centré dans cercle nugget jaune (croc à droite).
- **Format projet / réalisation** : photo brute large, ratio 4:5 ou 16:9, sans filtre ni overlay coloré.

### 11.3 Illustrations

Pas d'illustrations gimmick, vector cartoon, ou stock. Si illustration : custom, géométrique simple, palette brand stricte (jaune + anthracite + cream).

---

## 12. Components

### 12.1 Button

```
Variants: primary | secondary | ghost
Sizes: sm (36px) | md (44px) | lg (52px)
```

- **Primary** : fond `--ink`, texte `--white`, hover passe en `--accent` ou ajoute un halo `--shadow-glow`.
- **Secondary** : fond `--white`, texte `--ink`, border `--ink-200`.
- **Ghost** : fond transparent, texte `--ink`, hover fond `--ink-100`.
- **Pill** (radius 999px) pour CTA hero, **rounded** (radius 12px) pour boutons UI.
- Padding : sm = 8px 16px ; md = 12px 20px ; lg = 16px 28px.
- Font-weight : 600 (semibold).
- Transition : `transform 150ms`, `background 200ms`.

### 12.2 Card

- Fond `--white` sur cream, ou `--ink` sur dark mode.
- Border `1px solid var(--line)` où `--line = rgba(30,33,34,0.08)`.
- Radius `--radius-lg` (16px).
- Padding `--space-4` à `--space-5` (16-20px).
- Shadow `--shadow-xs` au repos, `--shadow-md` au hover.
- Hover : `translateY(-2px)` + border-color → `--accent`.

### 12.3 Card primary CTA

- Fond `--ink` (anthracite), texte `--white`.
- Padding plus généreux (20-22px).
- Chevron en couleur `--accent` qui se déplace de 4px à droite au hover.

### 12.4 Card feature (offre / promo)

- Fond gradient subtil `linear-gradient(135deg, --accent-warm-bg 0%, --white 65%)`.
- Border `rgba(251,187,33,0.55)`.
- Halo radial jaune à l'angle inverse du gradient.
- Badge pill jaune en haut à droite (texte `--ink`, font 10px, weight 700, uppercase, letter-spacing 0.1em).

### 12.5 Input / Form field

- Hauteur 44px (mobile-friendly).
- Radius `--radius-sm` (8px).
- Border 1px `--ink-200`, focus → border `--ink` + outline `0 0 0 3px var(--accent-soft)`.
- Padding horizontal 14px.
- Placeholder `--ink-400`.

### 12.6 Badge

- Pill (radius 999px).
- Padding 3-4px × 9-10px.
- Font 10-11px, weight 700, uppercase, letter-spacing 0.1em.
- Fond `--accent`, texte `--ink`.

---

## 13. Logo & brand assets

### 13.1 Wordmark

`logo-hungrynuggets.svg` — wordmark *hungry nuggets* dessiné main, **toujours en jaune nugget `#FBBB21`** sur fond foncé ou cream, **anthracite `#1E2122`** sur fond jaune ou clair (`logo-hungrynuggets-dark.svg`).

- **Hauteur min** : 32px.
- **Espace de protection** : x = hauteur d'une lettre.

### 13.2 Nugget shape

`nugget-shape.png` — cercle jaune avec croc à droite (extrait de la photo de profil HN). Asset signature à utiliser pour :
- Avatars équipe (avec photo dedans).
- Logo composé : nugget + wordmark à l'intérieur.
- Bullets visuels.

**Ne jamais** :
- Changer la couleur du nugget (toujours jaune `#FBBB21`).
- Inverser la position du croc.
- Distordre les proportions.

---

## 14. Accessibility

- **Contraste minimum AA** sur tout texte body (4.5:1).
- **Touch targets** ≥ 44×44px (Apple) / 48×48px (Material).
- **Focus visible** : outline `0 0 0 3px var(--accent-soft)` + box-shadow.
- **Reduce motion** : respecter `prefers-reduced-motion`.
- **Screen reader** : `aria-label` sur tout bouton icon-only, `aria-hidden` sur les icônes décoratives.
- **Lang** : `lang="fr"` sur la balise html.

---

## 15. Tokens CSS export

```css
:root {
    /* Brand */
    --ink: #1E2122;
    --accent: #FBBB21;
    --accent-soft: #FFE79B;
    --accent-warm-bg: #FFF7E0;
    --cream: #F9F7F2;
    --white: #FFFFFF;

    /* Neutrals (warm anthracite scale) */
    --ink-700: #374047;
    --ink-600: #606E79;
    --ink-500: #6E7481;
    --ink-400: #6B6B6B;
    --ink-200: #DEE1E3;
    --ink-100: #ECEEEF;
    --ink-050: #FAFAFA;
    --line: rgba(30, 33, 34, 0.08);

    /* Semantic */
    --success: #22A06B;
    --error: #D63B3B;
    --info: #1E73BE;

    /* Type scale */
    --text-2xs: 12px;
    --text-xs: 14px;
    --text-sm: 15px;
    --text-base: 16px;
    --text-md: 18px;
    --text-lg: clamp(18px, 1.75vw, 20px);
    --text-xl: clamp(20px, 2.1vw, 24px);
    --text-2xl: clamp(24px, 2.8vw, 32px);
    --text-3xl: clamp(32px, 4.2vw, 48px);
    --text-display: clamp(36px, 5.4vw, 62px);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-full: 50%;

    /* Shadow */
    --shadow-xs: 0 1px 2px rgba(30, 33, 34, 0.04);
    --shadow-sm: 0 4px 12px -4px rgba(30, 33, 34, 0.08);
    --shadow-md: 0 8px 24px -8px rgba(30, 33, 34, 0.12);
    --shadow-lg: 0 14px 30px -10px rgba(30, 33, 34, 0.18);
    --shadow-xl: 0 20px 40px -12px rgba(30, 33, 34, 0.22);
    --shadow-glow: 0 12px 28px rgba(251, 187, 33, 0.35);

    /* Motion */
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 450ms;
    --motion-pace: 700ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --font-display: 'Figtree', -apple-system, sans-serif;
    --font-body: 'Figtree', -apple-system, sans-serif;
}
```

---

## 16. Don'ts (anti-patterns)

- ❌ Bleu `#1E73BE` en couleur primaire — c'est le bleu WordPress par défaut, pas une couleur HN.
- ❌ Utiliser blanc `#FFFFFF` comme fond de page par défaut → préférer cream `#F9F7F2`.
- ❌ Mettre du jaune nugget sur de larges aplats — ça brûle visuellement. C'est un **accent**.
- ❌ Reproduire Click avec Figtree (et inversement) — chaque sous-marque a sa fonte.
- ❌ Distordre / recolorer le shape du croc.
- ❌ Métaphores food sur sujet sensible (légal, deuil, sécurité).
- ❌ Tutoiement en B2B email à froid → vouvoiement en premier contact.

---

*Document maintenu par l'équipe HN. Pour proposer une évolution, ouvrir une issue ou pinger directement.*