# Système de design Kiwi Orbit ## Aperçu de l’interface du système de design Kiwi Orbit Modifiez le nombre de voyageurs et les options, consultez le détail et effacez un récapitulatif obsolète en changeant une option. ## Référence de conception du système de design Kiwi Orbit Composants Native Orbit React 27.7.0 avec defaultTheme et Tailwind CSS compilé ; référence des jetons 11.0.0. ### Couleurs d’action du produit | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | buttonPrimaryBackground | #008F7B | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | | buttonPrimaryBackgroundHover | #007565 | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | | buttonPrimaryBackgroundActive | #006153 | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | | buttonPrimaryForeground | #FFFFFF | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | | buttonPrimaryForegroundHover | #FFFFFF | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | | buttonPrimaryForegroundActive | #FFFFFF | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | | buttonPrimaryBorderColorFocus | rgba(0, 143, 123, 0.5) | Référence des états de l’action principale. Distinguez les rôles de survol, d’activation et de focus. | ### Espacement des composants | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | space50 | 2px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space100 | 4px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space150 | 6px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space200 | 8px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space300 | 12px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space400 | 16px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space500 | 20px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space600 | 24px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space800 | 32px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space1000 | 40px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | | space1200 | 48px | Valeurs d’espacement réelles en pixels, issues du package de jetons publié. | ### Rayons des angles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | borderRadius50 | 2px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadius100 | 4px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadius150 | 6px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadius200 | 8px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadius300 | 12px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadius400 | 16px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadiusNone | 0 | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | | borderRadiusFull | 9999px | Différents rayons sont prévus pour les contrôles et les grandes surfaces de l’interface de voyage. | ### Typographie du corps de texte | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | fontSizeTextSmall | 13px | Rôles de texte courant publiés ; les titres personnalisés de la page sont composés par l’application. | | fontSizeTextNormal | 15px | Rôles de texte courant publiés ; les titres personnalisés de la page sont composés par l’application. | | fontSizeTextLarge | 16px | Rôles de texte courant publiés ; les titres personnalisés de la page sont composés par l’application. | | fontSizeTextExtraLarge | 18px | Rôles de texte courant publiés ; les titres personnalisés de la page sont composés par l’application. | ### Surfaces du produit et surfaces neutres | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | paletteCloudLight | #F5F7F9 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteCloudNormal | #E8EDF1 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteInkDark | #252A31 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteInkLight | #657890 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteInkNormal | #4F5E71 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteProductLight | #E1F4F3 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteProductNormal | #008F7B | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | | paletteProductDark | #007061 | Privilégiez des surfaces sobres et un texte lisible autour de la couleur d’action du produit. | ## Guide complet du système de design Kiwi Orbit Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Mise en page de sélection de voyage du système de design Kiwi Orbit ### Présentez l’itinéraire avant les options > Le résumé de l’itinéraire affiche les codes des deux aéroports, le nom des villes et une durée fictive avant les options de bagages. Le contexte d’achat reste ainsi visible pendant que l’utilisateur compare les options. Le connecteur en pointillés est une illustration originale de CSS, et non un tracé d’itinéraire d’un transporteur ni la promesse d’un service réel. ### Séparez les options du total Les voyageurs et les bagages sont regroupés d’un côté, tandis que le détail du prix figure à côté. Un même état détermine les contrôles sélectionnés et les montants. Sur téléphone, le récapitulatif suit les options dans l’ordre du document, ce qui permet de voir clairement quelles saisies déterminent le total. ## Couleurs du produit et retours d’information du système de design Kiwi Orbit ### Utilisez la gamme du produit pour l’action principale Le package de jetons fournit une couleur d’action verte pour le produit, avec des nuances distinctes au survol et à l’activation. La référence indique les valeurs exactes du rôle de bouton au lieu de s’appuyer sur un vert de marque approximatif. Des surfaces neutres couleur nuage encadrent les options sélectionnables sans rivaliser avec l’action de récapitulatif. ### Adaptez le retour d’information au résultat L’alerte de réussite native indique « Sélection récapitulée localement » et précise le nombre de voyageurs et le total. Elle est effacée dès qu’une option change. Une confirmation verte précédente ne peut donc pas rester affichée comme si elle validait un nouvel ensemble d’options. ## Typographie et hiérarchie des prix du système de design Kiwi Orbit ### Utilisez les styles de texte natifs pour les explications Orbit propose des styles natifs de texte courant en 13 px (petit) et 15 px (normal), ainsi que des tailles supérieures. L’exemple utilise les composants Text et Heading natifs, tandis que les codes d’itinéraire et le total sont mis en valeur sur mesure. Le navigateur utilise ici une pile de polices de remplacement documentée ; aucune police de marque Kiwi.com n’est récupérée en arrière-plan. ### Indiquez les unités à côté des montants Le prix de chaque bagage est indiqué par voyageur. Le détail multiplie le prix de chaque option sélectionnée par le nombre de voyageurs, et le total est mis davantage en évidence que les lignes qui le composent. L’unité ne doit pas disparaître sur mobile : un montant élevé et attrayant, sans indication de sa portée, peut facilement être mal interprété. ## Échelles de rayons et d’espacement du système de design Kiwi Orbit ### Distinguez les contrôles des grandes surfaces L’échelle de rayons actuelle comprend des valeurs de 2, 4, 6, 8, 12 et 16 px, ainsi que les options aucun et complet. Les panneaux personnalisés de l’itinéraire et du récapitulatif ont des coins de 12 px, tandis que les contrôles natifs conservent les règles de leur thème. Appliquer le rayon maximal à chaque élément imbriqué ferait perdre sa hiérarchie au formulaire. ### Préservez l’intégrité de la ligne d’option lorsqu’elle passe à la ligne Une ligne de bagage regroupe sa case à cocher native, le texte explicatif sur la franchise et le prix. Le contenu descriptif dispose d’une largeur flexible, tandis que le prix reste lisible. La page passe sur une seule colonne avant que l’une des deux zones principales ne devienne trop étroite pour permettre la comparaison. ## Case à cocher et liste de sélection contrôlées du système de design Kiwi Orbit ### Utilisez les libellés des composants et les champs d’information La case à cocher reçoit son libellé visible et ses informations complémentaires par le biais de props publiques. Le composant Select reçoit un libellé et des options explicites pour choisir de un à quatre voyageurs. Ces compositions natives préservent leur comportement d’interaction et d’étiquetage, sans remplacer un contrôle de bagage par un div cliquable. ### Gérez chaque option séparément Les bagages en cabine et les bagages en soute sont deux valeurs booléennes distinctes. L’application ne laisse pas entendre que la sélection de l’un désélectionne automatiquement l’autre. Cette règle est volontairement simple pour l’exemple ; une vraie compagnie aérienne peut proposer des forfaits mutuellement exclusifs ou des franchises propres à chaque passager, qui nécessiteraient un autre modèle. ## Calcul et récapitulatif de la sélection du système de design Kiwi Orbit ### Calculez le total à partir d’une seule formule L’exemple calcule le nombre de voyageurs multiplié par le tarif de base augmenté des options sélectionnées par personne. Il ne stocke pas un total modifiable séparément, qui pourrait ne plus correspondre aux options visibles. Tous les prix et franchises sont explicitement fictifs et ne sont pas des offres Kiwi.com en vigueur. ### Enregistrez un instantané du récapitulatif Le récapitulatif enregistre ensemble le nombre de voyageurs, les options de bagages et le total. Toute modification d’un contrôle efface cet instantané. L’exemple montre ainsi la cohérence de l’état, sans présenter un clic local comme une réservation, un paiement, une vérification de disponibilité en temps réel ou un devis définitif. ## Retours d’information accessibles sur le choix — système de design Kiwi Orbit ### Vérifiez ensemble les libellés et le recalcul Au clavier ou au pointeur, l’utilisateur peut choisir le nombre de voyageurs et activer l’une ou l’autre des options de bagages à l’aide des contrôles natifs. Le résultat du récapitulatif apparaît dans une région de statut. Aucune validation artificielle n’est ajoutée pour les bagages facultatifs : ne sélectionner aucune option est un état valide pour ce tarif fictif. 1. Choisissez deux voyageurs et ajoutez un bagage en cabine. 2. Ajoutez un bagage en soute et vérifiez les trois montants du détail. 3. Faites le récapitulatif localement, modifiez une option et vérifiez que le message de réussite précédent disparaît. ### Évitez les conséquences cachées La page explique la nature fictive de l’offre au-dessus du formulaire et à côté du total. L’action proposée est d’examiner la sélection locale, et non d’acheter ou de réserver. Toutes les modifications restent sur la page, et aucune information personnelle sur les passagers n’est demandée puisque la démonstration n’en a pas besoin. ## Fournisseur du système de design Kiwi Orbit et styles compilés ### Utilisez la version stable correspondante Cet exemple fixe les composants React à la version 27.7.0 et les références de jetons à la version 11.0.0. Il importe OrbitProvider, le paquet defaultTheme et la feuille de style compilée lib/tailwind.css. Sans cette feuille de style, le rendu de l’arborescence React resterait incomplet, même si le style des composants repose sur des classes utilitaires. - OrbitProvider et le paquet defaultTheme. - Fichier compilé lib/tailwind.css des composants en version 27.7.0. - Node.js 22 ou une version ultérieure pour l’environnement de compilation du package. ### Précisez les exigences de déploiement Le package requiert Node.js 22 ou une version ultérieure. Le point d’entrée Vite fourni peut être reproduit dans cet environnement avec la version épinglée du package de composants. Le fichier CSS d’origine ne gère que la composition du voyage ; les contrôles natifs conservent les styles publiés des composants et le comportement du fournisseur. ## Exemples de composants du système de design Kiwi Orbit ### main.jsx — exemple complet fonctionnel Choisissez des bagages et consultez un exemple de total. Le code source ci-dessous correspond à l’entrée React complète, avec tous les états et la validation. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { OrbitProvider, Button, Checkbox, Select, Alert, Heading, Text, } from "@kiwicom/orbit-components"; import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme"; import "@kiwicom/orbit-components/lib/tailwind.css"; import "./orbit.css"; function App() { const [travellers, setTravellers] = useState("1"), [cabin, setCabin] = useState(false), [checked, setChecked] = useState(false), [saved, setSaved] = useState(null); const count = Number(travellers), extras = (cabin ? 18 : 0) + (checked ? 32 : 0), total = count * (96 + extras); function update(fn) { fn(); setSaved(null); } return (
ORIGINAL TRAVEL SPECIMEN Choose what travels with you Fictional one-way fare. Prices illustrate the interface, not a bookable flight.
PRG Prague
1h 45m · direct
AMS Amsterdam
Travellers and baggage