Orbit – open-source design system | Hacker News Reader

Orbit – open-source design system

beta.orbit.kiwi

128 pointsvepor39 comments

> 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.

Is Figma open source?

Figma is a professional design application, considered by many to be the most advanced: https://www.figma.com

The base tier is free.

Figma isn't bundled with your application.

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

There are a few such as Tailwind UI that are paid-for component libraries. https://tailwindui.com

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

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.

> 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.

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.

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

Whole system of what, exactly? Title doesn’t make that clear.

It's a design system. You can read about it more here: 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.

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?

"Design system" is a pretty well defined term in the world of UX. For example: https://uxdesign.cc/everything-you-need-to-know-about-design...

“Design system” is pretty well defined in every field. And defined differently, which is the problem. I assure you engineering design is not the same thing. “UX design system” would have been better at least.

It's clear it's a [D]esign system for [D]esigners when you go to the site and see things like Colors, Typography, Spacing, Tone, etc.

It's fine if things are targeted! I don't expect all my technical documentation to fully namespace all their ambiguous terms in case a non-engineer shows up. This site is for [D]esigners and that's cool.

The problem is it's not clear about what the design system is for. After some digging I figured out it's for React. It shouldn't take that much time and effort just to figure out what it's even for. Why not just say 'open-source design system for React'? Why is it all so vague? Plus on the top of the page it says 'Open source design system for your next travel project.' What does that mean? I assumed it had something to do with traveling.

Design system is common terminology for designers, akin to OOP.

I also have some trouble figuring out which of the following ways to parse it

(open-source) ((design system) documentation)

(open-source design) (system documentation)

(open-source (design system)) (documentation)

I call strings like that "noun soup".

These nouns connect arbitrarily like molecules in a liquid, forming one completely opaque (and barely palatable) whole.

Ok, we've taken documentation out of the title above.

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

This was the most confusing bit for me. Is the author exercising some figure of speech or is it literally meant for travel project?

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/

- Stopover arrow: https://beta.orbit.kiwi/components/visuals/stopoverarrow/

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.

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.

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.

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.

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.

I found that phrase confusing -- what makes it or made it for travel sites in particular?

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.

It uses https://www.gatsbyjs.com/ that does all the necessary magic.

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

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

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

I just wish that the getting started with them (for designers) wasn't "Step 1: start by logging into Figma"

That's for Kiwi employees, open source content is in the other tab

Just in the interest of transparency, You're posting this positive comment as someone that actively works on this project?

Reply on news.ycombinator.com