Ein auf Reisen ausgerichteter Orbit-Leitfaden mit echten Produktfarben und Abständen, nativen Gepäckoptionen, einer einheitlichen Preisübersicht und einem vollständigen lokalen Prüfablauf.
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
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.
Wähle zwei Reisende aus und füge Kabinengepäck hinzu.
Füge Aufgabegepäck hinzu und prüfe alle drei aufgeschlüsselten Beträge.
Ü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
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.
jsx
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 (
<OrbitProvider theme={defaultTheme}>
<main className="trip">
<header>
<Text size="small">ORIGINAL TRAVEL SPECIMEN</Text>
<Heading as="h1" type="title1">Choose what travels with you</Heading>
<Text>
Fictional one-way fare. Prices illustrate the interface, not a
bookable flight.
</Text>
</header>
<div className="trip-grid">
<section>
<div className="route">
<div>
<strong>PRG</strong>
<span>Prague</span>
</div>
<div className="route-line">
<span>1h 45m · direct</span>
<i></i>
</div>
<div>
<strong>AMS</strong>
<span>Amsterdam</span>
</div>
</div>
<div className="options">
<Heading as="h2" type="title3">Travellers and baggage</Heading>
<Select
label="Travellers"
ariaLabel="Travellers"
value={travellers}
options={[1, 2, 3, 4].map((n) => ({
value: String(n),
label: n + " adult" + (n === 1 ? "" : "s"),
}))}
onChange={(e) => update(() => setTravellers(e.target.value))}
/>
<div className="bag-option">
<div>
<Heading as="h3" type="title4">Personal item</Heading>
<Text size="small">
Fits under the seat · included in this example fare
</Text>
</div>
<strong>Included</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add cabin baggage"
info="One 10 kg bag per traveller · fictional allowance"
checked={cabin}
onChange={(e) => update(() => setCabin(e.target.checked))}
/>
<strong>
€18<span>/ traveller</span>
</strong>
</div>
<div className="bag-option">
<Checkbox
label="Add checked baggage"
info="One 20 kg bag per traveller · fictional allowance"
checked={checked}
onChange={(e) => update(() => setChecked(e.target.checked))}
/>
<strong>
€32<span>/ traveller</span>
</strong>
</div>
</div>
</section>
<aside>
<Heading as="h2" type="title3">Your example selection</Heading>
<dl>
<dt>Base fare × {count}</dt>
<dd>€{96 * count}</dd>
{cabin && (
<>
<dt>Cabin baggage × {count}</dt>
<dd>€{18 * count}</dd>
</>
)}
{checked && (
<>
<dt>Checked baggage × {count}</dt>
<dd>€{32 * count}</dd>
</>
)}
</dl>
<div className="trip-total">
<span>Total</span>
<strong>€{total}</strong>
</div>
<Text size="small">
All amounts are illustrative. No payment or reservation will be
created.
</Text>
<Button
fullWidth
onClick={() => setSaved({ count, cabin, checked, total })}
>
Review local selection
</Button>
{saved && (
<div role="status" className="trip-confirm">
<Alert type="success" title="Selection reviewed locally">
{saved.count} traveller{saved.count === 1 ? "" : "s"} · €
{saved.total}. No booking created.
</Alert>
</div>
)}
</aside>
</div>
<footer>
Native Orbit 27.7.0 components and compiled package styles. Original
layout and fictional pricing logic by OpenDesign.
</footer>
</main>
</OrbitProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
Speichern Sie die Datei neben main.jsx. Diese benutzerdefinierten Layoutregeln sind von der Token-Referenz der Bibliothek getrennt.
04
Kiwi Orbit Designsystem: Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Das Beispiel mit den festgelegten nativen Komponenten wurde gebündelt und lokal im Browser geprüft. Das Beispiel verwendet ausschließlich den lokalen Anwendungszustand.
sh
npm create vite@latest orbit-trip -- --template react
cd orbit-trip
npm install
npm install [email protected][email protected] @kiwicom/[email protected]
# Use Node.js >=22. Replace src/main.jsx and add src/orbit.css.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle mit nativen Orbit-Komponenten und kompilierten Styles eine Auswahl für Reiseoptionen. Halte Routenkontext, Preise pro Person, ausgewählte Zusatzoptionen und Gesamtbetrag konsistent. Kennzeichne fiktive Preise und die lokale Überprüfung eindeutig, lösche veraltete Prüfergebnisse bei Änderungen und erwecke nicht den Eindruck, dass Buchungs- oder Zahlungsfunktionen verfügbar sind.
05
Kiwi Orbit Designsystem: Quellen und Geltungsbereich
OpenDesign-Anwendungsleitfaden. Route, Dauer, Preise und Freigepäckmengen sind fiktiv. Native Orbit-Steuerelemente funktionieren lokal; es erfolgen weder Flugsuche noch Buchung oder Zahlung.
