Jitta’s Design Language System | Part I
How we use the design language system to drive our products.
Nowadays, websites and apps are growing up rapidly. For developers and designers, we all need tools for developing sites or apps to deliver high-quality products to our customer as fast as possible as well as here, Jitta.
At Jitta, we build platforms that help investors create better return through simple investment methods which have both website and app. Therefore, as a design-driven company, we propose to build our new design language system for use across all our platforms since last year. And finally, we found that Airbnb is building their design language system as well which supports our idea. You can read their story here.
Why we need the design system?
Jitta is a start up company. So we would like to ship products to our customers, learn and fix it as fast as possible. So we need to find a way that could make things happen to all platforms at once. And the answer is to make it universal by dividing things into sub sections or “components” that are small enough to have the same look on each platform. Of course, this is a response to use React as the front-end development for all platforms as well.
Let’s start with base styles
From Airbnb’s story, they suggested laying the foundation first. Absolutely, we will do the same things here which are typography, colors, icons, and spacing. These base styles are really good guidelines to make all designers in your team working together in the same direction and style. Moreover, if you build and design components from these bases, it can also help decreasing redundant code in development too.
It is not that easy!
Yes, it is not. The difficult part is the typography. As Airbnb’s design has to support multi languages, we are on the same page. We have to design for supporting the Thai language too and most Thai fonts always have problems. For example, there is so much gap between Helvetica Neue and DB Helvethaica X that we use for Thai at the same font size. This can make a huge UI problem when you switch the languages on your site.
So what now? We have got our work around but it may not be the best solution. The solution is to scale the font size of Thai font as much as possible to make it closest to Helvetica Neue size by using web-font generator to fix X-height of the font.
In addition, you should be very careful about using font size across platforms. Some font sizes may be oversized in mobile phone or tablet. But that is not a big deal as you can multiply a factor to your base font size that should be work as well.
Now, we have already got our base styles so let’s build a component with this system next time.
Happy designing. :)
