job/design-system.md

Design System - Plateforme d'Emploi

Principes Fondamentaux

• Minimalisme et simplicité
• Espace blanc généreux
• Typographie claire et lisible
• Hiérarchie visuelle forte
• Animations subtiles et fluides

Palette de Couleurs

• Primaire :
  • Bleu Apple (#007AFF)
  • Blanc (#FFFFFF)
  • Noir (#000000)
• Secondaire :
  • Gris clair (#F5F5F7)
  • Gris moyen (#86868B)
  • Gris foncé (#1D1D1F)
• Accents :
  • Vert (#34C759) - pour les actions positives
  • Rouge (#FF3B30) - pour les alertes/erreurs

Typographie

• Titres : SF Pro Display
  • H1: 48px, 600
  • H2: 36px, 600
  • H3: 24px, 600
• Corps : SF Pro Text
  • Paragraphe: 16px, 400
  • Petit texte: 14px, 400
  • Légendes: 12px, 400

Espacement

• Base : 8px
• Petit : 4px
• Moyen : 16px
• Grand : 24px
• Très grand : 32px

Composants Clés

Boutons

• Primaire : Fond bleu, texte blanc, coins arrondis (8px)
• Secondaire : Fond transparent, bordure bleue, texte bleu
• Tertiaire : Texte bleu uniquement

Cartes

• Ombre légère
• Coins arrondis (12px)
• Espacement intérieur généreux
• Transitions fluides au survol

Formulaires

• Champs avec bordures subtiles
• Labels flottants
• États de focus et d'erreur clairs
• Boutons d'action bien visibles

Navigation

• Barre de navigation fixe en haut
• Menu latéral pour les sections principales
• Indicateurs d'état clairs

Animations

• Transitions douces (0.3s)
• Effets de survol subtils
• Animations de chargement minimalistes
• Transitions de page fluides

Responsive Design

• Breakpoints :
  • Mobile : < 768px
  • Tablet : 768px - 1024px
  • Desktop : > 1024px
• Adaptation fluide des composants
• Hiérarchie visuelle maintenue sur tous les écrans