# Kiwi Orbit Designsystem ## Kiwi Orbit Designsystem: Interface-Vorschau Ändere die Anzahl der Reisenden und die Extras. Prüfe die Aufschlüsselung und entferne eine veraltete Überprüfung, indem du eine Auswahl änderst. ## Kiwi Orbit Designsystem: Designreferenz Native Orbit-Komponenten React 27.7.0 mit defaultTheme und kompiliertem Tailwind CSS; Token-Referenz 11.0.0. ### Produktaktionsfarben | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | buttonPrimaryBackground | #008F7B | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | | buttonPrimaryBackgroundHover | #007565 | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | | buttonPrimaryBackgroundActive | #006153 | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | | buttonPrimaryForeground | #FFFFFF | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | | buttonPrimaryForegroundHover | #FFFFFF | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | | buttonPrimaryForegroundActive | #FFFFFF | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | | buttonPrimaryBorderColorFocus | rgba(0, 143, 123, 0.5) | Referenz für den Status der primären Aktion. Hover-, Aktiv- und Fokusrollen klar voneinander unterscheiden. | ### Komponentenabstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | space50 | 2px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space100 | 4px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space150 | 6px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space200 | 8px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space300 | 12px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space400 | 16px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space500 | 20px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space600 | 24px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space800 | 32px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space1000 | 40px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | | space1200 | 48px | Tatsächliche Pixelabstände aus dem veröffentlichten Token-Paket. | ### Eckenradien | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | borderRadius50 | 2px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadius100 | 4px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadius150 | 6px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadius200 | 8px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadius300 | 12px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadius400 | 16px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadiusNone | 0 | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | | borderRadiusFull | 9999px | Unterschiedliche Radiusrollen eignen sich für Bedienelemente und größere Reiseoberflächen. | ### Fließtext | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | fontSizeTextSmall | 13px | Veröffentlichte Fließtextrollen; individuelle Seitenüberschriften werden in der Anwendung zusammengesetzt. | | fontSizeTextNormal | 15px | Veröffentlichte Fließtextrollen; individuelle Seitenüberschriften werden in der Anwendung zusammengesetzt. | | fontSizeTextLarge | 16px | Veröffentlichte Fließtextrollen; individuelle Seitenüberschriften werden in der Anwendung zusammengesetzt. | | fontSizeTextExtraLarge | 18px | Veröffentlichte Fließtextrollen; individuelle Seitenüberschriften werden in der Anwendung zusammengesetzt. | ### Produkt- und neutrale Oberflächen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | paletteCloudLight | #F5F7F9 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteCloudNormal | #E8EDF1 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteInkDark | #252A31 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteInkLight | #657890 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteInkNormal | #4F5E71 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteProductLight | #E1F4F3 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteProductNormal | #008F7B | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | | paletteProductDark | #007061 | Verwende ruhige Oberflächen und gut lesbaren Text rund um die Produktaktionsfarbe. | ## Kiwi Orbit Designsystem: Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Kiwi Orbit Designsystem: Layout zur Auswahl von Reiseoptionen ### Die Route vor den Extras anzeigen > Die Routenübersicht zeigt vor den Gepäckoptionen die beiden Flughafencodes, die Städtenamen und eine fiktive Reisedauer. So bleibt der Kaufkontext sichtbar, während die Nutzerinnen und Nutzer Extras vergleichen. Die gestrichelte Verbindung ist eine originale Illustration von CSS, keine Routengrafik eines Anbieters und kein Versprechen für einen realen Dienst. ### Auswahl und Gesamtpreis getrennt darstellen Reisende und Gepäck stehen auf einer Seite, daneben die Preisaufschlüsselung. Derselbe Zustand bestimmt sowohl die ausgewählten Steuerelemente als auch die Beträge. Auf dem Smartphone folgt die Übersicht in der Dokumentreihenfolge auf die Auswahl. So bleibt klar, welche Eingaben den Gesamtpreis bestimmen. ## Kiwi Orbit Designsystem: Produktfarben und Feedback ### Für die Hauptaktion die Produktfarbfamilie verwenden Das Token-Paket bietet eine grüne Produktaktionsfarbe mit eigenen Hover- und Aktivtönen. Die Referenz führt die exakten Werte für die Buttonrolle auf, statt auf ein vermutetes Marken-Grün zurückzugreifen. Neutrale, wolkenfarbene Oberflächen rahmen die auswählbaren Extras ein, ohne dass jedes Panel mit der Überprüfungsaktion konkurriert. ### Feedback konkret auf das Ergebnis beziehen Die native Erfolgsmeldung lautet „Auswahl lokal überprüft“ und nennt die Anzahl der Reisenden sowie den Gesamtpreis. Sie wird gelöscht, sobald sich eine Auswahl ändert. Eine frühere grüne Bestätigung bleibt somit nicht sichtbar, als würde sie auch eine neu bearbeitete Auswahl von Extras bestätigen. ## Kiwi Orbit Designsystem: Typografie und Preishierarchie ### Für erklärende Texte native Textrollen verwenden Orbit bietet kleine Textrollen mit 13 px und normale mit 15 px sowie größere Varianten. Das Beispiel verwendet native Text- und Heading-Komponenten; die Routencodes und der Gesamtpreis werden eigens hervorgehoben. Der Browser verwendet hier eine dokumentierte Fallback-Schriftfamilie; es wird nicht unbemerkt eine Markenschrift von Kiwi.com geladen. ### Einheiten direkt bei den Beträgen anzeigen Bei jedem Gepäckpreis steht „pro Reisende:r“. In der Aufschlüsselung wird jedes ausgewählte Extra mit der Anzahl der Reisenden multipliziert, und der Gesamtpreis ist stärker hervorgehoben als die einzelnen Positionen. Die Einheit darf auf Mobilgeräten nicht verschwinden, denn eine große, attraktive Zahl ohne Angabe ihres Bezugs lässt sich leicht falsch verstehen. ## Kiwi Orbit Designsystem: Radien und Abstandsskalen ### Steuerelemente von größeren Oberflächen abheben Die aktuelle Radius-Skala umfasst die Stufen 2, 4, 6, 8, 12 und 16 px sowie none und full. Für die selbst gestalteten Routen- und Übersichtsbereiche werden abgerundete Ecken mit 12 px verwendet, während native Steuerelemente ihre eigenen Theme-Regeln beibehalten. Würde auf jedes verschachtelte Element der größte Radius angewendet, ginge die Hierarchie des Formulars verloren. ### Die Optionszeile beim Umbruch zusammenhalten Eine Gepäckoption fasst ihr natives Kontrollkästchen, den ergänzenden Freigepäcktext und den Preis zusammen. Der beschreibende Inhalt erhält flexible Breite, während der Preis gut lesbar bleibt. Die Seite wechselt zu einer einspaltigen Darstellung, bevor einer der beiden Hauptbereiche für den Vergleich zu schmal wird. ## Kiwi Orbit Designsystem: Kontrollkästchen und Auswahlfeld ### Komponentenbeschriftungen und Informationsfelder verwenden Das Kontrollkästchen erhält seine sichtbare Beschriftung und Zusatzinformationen über öffentliche Props. Das Auswahlfeld erhält eine Beschriftung und explizite Optionen für eine bis vier reisende Personen. Diese nativen Kompositionen behalten ihr Interaktions- und Beschriftungsverhalten bei, ohne ein anklickbares div als Gepäckauswahl auszugeben. ### Jede Zusatzoption unabhängig modellieren Kabinen- und Aufgabegepäck werden als separate boolesche Werte behandelt. Die Anwendung unterstellt nicht, dass die Auswahl der einen Option die andere automatisch abwählt. Dies ist eine bewusst einfache Beispielregel. Bei einer echten Fluggesellschaft kann es gegenseitig ausschließende Pakete oder passagierspezifische Freigepäckmengen geben, für die ein anderes Modell erforderlich ist. ## Kiwi Orbit Designsystem: Berechnung und Überprüfung der Auswahl ### Gesamtbetrag aus einer einzigen Formel ableiten Im Beispiel werden die Anzahl der Reisenden mit dem Grundtarif zuzüglich der ausgewählten Zusatzoptionen pro Person multipliziert. Es wird kein separat bearbeitbarer Gesamtbetrag gespeichert, der von den sichtbaren Optionen abweichen könnte. Alle Preise und Freigepäckmengen sind ausdrücklich fiktiv und keine aktuellen Angebote von Kiwi.com. ### Eine Momentaufnahme zur Überprüfung erfassen Bei der Überprüfung werden Anzahl der Reisenden, Gepäckoptionen und Gesamtbetrag gemeinsam gespeichert. Wird eine beliebige Einstellung geändert, wird diese Momentaufnahme gelöscht. So veranschaulicht das Beispiel einen konsistenten Status, ohne einen lokalen Klick als Reservierung, Zahlung, Live-Verfügbarkeitsprüfung oder verbindliches Angebot darzustellen. ## Kiwi Orbit Designsystem: Zugängliche Rückmeldung zur Auswahl ### Beschriftungen und Neuberechnung gemeinsam prüfen Mit Tastatur oder Zeigegerät können Reisende über die nativen Steuerelemente ausgewählt und beide Gepäckoptionen aktiviert oder deaktiviert werden. Das Ergebnis der Überprüfung erscheint in einem Statusbereich. Für optionales Gepäck wird keine Validierung vorgetäuscht: Wenn keine der beiden Zusatzoptionen ausgewählt ist, entspricht das einem gültigen Zustand dieses fiktiven Tarifs. 1. Wähle zwei Reisende aus und füge Kabinengepäck hinzu. 2. Füge Aufgabegepäck hinzu und prüfe alle drei aufgeschlüsselten Beträge. 3. Überprüfe die Auswahl lokal, ändere eine Option und bestätige, dass die vorherige Erfolgsmeldung verschwindet. ### Unerwartete Folgen vermeiden Der fiktive Rahmen wird oberhalb des Formulars und neben dem Gesamtbetrag erläutert. Die Aktion lautet „Auswahl lokal überprüfen“, nicht „Kaufen“ oder „Buchen“. Alle Änderungen bleiben auf der Seite. Für eine Demonstration, die keine persönlichen Passagierdaten benötigt, werden diese auch nicht abgefragt. ## Kiwi Orbit Designsystem: Provider und kompilierte Styles ### Die passende stabile Version verwenden Dieses Beispiel verwendet die Komponenten von React in Version 27.7.0 und Token-Referenzen in Version 11.0.0. Es importiert OrbitProvider, das defaultTheme des Pakets und das kompilierte lib/tailwind.css. Ohne dieses Stylesheet wäre das Styling der Utility-basierten Komponenten unvollständig, selbst wenn der React-Baum gerendert wird. - OrbitProvider und defaultTheme des Pakets. - Kompilierte lib/tailwind.css aus components 27.7.0. - Node.js 22 oder neuer für die Build-Umgebung des Pakets. ### Bereitstellungsanforderungen klar angeben Das Paket setzt Node.js 22 oder neuer voraus. Der bereitgestellte Vite-Einstiegspunkt lässt sich mit dieser Umgebung und dem festgelegten Komponentenpaket reproduzieren. Das ursprüngliche CSS übernimmt nur die Zusammenstellung der Reiseoptionen; die nativen Steuerelemente verwenden weiterhin die veröffentlichten Komponenten-Styles und das Verhalten des Providers. ## Kiwi Orbit Designsystem: Komponentenbeispiele ### main.jsx — vollständiges, funktionsfähiges Beispiel Wähle Gepäckoptionen aus und überprüfe einen beispielhaften Gesamtbetrag. Der folgende Quellcode enthält den vollständigen React-Einstiegspunkt einschließlich sämtlicher Zustände und Validierungen. ``` 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