v1.0
🎨 Index de Navigation
Couleurs Principales Nuances de Gris Couleurs d'État Couleurs Transport Gris Étendues États Étendus Variables CSS Classes de Texte Classes de Fond Classes de Bordure Couleurs de Boutons Couleurs d'Alertes États Interactifs Couleurs Travelski Couleurs d'Icônes Exemples Transport Exemples d'Utilisation

UI Kit - Système de Couleurs Travelski

Couleurs Principales

Primary

#0042b8

Bleu principal Travelski

--color-primary

Secondary

#fe6100

Orange secondaire

--color-secondary

Success

#005f32

Vert de succès

--color-success

Light

#eef2fa

Bleu très clair

--color-light

Accent

#3766c3

Bleu accent

--color-accent

Nuances de Gris

Grey 900 --color-grey-900 #0D141B
Grey 800 --color-grey-800 #1a1a1a
Grey 700 --color-grey-700 #333333
Grey 600 --color-grey-600 #666666
Grey 500 --color-grey-500 #999999
Grey 400 --color-grey-400 #cccccc
Grey 300 --color-grey-300 #e0e0e0
Grey 200 --color-grey-200 #f0f0f0
Grey 100 --color-grey-100 #f5f5f5
Grey 50 --color-grey-50 #f9f9f9

Couleurs d'État

Error

#e74c3c

Rouge d'erreur

--color-error

Warning

#f39c12

Orange d'alerte

--color-warning

Info

#3498db

Bleu d'information

--color-info

Success Light

#2ecc71

Vert de validation

--color-success-light

Couleurs Transport

Train

#28a745

Vert pour transport train

--color-transport-train

Avion

#1976d2

Bleu pour transport avion

--color-transport-plane

Bus

#f57c00

Orange pour transport bus

--color-transport-bus

Voiture

#7b1fa2

Violet pour transport voiture

--color-purple

Nuances de Gris Étendues

Slate (Ardoise)

Slate 200 --color-grey-slate-200 #e2e8f0
Slate 100 --color-grey-slate-100 #f1f5f9
Slate 50 --color-grey-slate-50 #f8fafc

Neutral

Neutral 700 --color-grey-neutral-700 #374151
Neutral 600 --color-grey-neutral-600 #4b5563
Neutral 500 --color-grey-neutral-500 #6b7280
Neutral 400 --color-grey-neutral-400 #9ca3af
Neutral 300 --color-grey-neutral-300 #d1d5db

Blue Grey

Blue Grey 700 --color-grey-blue-700 #455a64
Blue Grey 600 --color-grey-blue-600 #546e7a

Couleurs d'État Étendues

Error Dark

#dc3545

Rouge d'erreur foncé

--color-error-dark

Error Light

#c53030

Rouge d'erreur clair

--color-error-light

Warning Dark

#f57c00

Orange d'alerte foncé

--color-warning-dark

Warning Amber

#b7791f

Orange ambre

--color-warning-amber

Info Dark

#1976d2

Bleu d'information foncé

--color-info-dark

Success Emerald

#2f855a

Vert émeraude

--color-success-emerald

Variables CSS

Utilisation des variables CSS
Élément utilisant var(--color-primary)
/* Utilisation des variables CSS */ .mon-element { background-color: var(--color-primary); color: var(--color-white); border: 1px solid var(--color-border); }

Classes de Couleur de Texte

Couleurs de texte principales

Texte Primary (.text-primary)

Texte Secondary (.text-secondary)

Texte Success (.text-success)

Texte Accent (.text-accent)

<!-- Classes de couleur de texte --> <p class="text-primary">Texte Primary</p> <p class="text-secondary">Texte Secondary</p> <p class="text-success">Texte Success</p> <p class="text-accent">Texte Accent</p>
Couleurs de texte d'état

Texte d'erreur (.text-error)

Texte d'alerte (.text-warning)

Texte d'information (.text-info)

Texte de validation (.text-success-light)

