Design System MomentsCollectifs v2

Design system unifie pour tous les projets MomentsCollectifs, inspire de VidDay.

Philosophie

Le design system v2 adopte une approche professionnelle et apaisante :

• Bleu confiance comme couleur primaire (au lieu du violet flashy)
• Palette de couleurs moins saturee et plus chaleureuse
• Style "premium emotionnel" plutot que "startup tech"
• Boutons arrondis (pills) style VidDay
• Ombres subtiles et bordures legeres

Palette de couleurs

Primary - Bleu confiance

La couleur principale pour les CTA et elements interactifs.

Niveau	Hex	Usage
50	#EFF6FF	Backgrounds legers
100	#DBEAFE	Hover states
200	#BFDBFE	Borders
300	#93C5FD	Icons secondaires
400	#60A5FA	Links hover
500	#3B82F6	Info states
600	#2563EB	Primary (main)
700	#1D4ED8	Hover
800	#1E40AF	Active
900	#1E3A8A	Dark variant

Accent - Corail doux

Pour les badges evenements, alertes et elements d'attention.

Niveau	Hex	Usage
50	#FFF5F5	Backgrounds
100	#FFE4E4	Hover states
500	#F56565	Accent (main)
600	#E53E3E	Hover
700	#C53030	Active

Secondary - Violet doux

Utilise avec parcimonie pour les gradients et elements decoratifs.

Niveau	Hex	Usage
100	#F3E8FF	Backgrounds
500	#A855F7	Secondary (main)
600	#9333EA	Hover
700	#7C3AED	Active

Teal - Accents positifs

Pour les etats de succes et elements positifs.

Niveau	Hex	Usage
100	#CCFBF1	Success backgrounds
300	#5EEAD4	Success light
500	#14B8A6	Success (main)
600	#0D9488	Hover

Neutral - Gris bleutes

Pour le texte, bordures et surfaces.

Niveau	Hex	Usage
50	#F8FAFC	Surface light
100	#F1F5F9	Surface gray
200	#E2E8F0	Borders
300	#CBD5E1	Borders dark
400	#94A3B8	Text muted
500	#64748B	Text secondary
600	#475569	Text secondary dark
700	#334155	Text primary light
800	#1E293B	Text primary
900	#0F172A	Text/backgrounds dark

Surfaces

Surface	Hex	Usage
White	#FFFFFF	Cards, modals
Light	#F8FAFC	Page backgrounds
Gray	#F1F5F9	Section backgrounds

Hero Gradient

background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);

Typographie

Fonts

• Sans-serif: Source Sans 3
• Handwritten: Caveat (pour les accents emotionnels)

Tailles

/* Headings */
h1: clamp(32px, 5vw, 56px) - font-weight: 800
h2: clamp(28px, 4vw, 40px) - font-weight: 800
h3: clamp(22px, 3vw, 28px) - font-weight: 700
h4: clamp(18px, 2vw, 22px) - font-weight: 600

/* Body */
body: 16px - line-height: 1.6
small: 14px
xs: 12px

Espacements

Le systeme utilise une echelle de 4px :

• 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px

Border Radius

Token	Valeur	Usage
sm	6px	Inputs, petits elements
md	8px	Cards secondaires
lg	12px	Cards, modals
xl	16px	Grandes cards
2xl	24px	Hero sections
full	9999px	Boutons pills, badges

Ombres

--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

Composants

Boutons

Style pill (border-radius: full) comme VidDay.

<!-- Primary -->
<button class="btn btn-primary">Commencer</button>

<!-- Secondary -->
<button class="btn btn-secondary">En savoir plus</button>

<!-- Ghost -->
<button class="btn btn-ghost">Annuler</button>

<!-- Accent -->
<button class="btn btn-accent">Action importante</button>

Cards

<div class="card">
  <div class="card-image">
    <span class="card-badge">Anniversaire</span>
    <img src="..." alt="...">
  </div>
  <div class="card-content">
    <div class="card-meta">12 participants</div>
    <h3>Titre</h3>
    <p>Description...</p>
    <a href="#" class="card-link">Voir plus →</a>
  </div>
</div>

Badges

<!-- Primary (bleu) -->
<span class="badge">Depart</span>

<!-- Accent (corail) -->
<span class="badge accent">Anniversaire</span>

<!-- Teal -->
<span class="badge teal">Mariage</span>

Implementation

Frontend Angular (Tailwind + DaisyUI)

Le fichier tailwind.config.js contient toute la configuration.

// Utilisation
<button class="btn btn-primary">...</button>
<div class="bg-primary-600 text-white">...</div>
<p class="text-neutral-600">...</p>

Blog WordPress

Le fichier style.css du theme contient les CSS variables.

/* Utilisation */
.element {
  background: var(--primary-600);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

Migration depuis v1

Changements majeurs

v1 (ancien)	v2 (nouveau)
#A855F7 (violet) primary	#2563EB (bleu) primary
#FF6B6B (coral vif)	#F56565 (corail doux)
#84CC16 (lime) accent	#14B8A6 (teal) success
Gradients animés	Couleurs solides
#FEF7F0 (crème) background	#F8FAFC (gris clair)
Border-radius: 20px+	Border-radius: pills (full)

Classes a mettre a jour

/* Avant */
.bg-brand-500 → .bg-primary-600
.text-coral-500 → .text-accent-500
.bg-sage-500 → .bg-teal-500
.bg-surface-100 → .bg-neutral-50

Fichiers de reference

• Preview HTML: /design-system-preview.html
• Tailwind config: /front-momentscollectifs/tailwind.config.js
• WordPress theme: /blog-momentscollectifs/theme/momentscollectifs-theme/style.css