Typographie
Deux polices
| Police | Rôle | Pourquoi |
|---|---|---|
| Inter | Tout le texte : titres, paragraphes, boutons, chiffres | Conçue pour les écrans, très lisible en petite taille, chiffres réguliers pour les heures |
| Share Tech Mono | La navigation du site web et les initiales des avatars | Une touche « horloge numérique » qui rappelle le pointage |
Les deux sont gratuites (Google Fonts).
Les styles du design system
Définis comme variables dans Figma :
| Style | Police | Graisse | Taille / interligne | Usage |
|---|---|---|---|---|
Logo | Inter | Bold 700 | 20 / 28 | Le nom « TimeManager » |
Nav | Share Tech Mono | Regular 400 | 16 / 24 | Les liens de la barre de navigation web |
Nav small | Share Tech Mono | Regular 400 | 12 / 16 | Le nom de l'utilisateur dans la barre |
Label | Inter | Semi Bold 600 | 14 / 20 | Les statuts, les libellés |
Les graisses d'Inter utilisées
| Graisse | Exemples |
|---|---|
| Light 300 | L'heure en très grand sur l'écran de pointage mobile (76 px) |
| Regular 400 | Texte courant |
| Medium 500 | Libellés des onglets, valeurs importantes |
| Semi Bold 600 | Titres de barre, statuts |
| Bold 700 | Logo, grands titres, chiffres clés |
Dans le code
| Projet | Où |
|---|---|
| Web | timemanager-web/src/assets/main.css : --font-sans, --font-logo, --font-nav |
| Mobile | timemanager-mobile/src/theme/typography.ts, chargées par @expo-google-fonts/inter et @expo-google-fonts/share-tech-mono |