v1.0
đź“– Index de Navigation
Tailles de Titres Classes Composées Tailles de texte utilitaires Familles de Polices Poids de Police Couleurs de Texte Espacement des lettres Hauteur de ligne Alignement du texte Transformation du texte Décoration du texte Styles de liens Combinaisons Notes d'utilisation

UI Kit - Système Typographique Travelski

Tailles de Titres Modulaires

Classes de Tailles Modulaires

Titre XL (32px)

Titre LG (28px)

Titre MD (24px)

Titre SM (22px)

Titre XS (20px)
Sous-titre LG (18px)

Sous-titre MD (16px)

Sous-titre SM (14px)

<!-- Combinaison de classes modulaires --> <h1 class="title-xl font-primary weight-bold text-primary">Titre XL</h1> <h2 class="title-lg font-primary weight-bold text-primary">Titre LG</h2> <h3 class="title-md font-primary weight-semibold text-primary">Titre MD</h3>

Classes Composées Prêtes à l'Emploi

Classes Simples

Titre de Page

Sous-titre de Page

Titre de Section

Sous-titre de Section

Titre de Carte
Titre de Modal
<!-- Classes prĂŞtes Ă  l'emploi --> <h1 class="page-title">Titre de Page</h1> <h2 class="page-subtitle">Sous-titre de Page</h2> <h3 class="section-title">Titre de Section</h3>

Tailles de texte utilitaires

Extra Small Ă  Large
Texte XS (12px) - légendes et annotations
Texte SM (14px) - informations secondaires
Texte Base (16px) - contenu principal
Texte LG (18px) - éléments importants
Texte XL (20px) - sous-titres
<!-- Classes utilitaires de taille --> <span class="text-xs">Texte XS</span> <span class="text-base">Texte Base</span> <span class="text-xl">Texte XL</span>
2XL Ă  6XL (24px - 40px)
Texte 2XL (24px)
Texte 3XL (28px)
Texte 4XL (32px)
Texte 5XL (36px)
Texte 6XL (40px)
<!-- Tailles de titres --> <div class="text-2xl">Texte 2XL</div> <div class="text-4xl">Texte 4XL</div> <div class="text-6xl">Texte 6XL</div>

Familles de Polices

Classes de Police

Police Primaire (Cy) - Titres

Police Secondaire (Roboto) - Corps

Police Système - Fallback

<!-- Familles de polices --> <p class="font-primary">Police Cy</p> <p class="font-secondary">Police Roboto</p> <p class="font-system">Police Système</p>

Poids de police

Classes modulaires

Light (300)

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

Extra Bold (800)

<!-- Classes modulaires de poids --> <p class="weight-light">Light</p> <p class="weight-bold">Bold</p>
Classes utilitaires
Texte léger (font-light)
Texte normal (font-normal)
Texte medium (font-medium)
Texte semi-gras (font-semibold)
Texte gras (font-bold)
Extra gras (font-extrabold)
Black (font-black)
<!-- Classes utilitaires de poids --> <span class="font-light">LĂ©ger</span> <span class="font-bold">Gras</span> <span class="font-black">Black</span>

Couleurs de Texte

Classes de Couleur

