Title: Graphic system

URL: https://www.infobip.com/graphic-system

## Graphic system

## The shapes that build our graphic brand system are taken directly from our brand symbol, building the visual link between 
our core asset and wider brand.

## System scale

Our graphic system operates across 
three tiers: Functional, Bold, and Expressive.

This versatility enables us to adapt to various brand levels, spanning from product and UI instances to more expressive, branded hero moments.

## Functional usage

Our functional usage of the graphic system is the most simple. It’s where we use our core shapes in small moments such as a button, within a piece of UI or as a holding shape.

## CTA/buttons

The shapes that inform our graphic 
system also dictate the look and feel 
of our CTA’s and buttons throughout 
the digital experience. Using the 
squircle shape to inform the curvature.

## Functional examples

This page shows some best case examples for how we can use our system in it’s most minimal form.

## Bold usage

Our bold graphic system examples allow us to create simple communications but use our system in a large, graphic way.

This is where we can be recessive but confident with our graphic shapes.

## Bold examples

This page shows some best case examples for how we can use our system in a bold and confident way.

## Holding imagery

In this application of our graphic system, we can leverage our three holding shapes to contain art direction. By overlaying additional graphic shapes, we can create space to add and spotlight additional information.

## Adding perspective

In certain executions of the brand system, we incorporate perspective into graphic elements to suggest broader networks of connections.

This is achieved by utilising the Perspective tool in Photoshop to apply a 15 or -15 degree perspective to the image.

However, we never apply this technique to standalone images.

## Expressive usage

Our most expressive expression of the graphic system speaks to the wider network of connections that Infobip facilitate.

## Elongated shapes

Within our most expressive expression of the brand, we also elongate our ‘squircle’ to create one more shape to use within the system. It can be elongated up to four times it’s width, and used both horizontally and vertically. We only ever elongate the squircle, and not the other core shapes.

## The ‘Biposphere’

The ‘Biposphere’ is a flexible system 
that allows us to speak to the global
network of communications that Infobip facilitate. It allows us to hero the wider network, whilst also isolating singular moments or stories.

## Adding image crops

We include crops of our art direction into some of the shapes to hint towards the individuals within the Biposphere.

## Expressive examples

This page shows some best case examples for how we can use our system in it’s most expressive form. We can create fuller, larger scale Biposphere’s that can be used to 
tell the wider brand story. These will be more prominent in areas that allow us to be more expressive, such as social media or hero modules on the website.

## 3D biposphere

When visualising the expansive network of connections, we enhance our Biposphere to convey the global reach of our impact by adding perspective.

We do this by taking a flat layout of our graphic shapes, and using the Spherize tool in photoshop to create the globe feeling perspective.