Style Guide

Logo

Pink Logo:

As an img tag:

As an inline SVG included as a snippet

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

$color-commando-pink #D0006F
pink-900 #e30079
pink-700 #d51a7d
pink-600 #d9338c

pink-300 #f9a4d8
color-orange-300 #FE5000

error-red #D93025
success-green #00865A
black-900 #000000
grey-800 #171717
grey-700 #2b2b2b
grey-600 #323232
grey-500 #717171
grey-400 #c4c4c4
grey-300 #eff0f2
grey-200 #eff2f4
grey-100 #f8f8f9
grey-095 #fafcfe

black-900 #000000
black-550 #494949
black-500 #717171

Typography

Fonts

Playfair Display

The quick brown fox jumps over the lazy dog.

Sofia Pro

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}.

Display Text

This is Text H1

This is Text H2

This is Text H3

This is Text H4

This is Text H5

This is Text H6

Paragraphs

Paragraph Large (.paragraph--large)

The quick brown fox jumps over the lazy dog.

Paragraph (.paragraph)

The quick brown fox jumps over the lazy dog.

Paragraph Small (.paragraph--small)

The quick brown fox jumps over the lazy dog.

Buttons

Primary

Button Element Disabled Button Element Button Element Focused Full Width Button Element Disabled Full Width Button Element
Link Element Disabled Link Element Link Element Focused Full Width Link Element Disabled Full Width Link Element

With Modifier

Button Element Disabled Button Element Button Element Focused
Link Element Disabled Link Element Link Element Focused

Secondary

Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element
Link Element Disabled Link Element Full Width Link Element Disabled Full Width Link Element

With Modifier

Button Element Disabled Button Element Button Element Focused
Link Element Disabled Link Element Link Element Focused

Link Style

Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element
Link Element Disabled Link Element Full Width Link Element Disabled Full Width Link Element

Icon Buttons

Icon only with the .button--icon class

Close Left Cart
Close Left Cart

Additional Icons

Back to Top

Buttons with icons included

Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element
Secondary Button Element Disabled Button Element Full Width Button Element Disabled Full Width Button Element

.button--icon-left and .button--icon-right

Button Element Disabled Button Element Button Element Disabled Button Element Full Width Button Element
Link Element Left Icon Disabled Link Element Link Element Right Icon Disabled Link Element Full Width Link Element

Form Elements

Text Inputs

Checkboxes

Radio Input

Option Set 1

Option Set 2 (Full Width, Disabled and Selected)

Select Inputs

Icons

Utility Icons

Form Icons

Social Icons

Brand Icons