Design System — Nicolas Bernard

01

Identité visuelle

Tous les assets visuels du portfolio : photo de profil, icônes illustratives, logos de projets et outils. Format mix-blend-mode: multiply sur fond blanc pour un rendu cohérent.

Photo de profil — avatar.png

96px · Hero

52px · About

40px · Nav

28px · Min

Fichier	assets/avatar.png
Forme	border-radius: 50%
Ring	0 0 0 1px var(--border)
object-fit	cover

Icônes illustratives — assets/icons/

Analyseicons/analyse.png

Bonne analyseicons/bonne_analyse.png

CRMicons/crm.png

Dataicons/data.png

E-commerceicons/ecommerce.png

Idéeicons/idee.png

Parcoursicons/parcours.png

Profilicons/profil.png

Projeticons/projet.png

Rapporticons/rapport.png

Réflexionicons/reflexion.png

Socialicons/social.png

Topicons/top.png

Travailicons/travail.png

Travail caféicons/travail_cafe.png

Taille	52px × 52px	Dans les highlight items
mix-blend-mode	multiply	Supprime le fond blanc sur --bg
opacity	0.85	Intégration douce
object-fit	contain	Conserve les proportions

Logos de projets

Hivizoassets/projets/hivizo/logo-hivizo.png

Assistomationassets/projets/assistomation/assistomation-logo.png

Logos outils — assets/tools/

Notion

Figma

Make

ChatGPT

Claude

HubSpot

GA4

Looker

Power BI

Salesforce

Jira

Asana

Monday

Slack

n8n

WordPress

Magento

Brevo

Customer.io

Splio

Canva

Adobe

Tableau

Perplexity

Umami

Google Ads

Trello

Openclaw

Taille	36px × 36px	Section Outils du portfolio
Fallback	.tool-icon-text	Initiales via data-initials si image 404
Hover	background: var(--border)	Sur .tool-item

02

Couleurs

Palette neutre inspirée de Notion. Un seul accent bleu pour les interactions. Trois niveaux de gris pour la hiérarchie textuelle.

Texte

--text#191919Titres, texte principal, bouton primaire, nav active

--text-muted#787774Corps secondaire, descriptions, nav links

--text-light#b0aca6Dates, numéros carte, labels, métadonnées

--accent#2383e2CTA case study, badges, dots compétences, liens actifs

Surfaces

--accent-light#eef4fdFond badge accent, hover CTA card

--bg / --bg-card#ffffffSurface principale, cards, nav pill

--bg-alt#f9f9f8Sections alternées, skills-tags, hover états

--border#ebebeaSéparateurs, bordures cards, ligne timeline

Dégradé hero

