Fondations
Typographie
Les trois polices
Hiérarchie stricte : Display pour les titres, Body pour le texte courant, Accent pour les labels et éléments UI. Les polices brand (Minion, Neue Haas Grotesk) sont utilisées en print et dans les assets graphiques. En web, utiliser les substituts listés ci-dessous.
01 — Display
Titres, affiches, grandes visuels
Brand: Minion variable concept bold
Web: Playfair Display 700 → Georgia
font-display
Maisons Clothes
Vêtements sur mesure
02 — Body
Texte courant, descriptions, contenu éditorial
Brand: Neue Haas Grotesk Display Pro
Web: Inter → Helvetica Neue
font-body
Designed to reflect your brand. Maisons Clothes vous accompagne dans la personnalisation de vos vêtements et objets promotionnels.
Version medium — pour les labels importants dans le body.
03 — Accent
Sous-titres, labels, CTAs, texte UI court
Brand: Space Grotesk Bold (officiel)
Web: Space Grotesk → Gill Sans
font-accent font-bold
LOREM IPSUM DOLOR SIT
NAVIGATION · LABELS · BUTTONS
Échelle typographique
Classes Tailwind à utiliser systématiquement. Ne pas inventer de tailles intermédiaires.
Page title
Commandes
font-display text-3xl
Section h2
Liste des commandes
font-accent font-bold text-xl
Section h3
Détails commande
font-accent font-bold text-base
Table header
N° COMMANDE
font-accent font-bold text-xs uppercase tracking-wider
Body lg
Texte courant principal
font-body text-base
Body
Texte courant interface
font-body text-sm
Caption
Aide contextuelle, meta
font-body text-xs text-gray-500
Label/Badge
EN ATTENTE
font-accent font-bold text-xs
Règles d'usage
✓ font-display uniquement pour les h1 de page et les héros publics
✓ font-accent font-bold pour tous les boutons, labels de formulaires, entêtes de colonnes, nav items
✓ font-body pour tout le texte courant, descriptions, contenu éditorial
✗ Ne jamais utiliser font-display dans les apps internes (trop éditorial)
✗ Ne jamais mélanger les familles dans un même bloc de texte
✗ Ne pas créer de tailles custom hors de l'échelle Tailwind