Style Guide

Logo

As an img tag:

As an inline SVG included as a snippet

//www.loveinfaith.life/cdn/shop/t/247/assets/logo.png?v=147936338446380087781695368795

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

blue-900 #1C2938
blue-800 #273D56
blue-700 #3A5676
blue-600 #476E9A
blue-500 #517CAE
blue-400 #6397CA
blue-300 #8FBFEE
blue-200 #AED6FD
blue-100 #D7EBFF
teal-900 #334754
teal-800 #446073
teal-700 #547990
teal-600 #6994AF
teal-500 #82AECB
teal-400 #98C6E3
teal-300 #A9DCFC
teal-200 #C3E4FF
teal-100 #E1F2FF
mauve-900 #9B4A48
mauve-800 #B15754
mauve-700 #BF5C60
mauve-600 #D1696D
mauve-500 #E07478
mauve-400 #EE7F83
mauve-300 #F69197
mauve-200 #FFA6AB
mauve-100 #FFC5C8
gold-500 #DB9D71
gold-400 #ECAA7C
gold-300 #FAB585
gold-200 #FFC297
gold-100 #FFD0AF
grey-900 #F6F5F2
beige-500 #EDD8BC
beige-400 #FBE7CC
beige-300 #FFF3E3
beige-200 #FFFAF2
utility-red #D93025
utility-green #5B813B
color--primary #1C2938

Typography

Fonts

Mrs Eaves OT

The quick brown fox jumps over the lazy dog.

Mrs Eaves

The quick brown fox jumps over the lazy dog.

Mr Eaves Sans

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

Body Copy

Body Large (.body--large)

The quick brown fox jumps over the lazy dog.

Body (.body--base)

The quick brown fox jumps over the lazy dog.

Body Small (.body--small)

The quick brown fox jumps over the lazy dog.

Buttons

Primary

Default
Disabled
Focused
Sm
Sm Disabled
Full Width Disabled Full Width

With Modifier


Secondary

Default
Disabled
Focused
Sm
Sm Disabled Full Width Disabled Full Width

With Modifier


Arrow Buttons

Primary

Secondary

Arrow Up

Link Style

Primary Link

Link - Default
Link Focus

Inline Link

Link Default
Link Focus

Nav Link

Default

Form Elements

Text Inputs

Checkboxes

Radio Input

Option Set 1




Option Set 2 (Full Width, Disabled and Selected)

Quantity Inputs

Select Inputs

Accordions

We're very happy to send you a size you will love 100% FREE! For quick and easy size exchanges click here: Size Exchanges or, please feel welcome to call or email us. We're very happy to help!"

We're very happy to send you a size you will love 100% FREE! For quick and easy size exchanges click here: Size Exchanges or, please feel welcome to call or email us. We're very happy to help!"

We're very happy to send you a size you will love 100% FREE! For quick and easy size exchanges click here: Size Exchanges or, please feel welcome to call or email us. We're very happy to help!"

Icons