Style Guide

Logo

Black Logo:

As an img tag:

As an inline SVG included as a snippet

White Logo:

As an img tag:

As an inline SVG included as a snippet

Grid and Layout Rules

Breakpoints

Mobile Tablet Desktop Full Width
less than 650px 650px to 991px greater than 992px 2560px

Global Spacing Unit and Layout Tools

The sizing and spacing for elements in this theme should always be based on the global spacing unit of 4 pixels. Ensure adherance to this rule by using the $spacing-unit variable wherever possible. This theme includes a BEM component called .page-layout as well as set of grid classes to help achieve layouts that conform to the global spacing guidelines.

Colors

Black

$color-primary-900#1D1D1B

Aceent Brand Colors

Natural White

$color-white-900#FEFEF8

Green

$color-green-900#4F5653
$color-green-800#8A8C7B
$color-green-700#A1A395
$color-green-600#C2C3B7

Greyscale

$color-primary-900#1D1D1B
$color-primary-800#1D1D1B
$color-primary-700#1D1D1B
$color-primary-600#1D1D1B
$color-primary-500#1D1D1B
$color-primary-400#1D1D1B
$color-primary-300#1D1D1B
$color-primary-200#1D1D1B
$color-primary-100#1D1D1B

Utility Red

$color-utility-red-900#C6443B

Utility green

$color-utility-green-900#64715A

Typography

Fonts

Heading Font - Rajdhani

The quick brown fox jumps over the lazy dog.

Headings

Heading styles are available as native HTML elements as well as classes that follow the pattern of .heading--{level}.

This is Text Headline One

This is Text Headline Two

This is Text Headline Three

This is Text Headline Four

This is Text Headline Five

This is Text Headline Six

This is Text Headline Seven

Body Copy Styles

Body (Large)

Body (Base)

Body (tiny)

Body (tiny)

Link Style One Large Text Link

CTA Buttons

Primary Button

Default
Default
This is an error
Default Default

Secondary Button

Default
Default
This is an error
Default Default

Small Button Primary

Default
Default
This is an error
Default Default

Small Button Secondary

Default
Default
This is an error
Default Default

Form Elements

Text Inputs

Checkboxes

Radio Input

Option Set 1

Option Set 2 (Full Width, Disabled and Selected)

Select Inputs

Accordions and Tabs

Accordion

This is accordion content 1" This is accordion content 2" This is accordion content 3" This is accordion content 4"

Tabs

This is tab content 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo ex vel suscipit lobortis. Quisque sollicitudin nulla at turpis varius, non vulputate purus maximus. Duis ullamcorper cursus felis, porta scelerisque ligula varius nec. Nullam id ante sodales dui finibus volutpat. Phasellus eu ligula at urna elementum mollis. Donec porta nisi eu metus lobortis, a rutrum arcu ullamcorper.

This is tab content 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo ex vel suscipit lobortis. Quisque sollicitudin nulla at turpis varius, non vulputate purus maximus. Duis ullamcorper cursus felis, porta scelerisque ligula varius nec. Nullam id ante sodales dui finibus volutpat. Phasellus eu ligula at urna elementum mollis. Donec porta nisi eu metus lobortis, a rutrum arcu ullamcorper.

This is tab content 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo ex vel suscipit lobortis. Quisque sollicitudin nulla at turpis varius, non vulputate purus maximus. Duis ullamcorper cursus felis, porta scelerisque ligula varius nec. Nullam id ante sodales dui finibus volutpat. Phasellus eu ligula at urna elementum mollis. Donec porta nisi eu metus lobortis, a rutrum arcu ullamcorper.

Icons

Utility Icons

Form Icons

Social Icons

Brand Icons