# Sistema de diseño Kiwi Orbit ## Vista previa de la interfaz del sistema de diseño Kiwi Orbit Cambia el número de viajeros y los extras; consulta el desglose y elimina una revisión obsoleta al modificar una opción. ## Referencia de diseño del sistema de diseño Kiwi Orbit Componentes nativos de Orbit React 27.7.0 con defaultTheme y CSS de Tailwind compilado; referencia de tokens 11.0.0. ### Colores de acción del producto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | buttonPrimaryBackground | #008F7B | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | | buttonPrimaryBackgroundHover | #007565 | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | | buttonPrimaryBackgroundActive | #006153 | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | | buttonPrimaryForeground | #FFFFFF | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | | buttonPrimaryForegroundHover | #FFFFFF | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | | buttonPrimaryForegroundActive | #FFFFFF | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | | buttonPrimaryBorderColorFocus | rgba(0, 143, 123, 0.5) | Referencia de los estados de la acción principal. Mantén diferenciadas las funciones de hover, active y focus. | ### Espaciado de los componentes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | space50 | 2px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space100 | 4px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space150 | 6px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space200 | 8px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space300 | 12px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space400 | 16px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space500 | 20px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space600 | 24px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space800 | 32px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space1000 | 40px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | | space1200 | 48px | Valores reales en píxeles de los intervalos de espaciado del paquete de tokens publicado. | ### Radios de esquina | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | borderRadius50 | 2px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadius100 | 4px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadius150 | 6px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadius200 | 8px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadius300 | 12px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadius400 | 16px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadiusNone | 0 | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | | borderRadiusFull | 9999px | Los distintos radios se adaptan a los controles y a superficies de viaje más amplias. | ### Tipografía del cuerpo | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | fontSizeTextSmall | 13px | Estilos publicados para el cuerpo; los encabezados personalizados de la página forman parte de la composición de la aplicación. | | fontSizeTextNormal | 15px | Estilos publicados para el cuerpo; los encabezados personalizados de la página forman parte de la composición de la aplicación. | | fontSizeTextLarge | 16px | Estilos publicados para el cuerpo; los encabezados personalizados de la página forman parte de la composición de la aplicación. | | fontSizeTextExtraLarge | 18px | Estilos publicados para el cuerpo; los encabezados personalizados de la página forman parte de la composición de la aplicación. | ### Superficies del producto y neutras | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | paletteCloudLight | #F5F7F9 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteCloudNormal | #E8EDF1 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteInkDark | #252A31 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteInkLight | #657890 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteInkNormal | #4F5E71 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteProductLight | #E1F4F3 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteProductNormal | #008F7B | Usa superficies sobrias y texto legible en torno al color de acción del producto. | | paletteProductDark | #007061 | Usa superficies sobrias y texto legible en torno al color de acción del producto. | ## Guía completa del sistema de diseño Kiwi Orbit Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Diseño de selección de viajes del sistema de diseño Kiwi Orbit ### Presenta la ruta antes de los extras > El resumen de la ruta muestra los códigos de los dos aeropuertos, los nombres de las ciudades y una duración ficticia antes de las opciones de equipaje. Así, el contexto de compra permanece visible mientras el usuario compara los extras. La línea discontinua es una ilustración original de CSS, no un gráfico de rutas de una aerolínea ni una promesa sobre un servicio real. ### Separa las opciones del total Los viajeros y el equipaje aparecen a un lado, y el desglose del precio se muestra junto a ellos. El mismo estado determina tanto los controles seleccionados como los importes. En el móvil, el resumen aparece después de las opciones en el orden del documento, para que quede claro qué datos explican el total. ## Color del producto y comentarios del sistema de diseño Kiwi Orbit ### Usa la familia del producto para la acción principal El paquete de tokens proporciona una acción de producto verde con tonos diferenciados para hover y active. La referencia muestra los valores exactos de la función del botón, en lugar de depender de un tono de verde de marca supuesto. Las superficies neutras en tonos nube enmarcan los extras seleccionables sin hacer que todos los paneles compitan con la acción de revisión. ### Haz que los comentarios sean específicos para el resultado La alerta de éxito nativa indica «Selección revisada localmente» y muestra la cantidad de viajeros y el total. Se borra cada vez que cambia una opción. Así, una confirmación verde anterior no puede seguir visible como si validara un conjunto de extras recién editado. ## Tipografía y jerarquía de precios del sistema de diseño Kiwi Orbit ### Usa los estilos de texto nativos para el contenido explicativo Orbit ofrece estilos de texto de cuerpo pequeño de 13 px y normal de 15 px, además de opciones de mayor tamaño. El ejemplo usa los componentes Text y Heading nativos, mientras que los códigos de ruta y el total tienen un énfasis propio. El navegador usa aquí una pila de fuentes alternativas documentada; no se carga ninguna fuente de marca de Kiwi.com de forma silenciosa. ### Mantén las unidades junto a los importes Cada precio del equipaje indica que es por viajero. El desglose multiplica cada extra seleccionado por la cantidad de viajeros, y el total destaca visualmente más que sus partidas. La unidad no debe desaparecer en móviles, porque una cifra grande y llamativa sin especificar su alcance puede interpretarse fácilmente de forma incorrecta. ## Escalas de radios y espaciado del sistema de diseño Kiwi Orbit ### Diferencia los controles de las superficies más amplias La escala de radios actual incluye valores de 2, 4, 6, 8, 12 y 16 px, además de las opciones sin radio y completo. Los paneles de ruta y resumen usan esquinas de 12 px, mientras que los controles nativos conservan sus propias reglas de tema. Aplicar el radio más grande a cada elemento anidado haría que el formulario perdiera jerarquía. ### Mantén intacta la fila de opciones cuando se ajuste en varias líneas Una fila de equipaje agrupa la casilla nativa, el texto complementario sobre la franquicia y el precio. El contenido descriptivo dispone de un ancho flexible, mientras que el precio se mantiene legible. La página pasa a una columna antes de que cualquiera de las dos regiones principales quede demasiado estrecha para permitir la comparación. ## Casillas y selectores controlados del sistema de diseño Kiwi Orbit ### Usa las etiquetas de los componentes y los campos de información Checkbox recibe la etiqueta visible y la información complementaria mediante propiedades públicas. Select recibe una etiqueta y opciones explícitas para elegir entre uno y cuatro viajeros. Estas composiciones nativas conservan su comportamiento de interacción y etiquetado, sin recurrir a un div con apariencia de control de equipaje en el que se pueda hacer clic. ### Modela cada extra de forma independiente El equipaje de cabina y el equipaje facturado son booleanos independientes. La aplicación no da a entender que seleccionar uno deseleccione automáticamente el otro. Esta es una política de ejemplo deliberadamente sencilla; una aerolínea real podría ofrecer paquetes mutuamente excluyentes o franquicias específicas para cada pasajero, que requerirían un modelo distinto. ## Cálculo y revisión de la selección del sistema de diseño Kiwi Orbit ### Calcula el total con una sola fórmula El ejemplo calcula el número de viajeros multiplicado por la tarifa base más los extras seleccionados por persona. No guarda un total editable por separado que pueda dejar de coincidir con las opciones visibles. Todos los precios y las franquicias son expresamente ficticios y no corresponden a ofertas actuales de Kiwi.com. ### Guarda una instantánea de la revisión La revisión guarda juntos el número de viajeros, las opciones de equipaje y el total. Al cambiar cualquier control, se borra esa instantánea. Así, el ejemplo demuestra la coherencia del estado sin presentar un clic local como una reserva, un pago, una comprobación de disponibilidad en tiempo real o una cotización definitiva. ## Comentarios accesibles sobre la selección del sistema de diseño Kiwi Orbit ### Comprueba conjuntamente las etiquetas y el recálculo Con el teclado o el puntero, se puede elegir el número de viajeros y activar cualquiera de las dos opciones de equipaje mediante los controles nativos. El resultado de la revisión aparece en una región de estado. No se inventa ninguna validación para el equipaje opcional: dejar sin seleccionar ambos extras es un estado válido para esta tarifa ficticia. 1. Selecciona dos viajeros y añade equipaje de cabina. 2. Añade equipaje facturado y comprueba los tres importes del desglose. 3. Revisa la selección localmente, cambia una opción y confirma que desaparezca el mensaje de éxito anterior. ### Evita consecuencias ocultas La página explica el alcance ficticio encima del formulario y junto al total. La acción es «Revisar selección local», no «Comprar» ni «Reservar». Todos los cambios permanecen en la página y no se solicitan datos personales de los pasajeros, ya que no son necesarios para una demostración. ## Proveedor y estilos compilados del sistema de diseño Kiwi Orbit ### Usa la versión estable correspondiente Este ejemplo fija la versión de los componentes React en 27.7.0 y la de las referencias a tokens en 11.0.0. Importa OrbitProvider, el paquete defaultTheme y el archivo compilado lib/tailwind.css. Si se omite esa hoja de estilos, los estilos de los componentes basados en utilidades quedan incompletos, aunque se renderice el árbol de React. - OrbitProvider y el paquete defaultTheme. - Archivo compilado lib/tailwind.css de components 27.7.0. - Node.js 22 o posterior para el entorno de compilación del paquete. ### Especifica claramente los requisitos de despliegue El paquete requiere Node.js 22 o posterior. La entrada de Vite proporcionada se puede reproducir con ese entorno y la versión fijada del paquete de componentes. La entrada original de CSS se ocupa únicamente de la composición del viaje; los controles nativos conservan los estilos publicados de los componentes y el comportamiento del proveedor. ## Ejemplos de componentes del sistema de diseño Kiwi Orbit ### main.jsx — ejemplo completo y funcional Elige el equipaje y revisa un total de ejemplo. El código fuente siguiente es la entrada completa de React, incluidos todos los estados y la validación. ``` 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