<!-- Classes de couleur de texte d'état --> <p class="text-error">Texte d'erreur</p> <p class="text-warning">Texte d'alerte</p> <p class="text-info">Texte d'information</p> <p class="text-success-light">Texte de validation</p>
Couleurs de texte gris

Texte gris 900 (.text-grey-900)

Texte gris 700 (.text-grey-700)

Texte gris 600 (.text-grey-600)

Texte gris 500 (.text-grey-500)

<!-- Classes de couleur de texte gris --> <p class="text-grey-900">Texte gris 900</p> <p class="text-grey-700">Texte gris 700</p> <p class="text-grey-600">Texte gris 600</p> <p class="text-grey-500">Texte gris 500</p>
Nouvelles couleurs de texte transport

Texte Transport Train (.text-transport-train)

Texte Transport Avion (.text-transport-plane)

Texte Transport Bus (.text-transport-bus)

Texte Violet (.text-purple)

<!-- Classes de couleur transport --> <p class="text-transport-train">Transport Train</p> <p class="text-transport-plane">Transport Avion</p> <p class="text-transport-bus">Transport Bus</p> <p class="text-purple">Texte Violet</p>
Couleurs d'état étendues

Texte Error Dark (.text-error-dark)

Texte Error Light (.text-error-light)

Texte Warning Dark (.text-warning-dark)

Texte Warning Amber (.text-warning-amber)

Texte Info Dark (.text-info-dark)

Texte Success Emerald (.text-success-emerald)

<!-- Classes d'état étendues --> <p class="text-error-dark">Error Dark</p> <p class="text-warning-dark">Warning Dark</p> <p class="text-success-emerald">Success Emerald</p>

Classes de Couleur de Fond

Fonds colorés principaux
Fond Primary (.bg-primary)
Fond Secondary (.bg-secondary)
Fond Success (.bg-success)
Fond Accent (.bg-accent)
<!-- Classes de couleur de fond --> <div class="bg-primary text-white">Fond Primary</div> <div class="bg-secondary text-white">Fond Secondary</div> <div class="bg-success text-white">Fond Success</div> <div class="bg-accent text-white">Fond Accent</div>
Fonds gris
Fond Grey 50 (.bg-grey-50)
Fond Grey 100 (.bg-grey-100)
Fond Grey 200 (.bg-grey-200)
Fond Grey 300 (.bg-grey-300)
<!-- Classes de fond gris --> <div class="bg-grey-50">Fond Grey 50</div> <div class="bg-grey-100">Fond Grey 100</div> <div class="bg-grey-200">Fond Grey 200</div> <div class="bg-grey-300">Fond Grey 300</div>

Classes de Couleur de Bordure

Bordures colorées
Bordure Primary (.border-primary)
Bordure Secondary (.border-secondary)
Bordure Success (.border-success)
Bordure Accent (.border-accent)
<!-- Classes de couleur de bordure --> <div class="border-primary" style="border: 2px solid;"> Bordure Primary </div> <div class="border-secondary" style="border: 2px solid;"> Bordure Secondary </div>

Couleurs des Boutons

Styles de boutons prédéfinis
<!-- Styles de boutons avec couleurs --> <button class="btn-primary">Bouton Primary</button> <button class="btn-secondary">Bouton Secondary</button> <button class="btn-success">Bouton Success</button> <button class="btn-dark">Bouton Dark</button>

Couleurs des Alertes

Styles d'alertes
Alerte de succès (.alert-success)
Alerte d'erreur (.alert-error)
Alerte d'avertissement (.alert-warning)
Alerte d'information (.alert-info)
<!-- Styles d'alertes avec couleurs --> <div class="alert-success">Alerte de succès</div> <div class="alert-error">Alerte d'erreur</div> <div class="alert-warning">Alerte d'avertissement</div> <div class="alert-info">Alerte d'information</div>

États Interactifs

