# Sistema di progettazione Kiwi Orbit ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Kiwi Orbit Modifica il numero di viaggiatori e gli extra; consulta il dettaglio dei costi e aggiorna una revisione non più valida modificando una scelta. ## Riferimento di progettazione del sistema sistema di design Kiwi Orbit Componenti Orbit nativi React 27.7.0 con defaultTheme e Tailwind CSS compilato; riferimento dei token 11.0.0. ### Colori delle azioni del prodotto | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | buttonPrimaryBackground | #008F7B | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | | buttonPrimaryBackgroundHover | #007565 | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | | buttonPrimaryBackgroundActive | #006153 | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | | buttonPrimaryForeground | #FFFFFF | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | | buttonPrimaryForegroundHover | #FFFFFF | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | | buttonPrimaryForegroundActive | #FFFFFF | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | | buttonPrimaryBorderColorFocus | rgba(0, 143, 123, 0.5) | Riferimento agli stati dell’azione primaria. Distingui i ruoli di hover, active e focus. | ### Spaziatura dei componenti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | space50 | 2px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space100 | 4px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space150 | 6px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space200 | 8px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space300 | 12px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space400 | 16px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space500 | 20px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space600 | 24px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space800 | 32px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space1000 | 40px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | | space1200 | 48px | Valori di spaziatura effettivi in pixel, definiti dal pacchetto di token pubblicato. | ### Raggi degli angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | borderRadius50 | 2px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadius100 | 4px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadius150 | 6px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadius200 | 8px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadius300 | 12px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadius400 | 16px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadiusNone | 0 | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | | borderRadiusFull | 9999px | I diversi raggi distinguono i controlli dalle superfici di viaggio più ampie. | ### Testo del corpo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | fontSizeTextSmall | 13px | Ruoli tipografici pubblicati per il corpo del testo; i titoli personalizzati della pagina fanno parte della composizione dell’applicazione. | | fontSizeTextNormal | 15px | Ruoli tipografici pubblicati per il corpo del testo; i titoli personalizzati della pagina fanno parte della composizione dell’applicazione. | | fontSizeTextLarge | 16px | Ruoli tipografici pubblicati per il corpo del testo; i titoli personalizzati della pagina fanno parte della composizione dell’applicazione. | | fontSizeTextExtraLarge | 18px | Ruoli tipografici pubblicati per il corpo del testo; i titoli personalizzati della pagina fanno parte della composizione dell’applicazione. | ### Superfici del prodotto e neutre | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | paletteCloudLight | #F5F7F9 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteCloudNormal | #E8EDF1 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteInkDark | #252A31 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteInkLight | #657890 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteInkNormal | #4F5E71 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteProductLight | #E1F4F3 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteProductNormal | #008F7B | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | | paletteProductDark | #007061 | Usa superfici sobrie e testo leggibile attorno al colore delle azioni del prodotto. | ## Guida completa al sistema di progettazione sistema di design Kiwi Orbit Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Layout di selezione viaggi del sistema di progettazione sistema di design Kiwi Orbit ### Mostra l’itinerario prima degli extra > Il riepilogo dell’itinerario mostra i codici dei due aeroporti, i nomi delle città e una durata fittizia prima delle opzioni per il bagaglio. In questo modo il contesto dell’acquisto resta visibile mentre l’utente confronta gli extra. Il tratteggio è un’illustrazione originale CSS, non una grafica del percorso di un vettore né una promessa relativa a un servizio reale. ### Tieni separate le scelte dal totale I viaggiatori e i bagagli sono da un lato, mentre il dettaglio dei prezzi è accanto. Lo stesso stato determina sia i controlli selezionati sia gli importi. Sul telefono, il riepilogo segue le scelte nell’ordine del documento, così è chiaro quali opzioni determinano il totale. ## Colori del prodotto e feedback nel sistema di progettazione sistema di design Kiwi Orbit ### Usa la palette del prodotto per l’azione principale Il pacchetto di token fornisce un’azione del prodotto verde, con tonalità distinte per hover e active. Il riferimento elenca i valori esatti del ruolo del pulsante, anziché basarsi su un verde del brand ipotizzato. Le superfici neutre color nuvola incorniciano gli extra selezionabili senza fare concorrenza all’azione di revisione. ### Fai in modo che il feedback rispecchi il risultato L’avviso di successo nativo dice «Selezione esaminata in locale» e indica il numero di viaggiatori e il totale. Viene cancellato ogni volta che cambia una scelta. Una conferma verde precedente non può quindi restare visibile come se convalidasse un nuovo insieme di extra modificato. ## Tipografia e gerarchia dei prezzi nel sistema di progettazione sistema di design Kiwi Orbit ### Usa gli stili di testo nativi per i contenuti esplicativi Orbit offre stili nativi per il corpo del testo da 13px (piccolo) e 15px (normale), oltre ad altri formati più grandi. L’esempio usa i componenti nativi Text e Heading, mentre i codici dell’itinerario e il totale sono messi in risalto appositamente. Qui il browser usa uno stack di font di fallback documentato; il font del brand Kiwi.com non viene caricato di nascosto. ### Mantieni le unità accanto agli importi Il prezzo di ogni bagaglio è indicato per viaggiatore. Il dettaglio moltiplica ogni extra selezionato per il numero di viaggiatori e il totale risalta più delle singole voci. L’unità non deve scomparire su mobile: senza indicarne l’ambito, un numero grande e accattivante può essere facilmente interpretato male. ## Scale di raggi e spaziature del sistema di progettazione sistema di design Kiwi Orbit ### Distingui i controlli dalle superfici più ampie La scala attuale dei raggi comprende valori di 2, 4, 6, 8, 12 e 16px, oltre a none e full. I pannelli dell’itinerario e del riepilogo creati appositamente usano angoli da 12px, mentre i controlli nativi mantengono le regole del proprio tema. Applicare il raggio più ampio a ogni elemento annidato farebbe perdere gerarchia al modulo. ### Mantieni integra la riga dell’opzione anche quando va a capo Una riga del bagaglio raggruppa la casella di controllo nativa, il testo informativo sulla franchigia e il prezzo. La larghezza flessibile è assegnata al contenuto descrittivo, mentre il prezzo resta leggibile. La pagina passa a una colonna prima che una delle due aree principali diventi troppo stretta per consentire il confronto. ## Checkbox e Select controllati nel sistema di progettazione sistema di design Kiwi Orbit ### Usa le etichette dei componenti e i campi informativi Checkbox riceve l’etichetta visibile e le informazioni di supporto tramite le props pubbliche. Select riceve un’etichetta e opzioni esplicite per scegliere da uno a quattro viaggiatori. Queste composizioni native mantengono il comportamento di interazione e di etichettatura senza ricorrere a un div cliccabile che finge di essere un controllo per il bagaglio. ### Gestisci ogni extra in modo indipendente Il bagaglio a mano e quello da stiva sono booleani separati. L’applicazione non presume che selezionarne uno deselezioni automaticamente l’altro. È una regola volutamente semplice per questo esempio; una compagnia aerea reale potrebbe avere pacchetti incompatibili o franchigie specifiche per passeggero, che richiederebbero un modello diverso. ## Calcolo e revisione della selezione nel sistema di progettazione sistema di design Kiwi Orbit ### Calcola il totale con un’unica formula L’esempio calcola il numero di viaggiatori moltiplicato per la tariffa base più gli extra selezionati per persona. Non memorizza un totale modificabile a parte, che potrebbe non corrispondere alle opzioni visibili. Tutti i prezzi e le franchigie sono dichiaratamente fittizi e non rappresentano offerte Kiwi.com attuali. ### Salva un’istantanea della revisione La revisione salva insieme il numero di viaggiatori, le scelte sui bagagli e il totale. Se si modifica un controllo, l’istantanea viene cancellata. L’esempio illustra quindi la coerenza dello stato senza presentare un clic locale come prenotazione, pagamento, verifica della disponibilità in tempo reale o preventivo definitivo. ## Feedback accessibile sulle scelte nel sistema di progettazione sistema di design Kiwi Orbit ### Verifica insieme le etichette e il ricalcolo Chi usa la tastiera o il puntatore può selezionare i viaggiatori e attivare una delle due opzioni per il bagaglio con i controlli nativi. L’esito della revisione appare in un’area di stato. Non vengono inventati errori di convalida per il bagaglio facoltativo: lasciare deselezionati entrambi gli extra è una scelta valida per questa tariffa fittizia. 1. Seleziona due viaggiatori e aggiungi il bagaglio a mano. 2. Aggiungi il bagaglio da stiva e verifica tutti e tre gli importi del dettaglio. 3. Esamina la selezione in locale, modifica una scelta e verifica che il messaggio di successo precedente scompaia. ### Evita conseguenze nascoste La pagina chiarisce che si tratta di un esempio fittizio sia prima del modulo sia accanto al totale. L’azione è «Esamina la selezione in locale», non «Acquista» o «Prenota». Tutte le modifiche restano nella pagina e, per una dimostrazione che non ne ha bisogno, non vengono richiesti dati personali dei passeggeri. ## Provider e stili compilati nel sistema di progettazione sistema di design Kiwi Orbit ### Usa la versione stabile corrispondente Questo esempio usa React components 27.7.0 e i riferimenti ai token 11.0.0. Importa OrbitProvider, il defaultTheme del pacchetto e il file compilato lib/tailwind.css. Senza questo foglio di stile, gli stili dei componenti basati su utility resterebbero incompleti, anche se l’albero React venisse renderizzato. - OrbitProvider e defaultTheme del pacchetto. - lib/tailwind.css compilato da components 27.7.0. - Node.js 22 o versione successiva per l’ambiente di build del pacchetto. ### Specifica chiaramente i requisiti di distribuzione Il pacchetto richiede Node.js 22 o versione successiva. La voce Vite fornita può essere riprodotta con questo ambiente e la versione fissata del pacchetto dei componenti. L’originale CSS gestisce solo la composizione dell’itinerario; i controlli nativi mantengono gli stili pubblicati dei componenti e il comportamento del provider. ## Esempi di componenti del sistema di progettazione sistema di design Kiwi Orbit ### main.jsx — esempio completo funzionante Scegli il bagaglio e consulta un esempio di totale. Il codice seguente è la voce React completa, con tutto lo stato e la convalida. ``` 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