12 ms·

Orbit – open-source design system

128 points by vepor 5y ago

underyx 5y ago
I used to work at Kiwi.com when Orbit was started. It grew into such an impressive framework! It’s been advertised as “components for your travel site” for a long while but it’s totally appropriate for any kind of site.
- yedpodtrzitko 5y ago
  I, too, used to work at Kiwi.com when Orbit was started. If there was one thing which was consistent, it was definitely Orbit. It's nice to see they're keep pushing it forward.
- Terretta 5y ago
  I found that phrase confusing -- what makes it or made it for travel sites in particular?
thdxr 5y ago
I've been doing a lot of research into design systems and one thing that's lacking in most of these documentation sites is examples build with the component library. It's hard for me to get a feel for it without being able to click through a real application. Also, paid managed services on the backend are super common. I want a paid frontend component library. There are very few of these and I think there's room for an all star frontend team to sell professionally maintained, always improving components. Even on day 1 of my company I'd be willing to pay $100s a month for this
- robertlagrant 5y ago
  There are a few such as Tailwind UI that are paid-for component libraries. https://tailwindui.com https://tailwindui.com
  - thdxr 5y ago
    I've been a subscriber to TailwindUI since it launched. Unfortunately it's not well suited for complex B2B SaaS products that have high information density UIs
- arcturus17 5y ago
  Many companies do that for enterprise components, especially graphs and tables. For more general use I guess it’s hard to compete with the likes of Material UI.
- radley 5y ago
  > one thing that's lacking in most of these documentation sites is examples build with the component library Check out their main site kiwi.com for examples. This is part of a trend with enterprise design teams of open-sourcing their design systems. In some cases, there are direct benefits to clients and partners. Otherwise, it's a status project / time-filler.
milanseitler 5y ago
There's not many open-source design system documentations, that's a big plus
- thebeardisred 5y ago
  I just wish that the getting started with them (for designers) wasn't "Step 1: start by logging into Figma"
  - milanseitler 5y ago
    That's for Kiwi employees, open source content is in the other tab
- ssddanbrown 5y ago
  Just in the interest of transparency, You're posting this positive comment as someone that actively works on this project?
