Capsules are powerful functionalities of the Digibee Platform, which allow the creation of custom components. Capsules are reusable in many pipelines, without requiring additional licenses. Through Capsules is also possible to share functional units inside and outside your realm.

This article presents the best practices in the creation of Capsules and in the organization of its Collections. With that, you’re able to create more polished Capsules, whether for internal or external use.

Every Capsule belongs to a Collection. Therefore, when creating your first Capsule, it’s mandatory to configure or select a Collection for it.

During the Collection creation, you define the header image and the color that will be applied to all its respective Capsules.

If you're creating a new Capsule, it’s necessary to define the 3 elements that compose its representation on canvas: body, icon and header.

Shape and color of the Capsule, which can be one of the following options:

Illustration displayed in the Capsule body, which serves as a visual reference of what the Capsule goal is. The Platform currently has over 700 icons options for you to choose. You can look for an illustration by typing in the search field words related to the icon characteristics (eg.: write, read, send, download, etc.):

It’s through the header that the user identifies Capsules that belong to a same group, which is being named Collection. The headers are also relevant when making a Capsule public, as they put together a set of functionalities under the same context:

The start point for a Capsule with harmonical appearance is the header, which identifies the Collection.

The red superior band shows where the Collection header will go:

To have an aesthetically pleasant presentation, the Digibee design team has defined pastel tones for the Capsules body, since they have a good match with many other colors. The intention is to attend a great diversity of headers harmonically, but keeping the consistency with the colors palette of other components on canvas.

Considering, for example, the former visual identity of Foursquare, these are the 6 variations of its logo brand:

It’s common for branding guides to present background color variations and negative versions (in black and white) of the logobrand. However, the Digibee design team suggests you to choose a colorful background instead of grey, black or white background for the headers.

The last 2 logo brands with blue background in the examples above would be better choices for the ideal header.

Making a comparison based on the mentioned restrictions, the variations are:

Given the header resolution, the logo brand in the second columns is less legible when compared to the first column. Therefore, the first one is the best choice.

After defining the header, the body color choice is simple. In the Foursquare case, the most present color in the logo brand is blue - therefore, the body color should be blue as well.

In spite of not recommending the grey color, there’re still exceptions for using it as the body color. For example, if your logo brand doesn’t have a background color different from black or if the color is close to black, then the best option is to choose a grey body.

Now all you have to do is choose the icon that best represents the Capsule function. For example, if the Capsule handles Foursquare authentication, you could use the following icon:

The headers must have the size of 180 x 40 pixels, but the logo brand must fit into a little smaller width, of 90 x 40 pixels, according to the purple shown below:

It’s also suggested for your header to be created with the following sizes and margins to provide a good reading and image quality: