Leverege Design System: Colors & Typography

?? Turn the sound on and go ahead!

Some highlights
? Our color system is made using the HSL color model. Sometimes it’s enough to change only the Hue parameter to change the entire brand palette.
? All brand colors are presented in several shades. However, only the most necessary of them are included in the library.
? The style names use flexible numbering from 050 to 900. For each category, we can create up to 10 colors or even more. The analogy is taken from the font-weight property. In our case, 900 is the darkest color, and 050 is the lightest. This allows us to create logical palettes that are very easy to expand & crop. Less time for naming, more time for design.
? Type aligns to the 4dp baseline grid. But can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.

It's pretty hard to explain everything using only text so I'll share some screenshots & videos about organizing component libraries in Figma on my Twitter, so stay tuned.

?? In the meantime, let me know what you think about this animated presentation.

We’re available for new IoT projects! Drop us a line at [email protected]

Want to see more projects by our team? Visit our profile.