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

  • RGB: 243 / 247 / 243
  • HEX: #F3F7F3
  • CMYK: 2 / 0 / 2 / 3

Snow Drift

Light Accent

  • RGB: 134 / 148 / 172
  • HEX: #8694AC
  • CMYK: 22 / 14 / 0 / 33

Bali Hai

Main Brand Color

  • RGB: 245 / 5 / 55
  • HEX: #F50537
  • CMYK: 0 / 98 / 78 / 4

Crimson

Dark Accent

  • RGB: 189 / 62 / 83
  • HEX: #BD3E53
  • CMYK: 0 / 67 / 56 / 26

Night Shadz

Dark Shade

  • RGB: 30 / 20 / 30
  • HEX: #1E141E
  • CMYK: 0 / 33 / 0 / 88

Thunder

Functional Grey Tones

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

  • RGB: 26 / 26 / 26
  • HEX: #1a1a1a

  • RGB: 102 / 102 / 102
  • HEX: #666666

  • RGB: 179 / 179 / 179
  • HEX: #b3b3b3

  • RGB: 229 / 229 / 229
  • HEX: #e5e5e5

  • RGB: 51 / 51 / 51
  • HEX: #333333

  • RGB: 128 / 128 / 128
  • HEX: #808080

  • RGB: 204 / 204 / 204
  • HEX: #cccccc

  • RGB: 242 / 242 / 242
  • HEX: #f2f2f2

  • RGB: 76 / 76 / 76
  • HEX: #4c4c4c

  • RGB: 153 / 153 / 153
  • HEX: #999999

  • RGB: 217 / 217 / 217
  • HEX: #d9d9d9

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.

  • Weight - Bold or Semibold preferred.
  • Size - 65px.
  • Transform - Uppercase.
  • Style - Normal.
  • Decoration - None.
  • Leading - 110% leading for print. 90% line-height for digital.
  • Kerning - Optical kerning with manual adjustments as needed. Use 0-pixel letter spacing for digital.
  • Alignment - Flush left or centered. Never flush right.
  • Word Count - Only use uppercase for headlines with 7 or fewer words.

Headlines (H2)

Sentence case headline.

Big (Page) Title or Press Headline use.

  • Weight - Semibold only.
  • Size - 65px.
  • Transform - None.
  • Style - Normal.
  • Decoration - None.
  • Leading - 110% leading for print. 90% line-height for digital.
  • Kerning - Optical kerning with manual adjustments as needed. Use 0-pixel letter spacing for digital.
  • Alignment - Flush left or centered. Never flush right.

Subheads (H3)

Subhead lorem ipsum dolor sit amet consectetur adipscing elit.

Subtitle use.

  • Weight - Semibold only.
  • Size - 25px.
  • Transform - None.
  • Style - Normal.
  • Decoration - None.
  • Leading - 110% leading for print. 90% line-height for digital.
  • Kerning - Optical kerning with manual adjustments as needed. Use 0-pixel letter spacing for digital.
  • Alignment - Flush left or centered. Never flush right.

Subheads (H4)

Subhead lorem ipsum dolor sit amet consectetur adipscing elit.

Section Title use.

  • Weight - Bold only.
  • Size - 18px.
  • Transform - None.
  • Style - Normal.
  • Decoration - None.
  • Leading - 110% leading for print. 90% line-height for digital.
  • Kerning - Optical kerning with manual adjustments as needed. Use 0-pixel letter spacing for digital.
  • Alignment - Flush left or centered. Never flush right.

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,
  • Weight - Normal only.
  • Size - 14px.
  • Transform - None.
  • Style - Normal.
  • Decoration - None.
  • Line-Height - 1.5rem.
  • Kerning - Optical kerning with manual adjustments as needed. Use 0-pixel letter spacing for digital.
  • Alignment - Flush left or centered. Never flush right.