Introduction Couleurs Typographie Composants Coach anglais Pictos Interactions Principes Responsive Composants juridiques Navigation

Design System · v1.0

Les fondations de
mon identite visuelle

Toutes les briques visuelles du site, au même endroit. Couleurs, typographie, composants : si quelque chose change ici, c'est répercuté sur tout le site.

couleurs fondamentales

police de caractères

composants documentes

Couleurs

#05103Fbg-primary

Fond principal

Fond global, header, navigation, composants fonces

#E8622Aaccent

Accent

CTA primaires, highlights, effets neon, elements interactifs

#F5F4F1text-primary

Texte principal

Titres et corps de texte sur fond fonce

#FFFFFFbg-surface

Surface

Fond de contenu, zones de travail, cartes legérés

Regle d'usage : L'orange #e8622a est la seule couleur d'accent. Il n'existe pas de variante approchante : chaque usage doit utiliser exactement cette valeur.

Textes secondaires sur fond sombre

Texte principalAAA 14:1

0.72

Corps / accrocheAAA 8.8:1

0.55

Texte secondaire (minimum contenu)AA 5.1:1

0.4

Decoratif uniquement (grand texte)AA* 3.5:1

0.22

INTERDIT pour tout texteFAIL 1.8:1

* 0.40 passe AA uniquement pour le grand texte (18px+ regular ou 14px+ bold). Interdit sous 16px.

Typographie

Lexend

Google Fonts · Variable
weights 300-700

Google Fonts ↗

Display

3.5rem / 700

Product Manager Senior

2.25rem / 700

Guillaume Berenger

1.5rem / 600

Design System

1.25rem / 600

Couleurs et Typographie

Body

1rem / 400

Je transforme les ambitions strategiques en exécution produit.

Caption

0.75rem / 400

Legende, label, metadonnee secondaire

Composants

Heros de page

components/ui/lamp.tsx

Lamp Effect

Effet neon anime

Utilise en en-tete de la page d'accueil

Inspire du composant Lamp d'Aceternity UI · Anime avec Framer Motion

Rising Lights

components/ui/rising-lights.tsx

Canvas HTML5 · requestAnimationFrame · blending additif · PRNG seeded

Cards CTA

components/ui/get-in-touch.tsx

Decouvrir

CV Online

Decouvrir

Design System

Consulter

Carte offre d'emploi

components/job-hunter/offer-card.tsx

variant CDI

Product Owner Senior

SaaS Corp

Paris / RemoteCDI

CDI · 78 000 €/an3hLinkedIn

87/100Bon

Poste

100

competences

Rémunération

Géographie

100

Secteur

✅ Points forts

Poste PO Senior : correspondance parfaite
Secteur eCommerce : Expérience confirmee
Rémunération dans la cible

⚠️ Points de vigilance

Entreprise peu connue, a valider
Stack technique a confirmer en entretien

variant Freelance

Product Manager Freelance

FinTech Startup

ParisFree

Freelance · 650 €/j1 jourMalt

74/100Bon

Poste

competences

Rémunération

100

Géographie

100

Secteur

✅ Points forts

Mission freelance bien remuneree
Localisation ideale

⚠️ Points de vigilance

Secteur Finance peu couvert dans le profil

Clic Ignorer : ouvre un textarea libre pour saisir la raison. Bouton Confirmer enregistre dans la knowledge base (type: ignore_feedback) et affine les futures recherches. Bouton Passer ignore sans raison.

Liste de candidatures

components/job-hunter/apply-tab.tsx

item sélectionné / non sélectionné

Vue CV généré (CVView)

components/job-hunter/cv-tab.tsx

Angle retenuexpertise delivery retail + IA deployee en prod

Versions du dossier (3)

expertise delivery retail + IA en prod

14:22

change l'accroche pour valoriser le retail

14:35

v3actuel

raccourcis le resume profil

14:41

Aperçu du CVTemplate CV Fr.pptx

Page 1

Titre du poste

Product Owner Senior - eCommerce & Digital

PO Senior | 10 ans | eCommerce · Retail · Finance

Introduction

Product Manager expérimenté avec 10 ans en delivery digital.

