What is Orbit?
Orbit is an open-source design system originally created by Kiwi.com, a travel booking platform. It gives designers and developers ready-to-use tools, like buttons, icons, and rules for how things should look. These tools help make websites and apps look the same (consistent) and easy to use for everyone, whether on a computer or a phone.
Orbit supports cross-platform development (web and mobile), emphasizes accessibility, and provides customizable design tokens to meet branding needs.
The Evolution and Versions
Improved some features (e.g., Toast now supports icons) and fixed bugs.
Removed the size property from InputField and Select to make all components the same size.
Let apps handle translations instead of using built-in tools for more flexibility.
Added support for React 18 and removed old tools like react-uid.
Replaced the ClickOutside component with a simpler useClickOutside hook.
Started switching from Flow to TypeScript for better developer support.
Updated design with new tokens (e.g., title0), fonts, colors, and spacing for a cleaner look.
Improved components like Box and Stack with new property options, replacing old ones.
Replaced the readOnly property in Radio and Checkbox with a clearer disabled option.
Made Seat components require meaningful text for better accessibility.
Limited properties like label and price to only accept text to avoid layout issues.
Applicable industries for reference
The Orbit Design System is very flexible. It was first made for travel websites. However, it has many helpful tools. So, it can be used in many other industries.
Travel and Tourism Industry: Orbit was originally created for Kiwi.com, making it particularly well-suited for travel-related products.
E-commerce and Retail: Orbit’s clean and consistent UI components are ideal for creating online shopping experiences.
Entertainment and Media: Entertainment platforms can leverage Orbit for creating visually appealing and user-friendly interfaces.
Corporate and Internal Tools: Companies can use Orbit to streamline the development of internal tools and dashboards.
Use Case Scenarios
A Guide and Template for Orbit
Style Template File for Motiff
Effective Use of the Color System
The Orbit Design System's color foundation ensures consistency, accessibility, and clarity. By using predefined color categories like primary, secondary, text, background, and status colors, designers can create cohesive and professional interfaces. Orbit makes sure colors are easy to see by checking how different colors look together (contrast). It even tests how colors appear to people who are colorblind, so everyone can use the design easily.
Typography Hierarchy and Readability
The typography of the Orbit Design System ensures clear communication and a consistent visual hierarchy in digital interfaces. By changing font size, thickness, and spacing between lines, it highlights important information and keeps everything balanced. Orbit changes the size and spacing of text to fit different screen sizes. Whether you’re using a phone, tablet, or computer, the text is always clear and easy to read.
Icon Design Principles
The Orbit Design System's icon design emphasizes clarity, consistency, and adaptability. Each icon should show its meaning without extra details. Orbit’s icons look great no matter their size or the device you’re using. All icons follow the same style, size, and line thickness to make everything look consistent.
Orbit Components Templates
A-B
C-G
H-M
N-S
T-Z
Accessibility in Orbit
The Orbit Design System helps people make great travel apps and websites. It makes sure everything looks the same (consistent), works fast (efficient), and is simple to use (user-friendly). It’s also designed so that everyone, including people with disabilities, can use it easily. The tools are so easy to understand that you don’t need to spend time reading long guides to learn how to use them.
Orbit offers sufficient flexibility, allowing users to customize and adapt components to their specific needs while maintaining consistency and long-term maintainability. In terms of transparency and collaboration, it fosters open communication with users through a public roadmap and feedback channels.
Other Resources
Kiwi: An innovative online travel platform offering users cost-effective flight, train, and bus booking combinations worldwide.
Introduction to the Orbit Design System: Luděk Vepřek, the head of the Orbit Design System, provided a detailed introduction to the Orbit Design System.