On this page
How it started
In 2021, every product team at FLYR was building their own tables, buttons, and forms. Each new feature meant reinventing the wheel. I saw designers spending weeks on basic UI instead of solving actual user problems.
I started small: extracted 20 components from existing screens, turned them into Figma assets, added proper spacing and color tokens. Showed it to leadership. They got it. In 2023, we hired a designer and two devs. Four people, one mission: stop rebuilding the same stuff.
In 2025, we had 50+ core components and 80 patterns, shared libraries and documentation. But the real win? FLYR used this system to build a complete airline booking experience for Riyadh Air in 6 months. That deal helped close a $295M financing round.
The system we built
Orville Design System — yeah, named after the Wright brothers. We're an airline tech company, had to go there.
The Wright brothers made 12 seconds of controlled flight in 1903. It was crude, but it worked.
120 years later, an A320neo flies 6,000 km non-stop carrying 180 people. That didn't happen by accident — it happened through systematic engineering, standardization and incremental transformation.
That's what design systems do for digital products. Orville took FLYR's early UI experiments and turned them into production-grade infrastructure that now powers every product we ship.
What it includes
- 50 core React ↔ Figma components
- All design decisions encoded in one source of truth
- 380 icons
- Tabler-based, industry-specific, filled and outlined
- Full data visualization library
- Charts, graphs, tables with built-in accessibility
- Living documentation
- Confluence, Zeroheight, Storybook with version history
The foundation
- Design tokens
- 3 tiers sync between code and Figma Variables and Token Studio
- CAM02 color space
- Matches how humans see color in different lighting
- 4pt grid system
- Margins, paddings, space
- Typography
- Scale and system-ui fonts
Prerequisites
- Subject definition
- Design System is the official story of how organization designs and builds digital interfaces.
- Area definition
- Standards, assets, and processes to be shared across an organization.
- Team mission
- Make the ultimate user experience delivered faster.
- Team deliverables
- Design System assets, standards and processes based on the organization priorities.
The foundation
4pt grid system
Apllied to margins, paddings, gaps, widths, heights, border-radii.
CAM02 (Ch) color space
This model shows color the way we actually see it in different lighting, backgrounds, and surroundings. In CAM02, the distance between colors matches how people really notice color differences, and it adapts to light by considering white point, brightness, and how our eyes adjust — something sRGB, HSV, and Lab do not do well. It also keeps hue steady when light changes, while chroma reflects how strong or colorful a tone looks in real life.
Icon library
- Guidance
- Documentation, contribution template, baking process
- Filled and outlined
- Scalable once baked, any size can be defined and used
What made it work
Clear language
We documented every state (rest, hover, focus, disabled), every slot (leadingVisual, trailingVisual), every intent (primary, danger, warning). Decision trees help pick the right component based on the use case. No more guessing what a component should do.
- State
-
- rest
- hover
- pressed
- dragged
- State
-
- focus
- disabled
- read-only
- inactive
- Slot
-
- trailingVisual
- leadingVisual
- icon
- text
- Intent
-
- neutral
- primary
- success
- danger
- warning
- Object
-
- bg
- icon
- text
- border
- shadow
- Grade
-
- min
- weak
- medium
- strong
- max
Portals
Confluence, Zeroheight, Storybook portals give designers, developers and product owners a searchable catalogue of components, usage examples and version history, eliminating the need for ad-hoc tickets.
Solid processes
Want to add a component, new property, or maybe an icon? Follow the template. Want to deprecate something? We have a plan for that too. Changes go through peer review, releases happen in stages.
Figma updates trigger Slack workflows
Deprecation process in Figma
Old components are removed in a planned way with clear instructions on how to update them. Every change goes through a formal request and peer-review process. Releases are done in stages through automated pipelines, and the documentation is updated each time, giving clear guidance for future changes.
Process description
- totally remove a Figma component from the lib without any replacement.
- deprecate and then remove a Figma component from the lib providing a replacement.
Procedure
- Duplicate original component
- duplicated component after applying all necessary changes must be published providing release notes
- original component must be renamed
- description field of the Figma component should be filled up with instructions (see template below)
- Rename
- ⚠ use a warning sign in the title: ⚠ Button
- add Banner with a message in order to keep visual separation from other components on the page
- Provide timelines
- by default any deprecated component in Figma can be removed in 2-3 months
- Tips
- Deprecating/removing library components will not change existing design layouts
- Restore Component button can be used in order to restore missing or removed components
- Communication link must be provided
Message template
Description
- New version: Component Name (e.g. TableFooter)
- Deprecated: MMMM YYYY (e.g. February 2024)
- To be removed: MMMM YYYY (e.g. April 2025)
- Reason: Describe reasons in 1-2 sentences, stay specific (e.g. Refactoring of the [prop name] was causing breaking changes)
Tips
- Deprecating/removing library components will not change your existing design layouts.
- Deprecated components will be removed after 2–3 months.
- Use the Restore Component button to restore missing or removed components, however consider switching to a new version first.
- Need help? Reach us in #design.
Core components
In code
Built with React.js, supported with Storybook and covered with Omlet.dev statistics.
In Figma
❖ Accordion
❖ Numeric
❖ Checkbox
❖ SegmentedControl
❖ Button
❖ ListItem
❖ Stepper
❖ Banner
❖ Table
Adoption
We didn't just build it and hope people would use it. We ran workshops. We answered questions in Slack. We tracked usage.
React library
- 100%
- Total code components
- ~2k
- React component usage gains
Figma libraries
Figma components adoption succeeded through targeted workshops and learning sessions. Components remain one of the key building blocks that designers can influence through the proper contribution process. Documentation keeps everything connected and accessible.
- 96.6%
- Figma components inserts
What the team thinks
We survey twice a year. Latest results:
- 95.5%
- Designer sentiment
- 87.5%
- Engineer sentiment
The system got its own budget. We hired another designer. Every new FLYR product uses Orville now (as of July 2025).
The Riyadh Air challenge
In 2024, FLYR needed to prove it could be more than a pricing tool — it had to become a full airline retail platform. Riyadh Air wanted a shopping cart, seat selection, ancillaries, payment flow. Standard airline stuff, but built modularly so other carriers could use it too.
Without a shared UI foundation, this would've taken 18+ months.
We had 12. Made it in 6.
My part
Coordinated a cross-functional team (designer + two front-end developers), making sure priorities matched company goals and that visuals and UI layouts stayed consistent.
We took existing Orville components and combined them into retail patterns.
- Shopping Cart
- Product Catalog
- Ancillary Selector
- Order Search
No new components needed. Just smart composition.
Travel Startup Flyr Raises $295 Million in Equity and Debt.
Results
Shipped the entire booking flow (search → seat selection → cart → payment) in under 6 months. Riyadh Air announced the partnership. Bloomberg called them "the world's first digitally native airline." The $295M funding followed.
Now when product teams need a new feature, they don't ask "how do we build this?" They ask "which components do we use?"
Lessons learned
- Start small
- Don't build 200 components on day one. Build 20 good ones that solve real problems.
- Get buy-in early
- Leadership needs to see value fast. Show metrics, show time saved, show money made.
- Adoption is a product problem
- The best design system in the world is useless if no one uses it. Train people. Answer questions. Make it easy.
- Documentation > Perfection
- A well-documented mediocre component beats a perfect undocumented one every time.
- Design systems enable business outcomes
- We didn't sell "50 components." We sold "ship products faster, close bigger deals."
In press
We will be at the forefront of innovation when it comes to booking travel experiences.
Riyadh Air will be the world's first digitally native airline.
Together, Riyadh Air and FLYR are transforming the passenger experience with shopping cart capabilities for passengers at every touch point.
Offer & Order: Built Right. Designed to Deliver.