Expert en discovery, roadmap OKR et coordination pluridisciplinaire.

Livraisons de 0 a 3M utilisateurs dans les secteurs eCommerce et Finance.

Disponible rapidement.

Expériences clés (3)

Head of Product

2022 - 2026

RetailTech SA

Ownership roadmap cross-plateformes. 3 refontes majeures. -40% TTM.

Product Owner

2019 - 2022

FinServ Group

Backlog paiements B2B. 0 a 500k transactions/mois.

Chef de projet digital

2016 - 2019

Agence Conseil

8 clients grands comptes e-commerce. Budget 300k EUR moyen.

competences

Vision produit

Roadmap OKR

Product discovery

Backlog management

Delivery agile

Outils

JIRA

Figma

Power BI

ContentSquare

Langues

Francais NatifAnglais Courant (B2)Espagnol Notions

Secteurs

eCommerce / Retail

Finance / Fintech

B2B SaaS

Méthodologies

Scrum

Kanban

SAFe

Lean

Page 2

Parcours complet (3)

Head of Product

2022 - 2026

RetailTech SA

Ownership de la roadmap cross-plateformes. 3 refontes majeures en 4 ans.

Product Owner

2019 - 2022

FinServ Group

Pilotage backlog paiements B2B. 0 a 500k transactions/mois.

Chef de projet digital

2016 - 2019

Agence Conseil

8 clients grands comptes e-commerce. Budget 300k EUR moyen.

Certifications

SAFe PO/PM v6

Capgemini / Gladwell Academy

Planifie Septembre 2026

Prise de parole en public

Staffff.fr

2023

ContentSquare Find & Fix

ContentSquare Academy · + Certified

2022

Management 3.0

Rhapsodies Conseil

2021

PSPO I

Scrum.org

2017

Formations

Master Grande Ecole

NEOMA Business School

2014

DUT Techniques de Commercialisation

Universite Cote d'Azur

2008

Aperçu du contenu. La mise en page finale est disponible dans le fichier PowerPoint.

Carte Expérience

components/ui/experience-card.tsx

survol ou clic pour passer en mode Over · clic sur le nom = lien externe

Head of Product

4 ans2022-2026

RetailTech SA

Ownership de la roadmap cross-plateformes (web, mobile, API) sur un périmètre de 3 squads agiles.

Product Owner - Paiements B2B

3 ans2019-2022

FinServ Group

Pilotage du backlog paiements B2B dans un contexte de forte croissance (0 a 500k transactions/mois).

Timeline Expériences

components/ui/experience-timeline.tsx

ligne verticale · dot lumineux par annee · annee dedupliquee · whileInView

2022

Head of Product

4 ans2022-2026

RetailTech SA

Ownership de la roadmap cross-plateformes (web, mobile, API) sur un périmètre de 3 squads agiles.

2019

Product Owner - Paiements B2B

3 ans2019-2022

FinServ Group

Pilotage du backlog paiements B2B dans un contexte de forte croissance (0 a 500k transactions/mois).

Breadcrumb

components/ui/breadcrumb.tsx

dark

light

Boutons

Badges

statut Général

DisponibleEn coursBientot disponible✓ LivreIndisponible

tag page indisponible (get-in-touch.tsx)

Indisponible← overlay sur la card, prop unavailable:true

anciennete publication (offer-card)

< 1h3h1 jour5 jours

localisation (offer-card)

Paris / Remote

type contrat (offer-card)

CDIFree

score global (offer-card)

87/100Bonscore ≥ 70

62/100Moyenscore 50-69

38/100Faiblescore < 50

Coach anglais / Morgan

Avatar & états vocaux

components/english-coach/english-coach-client.tsx

Morgan

Idle

Listening

Processing

Speaking

Modes de session (2)

components/english-coach/english-coach-client.tsx

💬

Conversation libre

Lancez un sujet de votre choix

🎯

Job interview

Preparation entretien PO/PM

La zone de conversation s'ouvre inline sous les cartes de choix, sans changement de page.

Bulles de conversation

components/english-coach/english-coach-client.tsx

Pret a pratiquer ? Quel exercice aujourd'hui ?