Texte Primaire (#0D141B)

Texte Secondaire (#6c757d)

Texte Atténué (#9ca3af)

Texte Clair (#d1d5db)

Texte Blanc (#ffffff)

<!-- Couleurs de texte --> <p class="text-primary">Texte Primaire</p> <p class="text-secondary">Texte Secondaire</p> <p class="text-white">Texte Blanc</p>

Espacement des lettres

Variantes d'espacement
Espacement serré (-0.02em)
Espacement normal (0)
Espacement large (0.02em)
<!-- Espacement des lettres --> <span class="tracking-tight">Serré</span> <span class="tracking-normal">Normal</span> <span class="tracking-wide">Large</span>

Hauteur de ligne

Variantes de hauteur

Tight (1.2): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Normal (1.4): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Relaxed (1.6): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Loose (1.8): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<!-- Hauteur de ligne --> <p class="leading-tight">Serré</p> <p class="leading-normal">Normal</p> <p class="leading-relaxed">Détendu</p>

Alignement du texte

Alignements disponibles
Texte aligné à gauche
Texte centré
Texte aligné à droite
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- Alignements de texte --> <div class="text-left">Gauche</div> <div class="text-center">Centre</div> <div class="text-right">Droite</div>

Transformation du texte

Transformations disponibles
texte en majuscules
TEXTE EN MINUSCULES
première lettre en majuscule de chaque mot
Texte Normal Sans Transformation
<!-- Transformations de texte --> <div class="uppercase">majuscules</div> <div class="lowercase">minuscules</div> <div class="capitalize">capitalisé</div>

DĂ©coration du texte

DĂ©corations disponibles
Texte souligné
Texte barré
Texte sans décoration
<!-- Décorations de texte --> <span class="underline">Souligné</span> <span class="line-through">Barré</span> <span class="no-underline">Sans décoration</span>

Styles de liens

Lien simple
Lien standard
<!-- Lien simple --> <a href="#" class="link"> Lien standard </a>
Lien avec icĂ´ne
Consulter mes documents Flèche
<!-- Lien avec icône --> <a href="#" class="link-icon"> <span>Consulter mes documents</span> <img src="../icons/navigation/forward.svg" alt="Flèche"> </a>
Couleurs de liens
Lien bleu principal
Lien vert secondaire
Lien noir
<!-- Couleurs de liens --> <a class="link link-primary">Bleu</a> <a class="link link-secondary">Vert</a> <a class="link link-dark">Noir</a>

Exemples de combinaisons

Approche modulaire

Titre Principal avec Classes Modulaires

Sous-titre avec Police Secondaire

Paragraphe explicatif avec un interlignage détendu pour une meilleure lisibilité.

<!-- Combinaison de classes modulaires --> <h1 class="title-xl font-primary weight-bold text-primary tracking-tight"> Titre Principal </h1>
Approche utilitaire

Votre séjour à venir

Préparer votre arrivée

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<!-- Combinaison de classes utilitaires --> <h1 class="text-4xl font-extrabold uppercase tracking-tight" style="font-family: var(--font-title);"> Votre séjour à venir </h1>

Notes d'Utilisation

🎯 Deux Approches Disponibles

Approche Modulaire :

  • Taille : title-xl, title-lg, subtitle-md
  • Police : font-primary, font-secondary
  • Poids : weight-light, weight-bold
  • Couleur : text-primary, text-secondary

Approche Utilitaire :

  • Taille : text-xs, text-base, text-4xl
  • Poids : font-light, font-bold, font-black
  • Variables : --font-title, --font-body

âś… Bonnes Pratiques

  • Utilisez les classes composĂ©es pour les cas standards : page-title, section-title
  • Combinez les classes modulaires pour plus de flexibilitĂ©
  • Utilisez les classes utilitaires pour des ajustements fins
  • PrĂ©fĂ©rez leading-relaxed pour les longs paragraphes
  • Appliquez tracking-tight sur les gros titres
  • Respectez la hiĂ©rarchie sĂ©mantique HTML (H1 > H2 > H3...)

🚫 À Éviter

  • Ne pas mĂ©langer plusieurs classes de taille sur un mĂŞme Ă©lĂ©ment
  • Ne pas utiliser plusieurs classes de police simultanĂ©ment
  • Éviter d'oublier de spĂ©cifier une couleur de texte
  • Ne pas casser la hiĂ©rarchie HTML (H1 puis H4 directement)
  • Éviter les styles inline quand les classes UIKit existent

📱 Responsive et Hiérarchie

Hiérarchie recommandée :

  • H1 : page-title ou text-4xl Ă  text-6xl
  • H2 : section-title ou text-2xl Ă  text-3xl
  • H3 : section-subtitle ou text-xl Ă  text-2xl
  • Body : text-base (16px par dĂ©faut)
  • Small : text-sm ou text-xs