Buurst Design System

We’re a data performance company.

Buurst is thinking about our customers’ data differently, so they can continue to grow and move their business forward. We know our customers need to move fast, and so does their data. Buurst’s cost-effective data migration and performance management solution opens up new opportunities and capabilities that continually prepare organizations for success.

We use photography, illustrations, and iconography to communicate how we make cloud decisions work for our customers – through data performance, data migration, data cost-management, data availability, and data control and security.

Buurst is always written in sentence case, with the exception of the logo.

SoftNAS is written as Buurst’s SoftNAS on the first mention, and SoftNAS on following mentions.

The Buurst logo is a representation of the energy and trust our brand provides. The primary logo should always be the default logo. The logo was designed in a way to scale up and down so that the “UU” treatment is legible. The lowest recommended logo height is 15px. Legibility should always be considered when placing the logo. To the right are acceptable alternative uses and guidance on clear space. The following page will dive deeper in what not to do with the Buurst logo.

Logo Sytem RESTRICTIONS

The primary Buurst logo should always be honored in its original form. It should never be stretched, skewed, twisted or manipulated in any way. It is the foundational element that anchors Buurst within assets. To the right are a couple of examples of what NOT to do with the Buurst logo system.

Color Palette

Primary

The primary color palette, a core pillar to Buurst branding, should be strictly adhered to. Primary Blue and Primary Orange can be used individually as design elements, but shouldn’t be considered when layering (using either orange over blue or blue over orange). If needing to layer Primary Blue or Primary Orange, consider utilizing Primary Oxford Blue to enhance contrast.

Primary Blue

HEX #057DDC

RGB 5 | 125 | 220

CMYK 80 | 48 | 0 | 0

PMS 2173 C

Primary Orange

HEX #F26724

RGB 242 | 103 | 36

CMYK 0 | 74 | 98 | 0

PMS 165 C

Primary Oxford Blue

HEX #081733

RGB 8 | 23 | 51

CMYK 96 | 85 | 48 | 62

Secondary

The secondary color palette adds a depth of blues and grays which can be used in unison with the primaries. This palette can be used within graphical elements, illustrations and sometimes iconography, but should be used sparingly as hero elements.

#42D6FF

#1BA4C9

#2175FC

#2E5C80

#0D2447

#D1E0ED

#F2F2F2

#707880

#636363

#2E333B

Accent Colors

The alternative color palette provides depth of color to the primary color palette. These colors should be utilized sparingly within illustrations and icons to represent “good” or “bad”.

Green

#45E54F

Red

#FF004F

Gradients

Gradients can be used in tandem with the primary color palette. They shouldn’t be overused and never used alone. The #081733 gradient should only be used over imagery and sometimes with transparency such as, multiply.

#057DDC → #42D6FF

#081733 to 0% opacity

Typography

Buurst’s type system blends two fonts to offer readability and a futuristic personality to the brand. Open sans provides a neutral, yet friendly appearance, while Ratio leans more to a geometric approach to letterforms.

Photography

Photography should be representative of our target audience – focused, serious, diverse, and technologically equipped. Photography should be polished, clean, and balanced. Imagery with people should represent a focused individual or team within a technical environment.

To add depth to the selection of images, professional shots of architecture, cityscapes, and structural images can be used as elements representing a sense of scale and scope.

Illustration/Graphic elements

 Illustration allows us to differentiate from competitors and connect with our audience through visual storytelling that is powerful, modern, and balanced. Our illustrations are created with purpose, conveying technical concepts and incorporating brand elements like color and iconography.

Tips:
The data grid is the base of a lot of our illustrations. It can be used on white and dark backgrounds. It is made up of perfectly aligned squares that have circle and triangular highlights.

Hero illustrations are a less abstract style of Buurst graphical elements. They combine an iconographical look with a data grid. They use a mix of color, but should be limited to orange, blue, and grey/white. Thin lines can add movement and energy to the main visual and should be thought out in accordance to the subject matter.

Iconography

Our iconography is clean, bold and stark. The iconography should provide a balance against the other elements within the brand. The stroke should be 1pt in size. Default to the primary blue #057DDC or #2175FC within the secondary palette for extra radiance. Black and white can be used on iconography when needed.

The Anaglyph 3D icon set can be used within illustrations or in content documents. It’s vibrant mix of orange and blue help further the brand impact, but should be used sparingly.

Diagrams

Our diagrams clearly communicate their intended technical purpose. We have limited the amount of color to:

#2175FC

#081733

#D1E0ED

#F26724

Black and white are acceptable within diagrams when needed. For connecting lines stick to a 1pt stroke and for dashed lines default to 4px gap and 4px dash.

Branding Examples