Simulons un entretien PM.

Waveform & micro

components/english-coach/english-coach-client.tsx

Score de session

components/english-coach/english-coach-client.tsx

9/10Fluency

7/10Vocabulary

6/10Grammar

4/10Pronunciation

Pictos

Concus sur mesure

CV OnlineMaison

DesignMaison

Job HunterMaison

ArchitectureMaison

Lead GenMaison

English CoachMaison

Assistant CVMaison

Icones de marque

LinkedInMarque

Regle : les pictos "Maison" utilisent exclusivement fill="currentColor" avec des formes geometriques (rect, circle) et des variations d'opacite. Aucun stroke. Les pictos "Marque" respectent les guidelines officielles de chaque plateforme.

Interactions

Mode admin - reordonner les cartes

components/ui/get-in-touch.tsx

Declenchement

Bouton visible uniquement si session active (next-auth)
Position : au-dessus de la grille, aligne a droite
Icone 6 points (drag handle) + label Organiser / Terminer
Bordure orange #e8622a quand actif

Comportement drag

Pointer Events (mouse + touch, cross-device)
Carte soulevee : scale 1.06, opacity 0.6, z-index 20
Reordonnancement : swap sur pointerenter de la cible
Framer Motion layout='position' + spring 400/35/0.8

Animation wiggle

CSS @keyframes admin-wiggle : rotate -1.5deg -> +1.5deg
0.25s alternate infinite ease-in-out
Decalage par index : delay = index x 30ms (effet vague)
Applique sur le wrapper interne, pas sur motion.div

Persistance

localStorage : clé gbe-home-card-order-v1
Sauvegarde a la fin du drag (pointerup)
Validation : taille + presence de tous les noms
Cursor grabbing + userSelect none pendant le drag

Organiser

État actif du bouton admin. Visible uniquement quand connecte.

Principes

Lisibilite avant tout

Contraste WCAG 2.1 AA minimum (4.5:1 texte courant, 3:1 grand texte). Texte secondaire sur fond sombre : opacite 0.55 minimum. Taille corps : 16px+. Hiérarchie evidente sans effort de lecture.

Un accent, jamais deux

L'orange #e8622a est unique. Il ne se dilue pas en variantes approximatives ni en degrades succèssifs.

Mouvement avec sens

L'animation accompagne l'action, elle ne la précède pas. Chaque transition existe pour une raison fonctionnelle. Toutes les animations respectent prefers-reduced-motion.

Cohérence systémique

Chaque decision de design vaut pour tous les contextes. Un composant resout tous ses cas d'usage ou est refactorise.

Accessibilité native

RGAA 4.1 / WCAG 2.1 AA sur toutes les pages. Navigation clavier complète, ARIA sémantique (tablist, progressbar, dialog, live regions), skip link, landmarks. L'accessibilité est une contrainte de conception, pas un ajout a postériori.

Confidentialité par defaut

Mesure d'audience via Plausible Analytics (exemption CNIL, sans cookie). Aucun PII collecte. Abstraction lib/analytics.ts. Opt-out via localStorage sur /privacy. Separation dev/prod par variable d'environnement.

Guillaume Berenger · Design System v1.0 · 2026

← Retour au site

Responsive

Mobile-first. Toutes les pages ciblent iOS Safari + Chrome Android en priorite (390px), puis s'enrichissent pour tablette (640px+) et desktop (1024px+).

Breakpoints Tailwind

tailwind.config.ts

Cible	Largeur	Prefixe	Changements clés
Mobile	< 640px	`(default)`	1 colonne, hamburger drawer, champs empiles, padding px-4 py-8
Tablet	640px - 1023px	`sm:`	2 colonnes, champs cote a cote, px-6, type scale +1 cran
Desktop	>= 1024px	`lg:`	3 colonnes, nav horizontale, sidebar DS, px-14, py-12, titres full scale

Touch targets (WCAG 2.5.5)

min-h-[44px] / minHeight: 44

44px

Minimum 44x44px sur tous les elements interactifs. La zone de tap peut depasser la taille visuelle.

Corrections appliquees (2026)

