76 lines
No EOL
1.7 KiB
Markdown
76 lines
No EOL
1.7 KiB
Markdown
# 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 |