Style Guide for Web

01.

Logos

Our primary brandmark is our signature. It is our most recognizable asset and should be used simply and consistently across all communications. Our symbol should be used in instances where our brand does not require name recognition. It may be used on its own without the brandmark.

02.

Brand Colors: Primary Palette

Color plays an important role in establishing a distinct and consistent identity. Black and White are our primary colors and should be used on every application. The additional secondary neutral colors are meant to provide hiearchy and visibility in type. We do not utilize them on either of our logos.

Black
White
Off-White
Grey
03.

Typography

Reckless Neue is our primary brand font. We use the Book weight of Reckless Neue. It is a display font. It will be utilized only by the marketing and web team. Reckless Neue is used for headlines and titles and should always be considerably larger than the
body copy.

Work Sans is our secondary brand font. This sans serif provides a clear contrast to Reckless Neue. The Light weight is used for subheadlines and in instances where legibility becomes an issue. Work Sans Light is used in all other cases namely for body copy.

H1

Reckless Neue is the name of the font

size 72 - reckless

line height 1.1em

body weight normal

H2

The quick brown fox jumps over the lazy dog

size 55 - reckless

line height 1.1em

body weight normal

H3

The quick onyx goblin jumps over the lazy dwarf

size 48 - reckless

line height 1.1em

body weight normal

H4

Work Sans is the name of the font

size 30 work sans

line height 1.2em

body weight normal

H5

How razorback-jumping frogs can level six piqued gymnasts

size 24 - work sans

line height 1.2em

body weight normal

H6

SUBTITLES ABOVE HEADINGS

size 16 - work sans

line height 1.2em

body weight thin

p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

size 16 - work sans

line height 1.2em

body weight thin

07.

Brand Gradients

Our gradients provide color and expression to the brand. These assets should be viewed in a similar way to photography, used as graphic and background elements. Gradients should be created from 2 to 3 colors only. This restraint allows for smoother color transitions. These environments are created with freeform and radial gradients, as well as the gradient mesh tool.

04.

Buttons

On the website when we want the user to take an action, we use buttons. There are 2 version of the buttons for when its used on a light or dark background. Rounded edges with the colors inverting when hovered over. 

05.
Iconography Style - (undetermined)

Icons and infographics should be line art composed of simple geometry. This style is meant to pair easily with neutral colors and vibrant gradients. On the website when we want the user to take an action, we use buttons. There are 2 version of the buttons for when its used on a light or dark background. Rounded edges with the colors inverting when hovered over. 

Just Icon

BLOCKCHAIN
RENEWABLE ENERGY
SIMULATION
HOLOGRAM

Icon + Title

WIRELESS

Refactoring

SMART TV

Container Adoption

CLOUD

Cloud Native Services

MECHANICAL ARM

CI/CD Pipeline Development

06.

Forms - (Undetermined)