offer-card.tsx

Postuler / Ignorer

+ min-h-[44px]

apply-tab.tsx

OfferListItem

+ min-h-[44px]

apply-tab.tsx

CTA Générer CV

+ min-h-[44px]

english-coach-client

Boutons back / End

padding -> 12px

english-coach-client

SessionCard button

+ minHeight: 44

header.tsx

Drawer nav items

py-3.5 + min-h-[44px]

Grilles adaptatives

grid-cols-1 sm:grid-cols-2 md:grid-cols-3

Mobile

grid-cols-1

Tablet (sm:)

sm:grid-cols-2

Desktop (md:)

CVArchiJobDS

md:grid-cols-3

Typographie adaptative

text-2xl sm:text-4xl lg:text-7xl

Element	Mobile	Tablet (sm:)	Desktop (lg:)
Hero H1 (landing)	text-2xl (1.5rem)	text-4xl (2.25rem)	text-7xl (4.5rem)
H1 Job Hunter / English Coach	text-2xl	text-4xl	text-6xl (3.75rem)
Stats CV-online	text-xl (1.25rem)	text-2xl	text-2xl
Corps de texte	text-sm (0.875rem)	text-sm	text-sm / text-base

Comportements par composant

components/*

Header / Navigationcomponents/header.tsx

Mobile

Hamburger 44x44px, drawer plein largeur, fermeture par tap exterieur ou navigation

Tablet (sm:)

Identique mobile (pivot a md: 768px)

Desktop (md:/lg:)

Barre horizontale, tous les liens visibles, lang toggle, auth button inline

Cards CTA (accueil)components/ui/get-in-touch.tsx

Mobile

1 colonne, gap-3, padding px-4

Tablet (sm:)

sm:grid-cols-2, sm:gap-5

Desktop (md:/lg:)

md:grid-cols-3, md:gap-6

Offer Card - CTAs & scorecomponents/job-hunter/offer-card.tsx

Mobile

Score labels w-14, points en 1 col, CTAs min-h-[44px]

Tablet (sm:)

Score labels sm:w-24

Desktop (md:/lg:)

sm:grid-cols-2 pour points forts / vigilance

Apply Tabcomponents/job-hunter/apply-tab.tsx

Mobile

Liste + detail empiles, OfferListItem min-h-[44px], scrollIntoView

Tablet (sm:)

Identique mobile

Desktop (md:/lg:)

md:flex-row - liste w-72 gauche, detail scrollable droite

English Coach - controlscomponents/english-coach/english-coach-client.tsx

Mobile

Bottom bar fixed, safe-area-inset-bottom, waveform 5 barres, boutons min-h-[44px]

Tablet (sm:)

Identique mobile

Desktop (md:/lg:)

waveform 9 barres (window.innerWidth > 390)

CV Onlineapp/CV-online/page.tsx

Mobile

px-5, stats grid-cols-3 gap-3, titres text-2xl

Tablet (sm:)

sm:px-6, sm:gap-4, sm:text-3xl

Desktop (md:/lg:)

max-w-2xl centre, Expérience list py-5

Footercomponents/footer.tsx

Mobile

flex-col, liens empiles

Tablet (sm:)

md:flex-row, liens en ligne

Desktop (md:/lg:)

md:flex-row, max-w-5xl centre, justify-between

iOS Safari : safe area & DVH

app/layout.tsx + app/globals.css

Dynamic Viewport Height

100vh inclut l'adress bar iOS. dvh = hauteur reelle visible. Applique via @supports dans globals.css.

@supports (min-height: 100dvh) {
  .min-h-screen {
    min-height: 100dvh;
  }
}

Safe area insets

La bottom bar du Coach est fixed. Transcript et barre incluent tous deux env(safe-area-inset-bottom).

/* bottom bar */
paddingBottom: calc(
  26px + env(safe-area-inset-bottom, 0px))

/* transcript */
paddingBottom: calc(
  160px + env(safe-area-inset-bottom, 0px))

viewport-fit: cover

Requis pour que env(safe-area-inset-*) soit non nul. Configure via Next.js Viewport export.