linear-gradient(135deg,
#2383e2 → #60a5fa)

Texte dégradé hero

Tokens CSS

:root { /* Texte */ --text: #191919; /* principal */ --text-muted: #787774; /* secondaire */ --text-light: #b0aca6; /* meta / labels */ /* Accent */ --accent: #2383e2; --accent-light: #eef4fd; /* Surfaces */ --bg: #ffffff; --bg-alt: #f9f9f8; --bg-card: #ffffff; --border: #ebebea; /* Misc */ --radius: 10px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow: 0 4px 16px rgba(0,0,0,.07); --font: 'Inter', system-ui, sans-serif; }

03

Typography

Police unique Inter sur tout le portfolio. Échelle de .58rem à clamp(2.2rem, 4rem). Letter-spacing négatif sur les titres pour densifier visuellement.

Nicolas Bernard

hero-titleclamp(2.2–4rem) · 800 · −.04em · lh 1.1

Projets récents

section-title1.6rem · 700 · −.03em

Hivizo

pcd-title (card)1.3rem · 700 · −.03em

Responsable Digital & Production

timeline-title.95rem · 600 · −.01em

Responsable Digital avec +8 ans d'expérience en transformation digitale, e-commerce, CRM et data.

body · about-text.93rem · 400 · muted · lh 1.8

Plateforme SaaS pour hôtels indépendants

tagline · secondary.82rem · 400 · muted · lh 1.5

À propos · Projets · Parcours

nav-link.78rem · 500 · muted

Next.js · Supabase · GPT-4o

pcd-tech · monospace.72rem · 'SF Mono' · light · +.02em

E-commerce

tag · badge.68rem · 600 · muted · radius 6px

Outils & stack technique

section-label · uppercase.68rem · 700 · light · +.1em · uppercase

Responsable Digital · Bordeaux

hero-headline.75rem · 500 · light · +.08em · uppercase

Nov. 2024 — Déc. 2025

timeline-period.73rem · 500 · light · +.03em

04

Espacement & Layout

Espacements contextuels de 4px à 100px. Container principal centré à 1000px. Grilles CSS adaptées à chaque section.

Containers

.container — max-width: 1000px · padding: 0 40px

.container-wide — max-width: 1200px · padding: 0 40px

.container-narrow — max-width: 560px · padding: 0 40px

projects · repeat(3, 1fr) · gap 16px

parcours · 1fr 300px · gap 64px

Espacements

Valeur

Usage

4–5px

gap tags, skills-tags

6–8px

gap pcd-bottom, pcd-footer

10–12px

gap XS, nav links, padding sm

16px

gap projets, hero-actions

18–20px

padding pcd-inner

24–28px

gap timeline, padding highlights

36px

hero-actions mb

48px

section-sub mb

56–64px

parcours grid gap

100px

section padding vertical

Border radius

4pxinputs

6pxtags · badges

8pxboutons

10px--radius · cards

16pxcase study dialog

999pxpill · nav · avatar

Ombres

--shadow-sm0 1px 2px (.06)
cards légères

--shadow0 4px 16px (.07)
nav logo

card :hover0 12px 36px (.09)
survol card

nav-pill0 2px 10px (.06)
pill flottant

05

Animations & Motion

Animations légères et non-intrusives. Entrée hero séquencée unique keyframe. Toutes les interactions utilisent des transitions CSS simples (.15s – .25s).

Hero enter

@keyframes hero-enter
opacity 0→1 · translateY(18px→0)
.6s · cubic-bezier(.22,.68,0,1.2)
delays: .05 / .2 / .35 / .5s

Scroll bounce (arrow)

↓

@keyframes scroll-bounce
translateY(0 → 6px → 0)
2s · ease-in-out · infinite

Fade-in on scroll

IntersectionObserver · threshold 0.06
adds class .visible
opacity 0→1 · translateY(20px→0)
transition: .5s ease · unobserve after

Card hover

transition: all .25s ease
translateY(-3px)
box-shadow ↑ · border accent

Button / Tag

CTA

transition: all .15s
btn: bg #191919 → #333
cta: accent-light → accent

Case study overlay

@keyframes cs-enter
opacity 0→1 · translateY(24px→0)
scale(.98→1) · .35s ease-out
trigger: .open class via JS

06

Navigation

Nav flottante composée de deux éléments indépendants (logo + pill). Position fixed, pointer-events none sur le conteneur pour laisser passer les clics sur la page.

NB

Élément	Style	Note
.nav	fixed · z-index 100 · pointer-events: none	Le conteneur laisse passer les clics
.nav-logo	40×40px · radius 999px · blur(16px)	pointer-events: auto
.nav-pill	rgba(255,255,255,.9) · blur(16px)	border: 1px rgba(0,0,0,.08)
link default	.78rem · 500 · muted · pad 6px 14px	radius 999px
link :hover	bg rgba(0,0,0,.05) · color var(--text)	transition .15s
link .active	bg var(--text) · color #fff	IntersectionObserver JS · -30%/-60% rootMargin

07

Buttons

Deux variantes : primary (fond noir) et ghost (bordure légère). Pas de bouton destructif — portfolio minimaliste.

Variantes

États

Default

Hover

Focus

Disabled

Spécifications

Propriété	Primary	Ghost
background	var(--text) #191919	var(--bg) #ffffff
color	#ffffff	var(--text-muted)
border	none	1px solid var(--border)
padding	9px 20px	9px 20px
border-radius	8px	8px
font-size / weight	.82rem · 500	.82rem · 500
transition	all .15s	all .15s
hover	bg #333333	border #ccc · color var(--text)

08

Tags & Badges

Trois types de labels : tag (neutre), timeline-badge (accent pill), pcd-cta (CTA interactif). Le tag est le composant le plus utilisé.

Tag — catégories

IACRME-commerceDataNo-codeSaaSAutomatisation

Badge accent — timeline

Projet entrepreneurial Freelance CDI

CTA card — états

Étude de cas →Default

→

Étude de cas →Hover (card survol)

Skills tags

Gestion de projet
E-commerce
CRM
Data analytics
SEO / SEA
Automatisation
No-code
IA générative
UX / Design
Shopify
Notion
SQL

Spécifications

Propriété	.tag	.timeline-badge	.pcd-cta
background	var(--bg-alt)	var(--accent-light)	var(--accent-light)
color	var(--text-muted)	var(--accent)	var(--accent)
border	1px var(--border)	1px rgba(accent,.18)	1px rgba(accent,.18)
border-radius	6px	999px	6px
padding	3px 9px	3px 10px	3px 10px
font-size / weight	.68rem · 600	.68rem · 600	.72rem · 600
hover	—	—	bg accent · color #fff

09

Cards

Trois types : project-card-v2 (standard + clickable), project-wip (dashed, désactivé), highlight-item (chiffres clés).

Project card · clickable (avec étude de cas)

IASaaS

01

Hivizo

Plateforme SaaS de gestion des avis clients pour hôtels indépendants.

CRMData

02

Customer Priority

Outil de scoring client pour prioriser les relances commerciales.

Project card · standard + WIP

No-codeIA

04

Assistomation

Automatisation de workflows métier avec IA et outils no-code.

🚧

Projet en cours

Bientôt disponible

Highlight items

8+Années d'exp.Transformation digitale
3Projets SaaSDéployés en prod
×4CA e-commerceCroissance 3 ans
50+Outils maîtrisésStack digitale complète

Spécifications

Propriété	Valeur	Note
height	220px	Fixe pour aligner la grille 3 colonnes
border-radius	var(--radius) 10px
border default	1px solid var(--border)	hover standard: #d1d0ce
border hover clickable	var(--accent) #2383e2	Différencie clickable vs standard
box-shadow	0 2px 8px rgba(0,0,0,.04)	hover: 0 12px 36px (.09)
transform hover	translateY(-3px)	transition: .25s ease
padding inner	18px 20px 20px	pcd-inner

10

Timeline

Composant central de la section Parcours. Ligne verticale en pseudo-élément ::before. Dot positionné à -4px pour s'aligner sur la ligne. État muted (opacity .4) pour les postes anciens.

Nov. 2024 — Déc. 2025 Projet entrepreneurial

Responsable Digital & Production Audiovisuelle

Lejos del cliché

Stratégie de contenu et pilotage réseaux sociaux
Production audiovisuelle et direction créative

2019 — 2024 CDI

Responsable E-commerce & Digital

Entreprise précédente

Croissance CA Shopify ×4 en 3 ans
Déploiement CRM et automatisation marketing

2016 — 2019

Chef de projet digital

Poste précédent — état muted (opacity .4)

Élément	Style	Note
.timeline::before	left 0 · width 1px · bg var(--border)	Ligne verticale pseudo-élément
.timeline-dot	9×9px · radius 50% · bg var(--text)	left: -4px pour centrer sur la ligne
.timeline-item	grid 1px + 1fr · gap 28px	padding-bottom 40px sauf dernier
.timeline-period	.73rem · 500 · text-light · +.03em
.timeline-badge	accent-light · pill · .68rem	Optionnel par poste
state muted	dot bg var(--border) · title+company opacity .4	Postes anciens / discrets

nicolas-bernard.comDesign System

Identité visuelle

Couleurs

Typography

Espacement & Layout

Animations & Motion

Navigation

Buttons

Tags & Badges

Cards

Hivizo

Customer Priority

Assistomation

Timeline

Responsable Digital & Production Audiovisuelle

Responsable E-commerce & Digital

Chef de projet digital

nicolas-bernard.com
Design System