The Barion logo stands as a foundational pillar of our identity. It serves as the primary visual marker that defines our brand. Our logo embodies our vision and our tech-savvy nature with its sharp edges and dynamic design.
Barion is synonymous with the color blue, which holds the highest brand value and is the shade most closely linked to our brand by users.
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Centered around Barion Blue, our color palette blends Blue Gray and White Gray, creating a brand that feels both stable and approachable. Our accent orange appears as a pop of colour in our illustrations, adding a layer of excitement and approachability.
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion is a modern and innovative brand. Our gradients communicate these aspects of our brand. The gradients allow us to create distinction in layouts and are used throughout our visual identity in backgrounds, banners and in our illustrations.
This gradient is most used on hero visuals and highlight elements in illustrations. It is used as a background for important branded material and is a preferred background for collaterals.
This is used on buttons and CTA to uphold brand and also adhere to accessibility guidelines
The surface-dark gradient is used on content relating to coding and also as a primary surface gradient in dark mode.
These are used in backgrounds to create divisions in content on our website or on marketing collateral.
Our dynamic secondary colours help to balance the brand and make it functional for use in various settings.
Although we primarily use blue gradients, we occasionally spice things up in our UI and for repetitive content, like Instagram stories, by incorporating our secondary color palette.
The use of text on background colours can be quite tricky. We try to keep things fun, legible and most important of all, accessible without any compromise.
Barion adheres to accessibility standards by achieving at least AA level of accessibility on all applications. We always use online testers to make sure that the contrast between the foreground and background of surfaces are adequate.
We use our text-primary or Barion black on all backgrounds except on darker backgrounds where we use Pure white.
AAA
It best used in gradients, as its solid form does not meet accessibility standards for backgrounds with white text.
AAA
The Barion logo stands as a foundational pillar of our identity. It serves as the primary visual marker that defines our brand. Our logo embodies our vision and our tech-savvy nature with its sharp edges and dynamic design.
Barion is synonymous with the color blue, which holds the highest brand value and is the shade most closely linked to our brand by users.
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Centered around Barion Blue, our color palette blends Blue Gray and White Gray, creating a brand that feels both stable and approachable. Our accent orange appears as a pop of colour in our illustrations, adding a layer of excitement and approachability.
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion is a modern and innovative brand. Our gradients communicate these aspects of our brand. The gradients allow us to create distinction in layouts and are used throughout our visual identity in backgrounds, banners and in our illustrations.
This gradient is most used on hero visuals and highlight elements in illustrations. It is used as a background for important branded material and is a preferred background for collaterals.
This is used on buttons and CTA to uphold brand and also adhere to accessibility guidelines
The surface-dark gradient is used on content relating to coding and also as a primary surface gradient in dark mode.
These are used in backgrounds to create divisions in content on our website or on marketing collateral.
Our dynamic secondary colours help to balance the brand and make it functional for use in various settings.
Although we primarily use blue gradients, we occasionally spice things up in our UI and for repetitive content, like Instagram stories, by incorporating our secondary color palette.
The use of text on background colours can be quite tricky. We try to keep things fun, legible and most important of all, accessible without any compromise.
Barion adheres to accessibility standards by achieving at least AA level of accessibility on all applications. We always use online testers to make sure that the contrast between the foreground and background of surfaces are adequate.
We use our text-primary or Barion black on all backgrounds except on darker backgrounds where we use Pure white.
AAA
It best used in gradients, as its solid form does not meet accessibility standards for backgrounds with white text.
AAA
The Barion logo stands as a foundational pillar of our identity. It serves as the primary visual marker that defines our brand. Our logo embodies our vision and our tech-savvy nature with its sharp edges and dynamic design.
Barion is synonymous with the color blue, which holds the highest brand value and is the shade most closely linked to our brand by users.
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Centered around Barion Blue, our color palette blends Blue Gray and White Gray, creating a brand that feels both stable and approachable. Our accent orange appears as a pop of colour in our illustrations, adding a layer of excitement and approachability.
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion is a modern and innovative brand. Our gradients communicate these aspects of our brand. The gradients allow us to create distinction in layouts and are used throughout our visual identity in backgrounds, banners and in our illustrations.
This gradient is most used on hero visuals and highlight elements in illustrations. It is used as a background for important branded material and is a preferred background for collaterals.
This is used on buttons and CTA to uphold brand and also adhere to accessibility guidelines
The surface-dark gradient is used on content relating to coding and also as a primary surface gradient in dark mode.
These are used in backgrounds to create divisions in content on our website or on marketing collateral.
Our dynamic secondary colours help to balance the brand and make it functional for use in various settings.
Although we primarily use blue gradients, we occasionally spice things up in our UI and for repetitive content, like Instagram stories, by incorporating our secondary color palette.
The use of text on background colours can be quite tricky. We try to keep things fun, legible and most important of all, accessible without any compromise.
Barion adheres to accessibility standards by achieving at least AA level of accessibility on all applications. We always use online testers to make sure that the contrast between the foreground and background of surfaces are adequate.
We use our text-primary or Barion black on all backgrounds except on darker backgrounds where we use Pure white.
AAA
It best used in gradients, as its solid form does not meet accessibility standards for backgrounds with white text.
AAA
The Barion logo stands as a foundational pillar of our identity. It serves as the primary visual marker that defines our brand. Our logo embodies our vision and our tech-savvy nature with its sharp edges and dynamic design.
Barion is synonymous with the color blue, which holds the highest brand value and is the shade most closely linked to our brand by users.
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Barion brand gradient
HEX
RGB
CMYK
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
Centered around Barion Blue, our color palette blends Blue Gray and White Gray, creating a brand that feels both stable and approachable. Our accent orange appears as a pop of colour in our illustrations, adding a layer of excitement and approachability.
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion blue
HEX
RGB
CMYK
PMS
#0097DB
0, 151, 219
100%, 31%, 0%, 14%
PANTONE 299
Blue gray
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
Accent orange
HEX
RGB
CMYK
#2C3446
44, 52, 70
37%, 26%, 0%, 73%
White gray
HEX
RGB
CMYK
#F9F9F9
249, 249, 249
0%, 0%, 0%, 0%
Barion is a modern and innovative brand. Our gradients communicate these aspects of our brand. The gradients allow us to create distinction in layouts and are used throughout our visual identity in backgrounds, banners and in our illustrations.
This gradient is most used on hero visuals and highlight elements in illustrations. It is used as a background for important branded material and is a preferred background for collaterals.
This is used on buttons and CTA to uphold brand and also adhere to accessibility guidelines
The surface-dark gradient is used on content relating to coding and also as a primary surface gradient in dark mode.
These are used in backgrounds to create divisions in content on our website or on marketing collateral.
Our dynamic secondary colours help to balance the brand and make it functional for use in various settings.
Although we primarily use blue gradients, we occasionally spice things up in our UI and for repetitive content, like Instagram stories, by incorporating our secondary color palette.
The use of text on background colours can be quite tricky. We try to keep things fun, legible and most important of all, accessible without any compromise.
Barion adheres to accessibility standards by achieving at least AA level of accessibility on all applications. We always use online testers to make sure that the contrast between the foreground and background of surfaces are adequate.
We use our text-primary or Barion black on all backgrounds except on darker backgrounds where we use Pure white.
AAA
It best used in gradients, as its solid form does not meet accessibility standards for backgrounds with white text.
AAA
Barion Brand Guideline
Back to top
Barion Brand Guideline
Barion Brand Guideline
Back to top
Barion Brand Guideline
Back to top