// app/layout.tsx
export const viewport: Viewport = {
  viewportFit: 'cover',
}

touch-action

Supprime le 300ms tap delay iOS sur tous les elements interactifs. Range inputs : touch-action: none pour eviter le scroll parasite.

/* globals.css */
button, a, [role="button"] {
  touch-action: manipulation;
}
input[type="range"] {
  touch-action: none;
}

Scroll interne : overscroll-behavior

components/english-coach/english-coach-client.tsx

/* English Coach - transcript */
overscrollBehaviorY: 'contain'

Les zones de scroll interne (transcript de session) utilisent overscroll-behavior-y: contain pour empecher le pull-to-refresh iOS de s'activer pendant l'utilisation.

Composants juridiques

Composants d'information contextuelle sur les traitements de données et les mentions légales. Utilises sur toutes les pages impliquant un envoi de données a un tiers.

DataProcessingNotice

components/ui/data-processing-notice.tsx

Votre offre, profil et CV sont analyses par un fournisseur IA. Les sessions et versions de CV sont archivées dans Vercel Blob. En savoir plus

Votre audio est transmis pour transcription (Groq ou OpenAI). L'audio brut n'est pas archive. La transcription et le resume de session sont conserves. En savoir plus

Votre cas peut être envoyé a plusieurs fournisseurs IA (Claude, Gemini, Mistral, Groq). Les cas et réponses sont archives. N'incluez pas de données sensibles superflues. En savoir plus

Props : variant ('cv' | 'audio' | 'council'), privacySection (ancre href vers /privacy), className.

AudienceDisclosureBanner

components/audience-disclosure-banner.tsx

Ce site utilise une mesure d'audience sans cookie publicitaire. Les outils prives traitent les données nécessaires a leur fonctionnement. En savoir plus

Bandeau discret en bas de la home page. Sans props. Lien vers /privacy.

Navigation

Header mega-menu a 4 groupes. Les groupes cliquables (Job Search, Expertise) naviguent vers leur page principale. Les groupes non-cliquables (Assistant IA, Studio) ouvrent uniquement le panneau. Sur mobile : accordeon. Fermeture : survol externe, Escape, changement de route.

G.B

Job Search

Assistant IA

Studio

Expertise

Job HunterAuth

Recherche d'offres IA multi-sources

Assistant CVAuth

Generation CV PPTX par IA

Groupe	Cliquable	Destination parent	Sous-items
Job Search	Oui	/job-hunter	Job Hunter, Assistant CV
Assistant IA	Non	-	English Coach, Lead Gen
Studio	Non	-	Architecture, Design System
Expertise	Oui	/Offre	Offre, Profil

Fichier : components/header.tsx. Props : aucune (lit session, lang, pathname). Hover delay close : 150ms. Animation : Framer Motion (opacity + translateY -6px, 140ms easeOut).

Les fondations demon identite visuelle

Couleurs

Textes secondaires sur fond sombre

Typographie

Composants

Heros de page

Effet neon anime

Rising Lights

Cards CTA

LinkedIn

CV Online

Design System

Carte offre d'emploi

Product Owner Senior

Product Manager Freelance

Liste de candidatures

Vue CV généré (CVView)

Product Owner Senior - eCommerce & Digital

Carte Expérience

Head of Product

Product Owner - Paiements B2B

Timeline Expériences

Head of Product

Product Owner - Paiements B2B

Breadcrumb

Boutons

Badges

Coach anglais / Morgan

Avatar & états vocaux

Modes de session (2)

Bulles de conversation

Waveform & micro

Score de session

Pictos

Interactions

Declenchement

Comportement drag

Animation wiggle

Persistance

Principes

Lisibilite avant tout

Un accent, jamais deux

Mouvement avec sens

Cohérence systémique

Accessibilité native

Confidentialité par defaut

Responsive

Breakpoints Tailwind

Touch targets (WCAG 2.5.5)

Grilles adaptatives

Typographie adaptative

Comportements par composant

iOS Safari : safe area & DVH

Scroll interne : overscroll-behavior

Composants juridiques

DataProcessingNotice

AudienceDisclosureBanner

Navigation

Les fondations de
mon identite visuelle