DESIGN SYSTEM

Part 1 - Visual styles

Introduction

As the field of digital design has expanded in recent years, the speed and scope at which UI screens must be produced has also grown. To keep up with this demand, many product design teams rely on robust design systems to manage their projects at scale.

The following visual styling is just a small part of a larger project. Using a pre-established design guideline, these UI tokens have established the brand's principles and helped to design the basic components of the project, as well as more complex elements.

Please note that the following example of a design tokens system is just a sample and adheres to the rules established for this particular brand.

Typography

Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the layout. Text sizes, styles, and layouts were selected to balance content.

The site uses Lato single-family in three styles: regular, bold, and black. The italic style will be performed by code, not with an extra font.

Colours

According to the design guidelines, we differentiate primary, secondary, and tertiary palette colours for brands to identify each product and shared neutral colours to make the interface more usable.

Each color palette has a Reference color from which the others have been added, HEX code, and token name. Circles located inside the squares show the colors that we can use for texts for each tone. Are selected to ease the readability: all of them pass the bright/contrast test according to WACAG 2.0 at least for the AA level.

Spacing & corners

Space is the distance between objects in your design. It should be used to complement the purpose of a page, by creating a hierarchy and helping the content become more useful and understandable.

Spacing is particularly suitable for creating visual groupings —the more items are related, the closer they should be to each other. In the same way, we can complement the function, i.e. use closer spacing for larger amounts of information, but also use looser spacing for more focused content. Use these spacings in a way that is consistent with the rest of the experience. Be harmonious, my friend.


Since the human brain attributes this condition to everything it experiences, rounded corners give off the following vibes —safe, friendly, and hence, approachable. So the human-centered design should incorporate these attributes over the sleek, sharp corners: rounded corners are perfect for grids, they help with a friendly interaction, are space-saving and draw attention to the content and not the component.

On the contrary, sharp corners emphasize a sign of danger or lack of safety. Therefore, our minds have trained to avoid them as much as possible. Rounded corners look more appealing, simply because they are easier on the eyes.

Opacity, depths & shadows

Opacity correlates to transparency or the amount of light that passes through an object. An object with high opacity has low transparency, meaning little or no light can pass through. Use this technique sparingly and test the design in multiple environments to ensure that it works and looks as you intended.

When we add shadows to an element, it gives the impression that the element is floating and, therefore, it is above another element or, on the contrary, it is below it.

You can use this resource of external shadows to point out the importance of that element or those elements in a layout but we recommend using them carefully so as not to give the impression that all the elements are "important". The larger the size of the element (both in height and width) we recommend using a larger shadow.

We also wanted to include inner shadows to show that there are elements that are below others.

To give depth to the different elements of the interface, we sometimes wisely use shadows of different sizes to highlight elements over others..