États hover et focus
Élément avec hover primary (.hover-primary)
Élément avec hover secondary (.hover-secondary)
<!-- États interactifs --> <div class="hover-primary">Hover Primary</div> <div class="hover-secondary">Hover Secondary</div> <button class="focus-primary">Focus Primary</button>
États disabled
<!-- États disabled --> <button class="disabled" disabled>Bouton désactivé</button> <input class="disabled" disabled>

Couleurs Spécifiques Travelski

Couleurs des composants Travelski
Header Background (.header-bg)
Card Background (.card-bg)
Card Background Grey (.card-bg-grey)
Password Field Background (.password-field-bg)
<!-- Couleurs spécifiques Travelski --> <div class="header-bg">Header</div> <div class="card-bg">Card</div> <div class="card-bg-grey">Card Grey</div> <div class="password-field-bg">Password Field</div>

Couleurs d'Icônes SVG

Classes directes sur les icônes
Pin
.icon-primary
Pin
.icon-secondary
Pin
.icon-success
Pin
.icon-accent
Pin
.icon-error
Pin
.icon-warning
Pin
.icon-info
Pin
.icon-white
Pin
.icon-grey
<!-- Application directe sur l'image --> <img src="icon.svg" class="icon-primary"> <img src="icon.svg" class="icon-secondary"> <img src="icon.svg" class="icon-success">
Classes sur les conteneurs
Skieur
.has-icon-primary
Skieur
.has-icon-secondary
Skieur
.has-icon-success
<!-- Application sur le conteneur --> <div class="has-icon-primary"> <img src="icon.svg" alt="Icon"> </div>
Exemples dans différents contextes
Arrow En savoir plus
Location Alpes du Nord
<!-- Bouton avec icône blanche --> <button class="btn-primary"> <img src="share.svg" class="icon-white"> Partager </button> <!-- Lien avec icône colorée --> <a href="#"> <img src="arrow.svg" class="icon-primary"> En savoir plus </a>

Exemples d'Utilisation Pratique

Formulaire avec validation
✓ Email valide
✗ Format email invalide
<!-- Formulaire avec validation --> <input class="is-valid" type="email"> <div class="valid-feedback">✓ Email valide</div> <input class="is-invalid" type="email"> <div class="invalid-feedback">✗ Format invalide</div>
Interface Dashboard

42

Réservations

98%

Satisfaction

5

En attente

<!-- Interface Dashboard --> <div class="bg-primary text-white"> <h3>42</h3> <p>Réservations</p> </div> <div class="bg-success text-white"> <h3>98%</h3> <p>Satisfaction</p> </div>

🎨 Guide d'Utilisation des Couleurs

Variables CSS (Recommandé)

.mon-element {
  background: var(--color-primary);
  color: var(--color-white);
}

✅ Utilise les variables CSS pour une cohérence maximale

Classes Utilitaires

<div class="bg-primary text-white">Contenu</div>
<p class="text-success">Message de succès</p>

✅ Pratique pour les styles rapides et les prototypes

🚫 À Éviter

  • Utiliser des couleurs en dur (ex: #0042b8) au lieu des variables
  • Mélanger plusieurs classes de fond sur le même élément
  • Utiliser text-white sur fond clair
  • Négliger le contraste pour l'accessibilité
  • Créer des couleurs personnalisées sans cohérence

♿ Accessibilité

  • Toutes les couleurs respectent les ratios de contraste WCAG
  • Utilisez focus-primary pour les éléments interactifs
  • Évitez de transmettre des informations uniquement par la couleur
  • Testez avec des simulateurs de daltonisme

Exemples d'Utilisation - Transport

Système de transport avec couleurs
🚄

TGV Paris-Lyon

Départ: 14h30

Durée: 2h05

En cours
✈️

AF 1234

CDG → NCE

1h30

Confirmé
🚌

Navette Aéroport

Terminal 2 → Gare

45min

Réservé
🚗

Location BMW

3 jours

Aéroport Nice

Option
<!-- Interface transport --> <div class="transport-card"> <h3 class="text-transport-train">TGV Paris-Lyon</h3> <p class="text-transport-text">Départ: 14h30</p> <span class="bg-success-train text-white">En cours</span> </div>