kaycebasques 5y ago
The title ("Orbit – open-source design system documentation") is a bit confusing to me (I'm a technical writer so anything with "documentation" catches my eye). It seems like the provided link is just the documentation for a collection of open source web components? Or is the documentation itself open source? I'm not trying to be pedantic here, just asking in case I'm missing something. In other words it seems like the word "documentation" isn't necessary in the title in this case.
- vepor 5y ago
  Yep, sorry, it's probably a bit confusing. The whole design system is open-source, from its components to also the documentation. You can find it on the GitHub repository: https://github.com/kiwicom/orbit/tree/master/docs https://github.com/kiwicom/orbit/tree/master/docs
  - garmaine 5y ago
    Whole system of what, exactly? Title doesn’t make that clear.
    - vepor 5y ago
      It's a design system. You can read about it more here: https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969 https://uxdesign.cc/everything-you-need-to-know-about-design... But basically it's a system how to design and develop applications (mostly mobile or frontend). It contains most of the time some visual foundation, standardized components, guidelines etc.
      - elric 5y ago
        I think the point that parent was making is that it isn't at all clear what orbit is about. A "design system" is such an extremely vague term. Houses? Cupboards?
        city41 5y ago
artificialLimbs 5y ago
If orbit technical team reads this: How is your website so fast? I mean, there is literally no wait when I click anything... it's face peeling fast.
- vepor 5y ago
  It uses https://www.gatsbyjs.com/ https://www.gatsbyjs.com/ that does all the necessary magic.
erk__ 5y ago
Interestingly enough this site is blocked on the university I am at network "Threat detected: Integration." No idea why.
tajul7 5y ago
Great site. this site helpful. I love this one.
deleted 5y ago
[deleted]
deleted 5y ago
[deleted]
Jubed 5y ago
Title doesn’t make that clear. But this is very helpful resources.
traceroute66 5y ago
The problem I have with all these self-promotion frameworks (i.e. CSS frameworks open sourced by commercial entities) is that they are inherently at the mercy of said companies. Take Zurb Foundation for example, as far as I can tell its basically become abandonware. Foundation 7 has been promised forever and yet we're still stuck with Foundation 6 which has all sorts of bugs and gotcha's that will catch people out because the framework is out-of-date in comparison with the technology that people are using to access websites. The only exception to this is Twitter Bootstrap which has been consistently kept up to date. Whilst I don't agree with some of the design decisions in the latest Bootstrap 4, it remains a solid, well maintained framework.
- vosper 5y ago
  I think Material UI is going pretty strong, too? They've just released a beta of version 5. I think overall the comes-from-corporate-entity frameworks are probably still a better bet than the one-persons-pet-project ones - there are loads of those, too.
  - chucky 5y ago
    Material UI isn't coming from a corporation in the same way as the others though. Material UI is an open source implementation of Google's Material Design system, but it's not in use by Google AFAIK.
foolinaround 5y ago
What is specific in this UI design system pertaining to 'travel projects'?
- omk 5y ago
  This was the most confusing bit for me. Is the author exercising some figure of speech or is it literally meant for travel project?
- fumplethumb 5y ago
  I was also confused about this. It appears this library includes components specifically geared for travel-oriented applications. Still seems like most of the components are pretty generic, but here are some examples that stood out to me: - Seat: https://beta.orbit.kiwi/components/visuals/seat/ https://beta.orbit.kiwi/components/visuals/seat/ - Stopover arrow: https://beta.orbit.kiwi/components/visuals/stopoverarrow/ https://beta.orbit.kiwi/components/visuals/stopoverarrow/
mxstbr 5y ago
I'm a big fan of Orbit and regularly check out their docs just to see what's new! They're so well done.
radley 5y ago
> By default, our libraries use Circular Pro, which isn’t an open font. That's a big red flag for an open-source design system. Design-wise, the Figma files look nice but are poorly built. Most of the text and colors don't use styles, and the few color styles they use are in a private library. There's some documentation (good) but the components make a lot of mistakes. You're better off starting from scratch.
- a2800276 5y ago
  Is Figma open source?
  - radley 5y ago
    Figma is a professional design application, considered by many to be the most advanced: https://www.figma.com https://www.figma.com The base tier is free.
  - amingilani 5y ago
    Figma isn't bundled with your application.

128 points by vepor 5y ago

I used to work at Kiwi.com when Orbit was started. It grew into such an impressive framework! It’s been advertised as “components for your travel site” for a long while but it’s totally appropriate for any kind of site.

yedpodtrzitko 5y ago
I, too, used to work at Kiwi.com when Orbit was started. If there was one thing which was consistent, it was definitely Orbit. It's nice to see they're keep pushing it forward.
Terretta 5y ago
I found that phrase confusing -- what makes it or made it for travel sites in particular?

thdxr 5y ago

I've been doing a lot of research into design systems and one thing that's lacking in most of these documentation sites is examples build with the component library. It's hard for me to get a feel for it without being able to click through a real application. Also, paid managed services on the backend are super common. I want a paid frontend component library. There are very few of these and I think there's room for an all star frontend team to sell professionally maintained, always improving components. Even on day 1 of my company I'd be willing to pay $100s a month for this

robertlagrant 5y ago
There are a few such as Tailwind UI that are paid-for component libraries. https://tailwindui.com https://tailwindui.com
- thdxr 5y ago
  I've been a subscriber to TailwindUI since it launched. Unfortunately it's not well suited for complex B2B SaaS products that have high information density UIs
arcturus17 5y ago
Many companies do that for enterprise components, especially graphs and tables. For more general use I guess it’s hard to compete with the likes of Material UI.
radley 5y ago
> one thing that's lacking in most of these documentation sites is examples build with the component library Check out their main site kiwi.com for examples. This is part of a trend with enterprise design teams of open-sourcing their design systems. In some cases, there are direct benefits to clients and partners. Otherwise, it's a status project / time-filler.

milanseitler 5y ago

There's not many open-source design system documentations, that's a big plus

thebeardisred 5y ago
I just wish that the getting started with them (for designers) wasn't "Step 1: start by logging into Figma"
- milanseitler 5y ago
  That's for Kiwi employees, open source content is in the other tab
ssddanbrown 5y ago
Just in the interest of transparency, You're posting this positive comment as someone that actively works on this project?

kaycebasques 5y ago

The title ("Orbit – open-source design system documentation") is a bit confusing to me (I'm a technical writer so anything with "documentation" catches my eye). It seems like the provided link is just the documentation for a collection of open source web components? Or is the documentation itself open source? I'm not trying to be pedantic here, just asking in case I'm missing something. In other words it seems like the word "documentation" isn't necessary in the title in this case.

vepor 5y ago
Yep, sorry, it's probably a bit confusing. The whole design system is open-source, from its components to also the documentation. You can find it on the GitHub repository: https://github.com/kiwicom/orbit/tree/master/docs https://github.com/kiwicom/orbit/tree/master/docs
- garmaine 5y ago
  Whole system of what, exactly? Title doesn’t make that clear.
  - vepor 5y ago
    It's a design system. You can read about it more here: https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969 https://uxdesign.cc/everything-you-need-to-know-about-design... But basically it's a system how to design and develop applications (mostly mobile or frontend). It contains most of the time some visual foundation, standardized components, guidelines etc.
    - elric 5y ago
      I think the point that parent was making is that it isn't at all clear what orbit is about. A "design system" is such an extremely vague term. Houses? Cupboards?
      - city41 5y ago

artificialLimbs 5y ago

If orbit technical team reads this: How is your website so fast? I mean, there is literally no wait when I click anything... it's face peeling fast.

vepor 5y ago
It uses https://www.gatsbyjs.com/ https://www.gatsbyjs.com/ that does all the necessary magic.

erk__ 5y ago

Interestingly enough this site is blocked on the university I am at network "Threat detected: Integration." No idea why.

tajul7 5y ago

Great site. this site helpful. I love this one.

deleted 5y ago

[deleted]

deleted 5y ago

[deleted]

Jubed 5y ago

Title doesn’t make that clear. But this is very helpful resources.

traceroute66 5y ago

The problem I have with all these self-promotion frameworks (i.e. CSS frameworks open sourced by commercial entities) is that they are inherently at the mercy of said companies. Take Zurb Foundation for example, as far as I can tell its basically become abandonware. Foundation 7 has been promised forever and yet we're still stuck with Foundation 6 which has all sorts of bugs and gotcha's that will catch people out because the framework is out-of-date in comparison with the technology that people are using to access websites. The only exception to this is Twitter Bootstrap which has been consistently kept up to date. Whilst I don't agree with some of the design decisions in the latest Bootstrap 4, it remains a solid, well maintained framework.

vosper 5y ago
I think Material UI is going pretty strong, too? They've just released a beta of version 5. I think overall the comes-from-corporate-entity frameworks are probably still a better bet than the one-persons-pet-project ones - there are loads of those, too.
- chucky 5y ago
  Material UI isn't coming from a corporation in the same way as the others though. Material UI is an open source implementation of Google's Material Design system, but it's not in use by Google AFAIK.

foolinaround 5y ago

What is specific in this UI design system pertaining to 'travel projects'?

omk 5y ago
This was the most confusing bit for me. Is the author exercising some figure of speech or is it literally meant for travel project?
fumplethumb 5y ago
I was also confused about this. It appears this library includes components specifically geared for travel-oriented applications. Still seems like most of the components are pretty generic, but here are some examples that stood out to me: - Seat: https://beta.orbit.kiwi/components/visuals/seat/ https://beta.orbit.kiwi/components/visuals/seat/ - Stopover arrow: https://beta.orbit.kiwi/components/visuals/stopoverarrow/ https://beta.orbit.kiwi/components/visuals/stopoverarrow/

mxstbr 5y ago

I'm a big fan of Orbit and regularly check out their docs just to see what's new! They're so well done.

radley 5y ago

> By default, our libraries use Circular Pro, which isn’t an open font. That's a big red flag for an open-source design system. Design-wise, the Figma files look nice but are poorly built. Most of the text and colors don't use styles, and the few color styles they use are in a private library. There's some documentation (good) but the components make a lot of mistakes. You're better off starting from scratch.

a2800276 5y ago
Is Figma open source?
- radley 5y ago
  Figma is a professional design application, considered by many to be the most advanced: https://www.figma.com https://www.figma.com The base tier is free.
- amingilani 5y ago
  Figma isn't bundled with your application.