Search
Close this search box.

Getting Started

The style guide is a resource for designers, product managers, and developers, providing a common language around this brand’s UI Patterns. We use it to maintain modular front-end code and visual consistency across the web app.

Color Palette

The brand colors are equal in status and always appear in full tone. They may not be darkened, lightened or displayed transparently.

Light Shades

Snow Drift

Light Accent

Bali Hai

Main Brand Color

Crimson

Dark Accent

Night Shadz

Dark Shade

Thunder

Functional Grey Tones

For functional applications, the colour palette can be extended to include grey tones ranging from white to black.

Typography

Clear and legible, yet still expressive and exciting, our typography captures your essence in every word. When it’s used consistently, brand recognition becomes effortless.

Font Family + Weights

Welcome to our font family. Book, Semibold and Bold are our primary font weights, but the full suite may be leveraged for specific use cases.

Montserrat Type Light

Montserrat Type Regular

Montserrat Type Semibold

Montserrat Type Bold

Montserrat Type Black

Headlines (H1)

UPPERCASE HEADLINE.

Hero Title.

Headlines (H2)

Sentence case headline.

Big (Page) Title or Press Headline use.

Subheads (H3)

Subhead lorem ipsum dolor sit amet consectetur adipscing elit.

Subtitle use.

Subheads (H4)

Subhead lorem ipsum dolor sit amet consectetur adipscing elit.

Section Title use.

Body Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,