Yes, I am. But I was the one designing the icons too, that’s why I am the one sharing them.

You can assume everything is done for the sake of traffic. But the reality is, even though it is quite nice to feel appreciated by the community, the kind of traffic we want is from prospects, more than fellow designers. And DN won't get us that. Believe it or not, it was actually an altruistic giveaway, both this one and the Handbook ;)

Hello Jayant,

We use Sketch and InVision for these circumstances.

8px is generally the base measure for layout. For the components, we make adjustments based on the given constraints and of course the aesthetics of things.

Yep, generally 4 columns. But there's a tab on one of the Design System I've sent which demonstrates how the grid works in mobile.

We over-think things a bit as well but sometimes it is easier to keep things simple ;) Hope I helped.

Thank you Romain. We've built everything from scratch: using Prismic.io as CMS and Gatsby JS on the Front-End.

Thank you Aaron for taking the stab!

Hey Ben. Thank you for your interest.

I’d like to start by pointing you out to this blog post about the Handbook: https://significa.co/blog/handbook

Just in case you haven’t read it, it sort of explains why we’ve done it, the benefits it brought, and why we made it public. It also refers the 2 good examples that inspired us: one is thoughtbot, the other is to hard to type, Bakken & Baeck if I’m not mistaken.

Anyway, to your point, we’ve been following roughly the same processes and guidelines for quite a while, evolving them along the way. However, things weren’t written down and there wasn’t a source-of-truth, go-to place that consolidated everything. Then as we grew, with more people joining in, more people to explain all the processes and guidelines, we decided to write everything down to ensure everyone’s on the same page: primarily on Notion, 100% internal, then on the website. We have even more stuff, but those can’t be disclosed.

Everyone was involved in the Handbook, the whole team: from copywriting, to designing, to reviewing, to developing. It was an entire team effort.

All it takes is time, defined processes, and methodology.

I hope I answered all your questions, otherwise feel free to email me at rui@significa.co and I’ll answer all your questions ;)

It isn’t a hand either. Maybe should be named Not-a-hand-not-a-book!

Much better!

Cheers! Thank you very much for saving me time: was about to do that myself!

This is the sort of post I love at Designer News. Happy to share my thoughts with you.

As Taylor Palmer said, UI Kits are not based on reality.

One very important thing is to lay out the requirements beforehand. One of the reasons we like to start with Wireframes, besides many others, is precisely because it allows us to have an understanding of all the required components in advance. It will enable us to create the final UI having a much deeper consideration of the components.

In fact, we like to stick to as few components as possible and reuse them likewise – I mean for Products, not for websites – because on the Development end it will also save time. And, as you know, everything comes down to time and budget.

Answering your questions:

1. Once a style is defined it becomes a rule. Then we stick to them and work the Design around the available components. Unless there's a flagrant lack of a certain component, we try to reuse them as much as possible.

2. 20 fonts are just nuts! 6 to 8 sounds good. But keep in mind it will depend on a multitude of factors around the product: complexity, size, etc... So, there's not actually a one size fits all for these situations.

Allow me to share some stuff with you. It is something we create for every product which is then shared with our Development Team. I think it is worth sharing with you. Keep in mind this is private – let's hope not many people see this (that's why I waited a couple of days to reply).

Example 1:Cimple. We kept everything to the bare minimum because it was an MVP and we wanted to develop things a quickly as possible. As you can see, there's only 6 font-sizes and weights. Keep in mind the product was actually delivered based on this system. Case Study for this product coming soon at our website ;) Keep an eye!

Example 1:PN2000 On this one, we used waaaaaay more font sizes and weights than on the previous one. Too many if I'm asked, and most likely during development, some of these were cut-off. But anyway, this product required a different kind of typography treatment and hierarchization, which lead us to have more font styles.

Bottom line is each product is a different product and trying to use the same UI kit in all of them seems like it won't work (in most cases).