Fondations

Typographie

Les trois polices

Hiérarchie stricte. Chaque police a un rôle unique — ne pas les intervertir. Les polices brand (Minion, Neue Haas Grotesk) sont réservées au print et aux assets graphiques.

Rôle	Police web	Police brand	Classe Tailwind	Usage
Display	Playfair Display 700	Minion variable concept bold	font-display	H1 de page publique, héros uniquement
Body	Inter	Neue Haas Grotesk Display Pro	font-body	Tout le texte courant, descriptions, données
Accent	Space Grotesk 700	Space Grotesk Bold (officiel)	font-accent font-bold	Boutons, labels, nav, entêtes de colonnes

font-display Playfair Display · fallback: Georgia

Maisons Clothes

Vêtements sur mesure depuis 1998

Collection Printemps-Été 2026

font-body Inter · fallback: Helvetica Neue

Texte large — text-xl

Texte courant principal. Maisons Clothes vous accompagne dans la personnalisation de vos vêtements et objets promotionnels. — text-base

Interface standard. Référence CMD-0241 créée le 12 mai 2026, en attente de validation client. — text-sm

Caption. Dernière modification il y a 3 heures par Jean Martin. — text-xs

font-accent font-bold Space Grotesk 700 · fallback: Gill Sans

Titre de section — text-xl

Sous-titre — text-base

ENTÊTE DE COLONNE — text-sm uppercase

LABEL DE CHAMP — text-xs uppercase

Échelle typographique

Classes à appliquer systématiquement. Ne jamais inventer de tailles intermédiaires ou utiliser de valeurs arbitraires.

Commandes client

font-accent font-bold text-2xl text-mc-navy

Liste des commandes

font-accent font-bold text-xl text-mc-navy

Détails de la commande

font-accent font-bold text-base text-mc-navy

Body

Texte courant dans les interfaces. Descriptions, labels de données, contenu éditorial court.

font-body text-sm text-mc-navy

Caption

Aide contextuelle, méta-données, timestamps

font-body text-xs text-base-content/50

Label

FOURNISSEUR

font-accent font-bold text-xs text-base-content/50 uppercase tracking-wider

Monospace

CMD-0241 · REF-MC-2026-00892

font-mono text-xs

<!-- h1 page (apps internes) -->
<h1 class="font-accent font-bold text-2xl text-mc-navy">Commandes client</h1>

<!-- h2 section -->
<h2 class="font-accent font-bold text-xl text-mc-navy">Liste des commandes</h2>

<!-- h3 sous-section -->
<h3 class="font-accent font-bold text-base text-mc-navy">Détails de la commande</h3>

<!-- Texte courant -->
<p class="font-body text-sm text-mc-navy">...</p>

<!-- Caption -->
<span class="font-body text-xs text-base-content/50">Dernière modif il y a 3h</span>

<!-- Label de champ -->
<label class="font-accent font-bold text-xs text-base-content/50 uppercase tracking-wider">Fournisseur</label>

<!-- Référence / code -->
<span class="font-mono text-xs">CMD-0241</span>

Font Display — Playfair Display

Police éditoriale réservée aux titres principaux sur les pages publiques. Jamais dans les apps internes.

text-3xl Maisons Clothes

text-2xl Vêtements sur mesure depuis 1998

text-xl Collection Printemps-Été 2026

text-lg Personnalisation & marquage textile

✓ H1 des pages publiques (minisites, site principal, webshop)

✓ Sections hero avec grande accroche éditoriale

✗ Jamais dans les apps Rails internes (prodspe, ERP, catalogue admin)

✗ Jamais pour du texte courant ou des labels UI

✗ Jamais en-dessous de text-lg

Font Body — Inter

Police principale pour tout le texte lisible. La plus utilisée dans les apps internes et les interfaces data.

text-xl Texte large — pour des introductions ou paragraphes hero

text-base Texte base — pour les descriptions longues et le contenu éditorial

text-sm Texte standard — la taille la plus utilisée dans les interfaces internes

text-xs Caption — aide contextuelle, timestamps, méta-données secondaires

✓ Tout le texte courant dans les apps, descriptions, données tabulaires

✓ Contenu éditorial dans les emails, notifications, messages

✗ Ne pas utiliser pour les boutons, labels ou entêtes de colonnes (utiliser font-accent)

Font Accent — Space Grotesk

Police UI pour tout ce qui commande une action ou structure l'interface. Toujours en bold.

Titres Commandes client

Nav items

Boutons

Table header

N° COMMANDE CLIENT STATUT MONTANT

Labels

Fournisseur

✓ Tous les boutons, labels de formulaires, entêtes de colonnes, items de navigation

✓ Toujours utiliser font-bold avec font-accent

✓ Pour les entêtes de colonnes et labels de section : uppercase + tracking-wider

✗ Ne jamais utiliser font-accent pour du texte courant long

✗ Ne jamais utiliser sans font-bold

Dans les apps internes, les titres de page (h1) utilisent également font-accent font-bold — font-display est réservé aux pages publiques uniquement.

<h1 class="font-accent font-bold text-2xl text-mc-navy">Catalogue</h1>

Règles globales

✓ font-display uniquement pour les h1 publics et les héros de minisites

✓ font-accent font-bold pour tous les éléments UI : boutons, labels, nav, th

✓ font-body pour tout le texte courant, descriptions, contenu éditorial

✓ font-mono pour les références, SKUs, codes, valeurs techniques

✗ font-display jamais dans les apps Rails internes — trop éditorial

✗ Ne jamais mélanger deux familles dans un même bloc de texte

✗ Ne jamais créer de tailles custom hors de l'échelle Tailwind

✗ font-accent sans font-bold est interdit