Visual Style

io.suite visual style is a combination of different design elements: Color, Text, and Images. These three elements and how they interact with each other ensembles the essence of io.suite visual identity.

Two color themes are usually used in the background for any io.suite brand application:

Yellow-Orange gradient is the main color theme for io.suite. Used in the primary brand touchpoint: Packaging.

The Concrete Gray color shades act as an alternative color theme. This neutral color was introduced to the brand to balance the strong Yellow-Orange

Due to the variety of Concrete Gray shades (4) provided in the color palette, some contrast issues might surface when applying colors to a designed application.

Make sure you choose foreground and background colors that creates a clear contrast.

For example: Never use a white logo on the yellow part of the gradient. Or a yellow logo on the light part of concrete gray.

Refer to the bellow chart of color combinations to know which color is allowed to be used on the different backgrounds shades.

There are different types of images to use in an io.suite designed application: The most common type is a Product Images: A cut-out of a product photo (with a transparent background). They can be used on both Yellow-Orange and Concrete Gray backgrounds.

Another common type is the Lifestyle Images: A demonstration of a specific product being used in a context that explain its features or uses. Usually occupying the entire artwork of a designed application such as a social media post. In certain cases, both product image and lifestyle image can be brought together in a designed application.

Product Image

Lifestyle Image

Lifestyle Cutouts is another type of images where a lifestyle image is being cut and used on a costume background*. We also have Edited Images, mostly generated by AI, to demonstrate a specific idea. These extra type of images can work together in themed campaigns.

* Costume Background is a gradient that consist of colors from outside the palette in addition to shades of yellow, orange or even complementary color. Costume backgrounds are commonly used in a lifestyle image that is related to a special occasion, or to match the colors of the image itself.

Pay attention that different types of images can be seen together in one place.

Being written in the ALL-CAPS font of Brosqua (or Mostakbal for Arabic), and in a large size, the text element is an important part of any io.suite designed application, as it offers context to the subject, and it adds an important visual weight to the design. The color of the text element is determined depending on the background color and tint. While its location is also a choice to be decided by the designer.

Text also plays a secondary role being used in small sizes and in secondary font (IMB Plex) for technical uses.

In io.suite, we care about our products and tend to try the best to deliver the right message and explain the features of our products. This approach requires visual aid for our images to transport the information to the client in the smoothest of ways.