Skip to content

Overview

Astra’s brand is the collection of perceptions people have about our company. It is the big picture impression that is left on our customers and those who interact with us.

Astra’s branding exists to differentiate our company from others in the marketplace, as well as connect with a target audience. It creates trust and recognition by communicating in a consistent way across all teams and channels.

This style guide is the visual translation of Astra's mission, vision and values. It is the framework that specifies how to communicate the Astra brand. The design assets presented within are the tangible visual elements that determine how our brand is perceived by, and how it interacts with, the world.

Brand Story

Astra strives to maintain a clear message of quality, value and friendly support for its clients. The following guidelines have been established to maintain clarity and consistency with our brand’s visual communications for all intents and purposes.

Color Palette

Astra’s official palette is comprised of a variety of swatches, each functioning as an essential component to our brand’s web presence and print design materials.

Nero Black

HEX

1A1A1A

Used for navigation and footer background color, as well as reversed logo backgrounds.

Dark Gunmetal

HEX

2D3134

Used for headers and body copy.

2D3134

HEX

F7F8FB

Used as the primary background color.

Platinum

HEX

E1E1E1

Used as a secondary background color.

Alabaster

HEX

EFEEE7

Used as a tertiary background color.

White

HEX

FFFFFF

Used for page titles, links and UI elements.

Deep Space

HEX

446378

Primary accent color used for CTA buttons.

Sky Blue

HEX

79B5DD

Secondary accent color used for active navigation items.

Soft Purple

HEX

5C647D

Tertiary accent color.

Typography

Typography -- the visual art of creating written words -- is an essential building block of Astra’s brand identity. Astra utilizes the following defined typefaces for all content displayed on our website at https://astra.com/.

Primary Typeface: Barlow Semi Condensed


Used for primary headers H1 – H6.

H1 heading

H2 heading

H3 heading

H4 heading

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , : ; ‘ “ ^ < >
@ # $ % & * ( ) [ ] { } / \ | _ + = - ~ `

How quickly daft jumping zebras vex.

The quick brown fox jumps over the lazy dog.

This is a paragraph that uses every single letter in the alphabet. Now, that doesn’t mean this can be a paragraph with no story, but it does mean that every single letter is used. You can make it as generic or fanciful as you’d like. You can talk about anything from quilts to jets to xylophones. Oh yeah, and you can use whatever language you want, from Afrikaans to Zulu.

Directions for use:
Used for primary headers H1 – H6.

View Barlow Semi Condensed at Google Fonts.

Secondary Typeface: Barlow


Used for body copy, links, and CTA buttons.

H1 heading

H2 heading

H3 heading

H4 heading

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , : ; ‘ “ ^ < >
@ # $ % & * ( ) [ ] { } / \ | _ + = - ~ `

How quickly daft jumping zebras vex.

The quick brown fox jumps over the lazy dog.

This is a paragraph that uses every single letter in the alphabet. Now, that doesn’t mean this can be a paragraph with no story, but it does mean that every single letter is used. You can make it as generic or fanciful as you’d like. You can talk about anything from quilts to jets to xylophones. Oh yeah, and you can use whatever language you want, from Afrikaans to Zulu.

Directions for use:
Used for body copy, links, and CTA buttons.

View Barlow at Google Fonts.