Add €60,00 to your cart to get FREE shipping!

Style Guide

Pallette

Primary Brand Colors

Primary Color
${ variables.global['$primary-color'].value.hex }

Secondary Color
${ variables.global['$secondary-color'].value.hex }



Colors

Color is used sparingly to draw attention to interface elements and to deliver positive, negative, or warning feedback to the user.

${ key.replace('$', '').replace(/-/g, ' ') }
${ sassVar.value.hex }


Shadow

Typography

Primary Font

${ variables.global['$primary-font'].value[0].value.replace(/-/g, ' ') }

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z


Secondary Font

${ variables.global['$secondary-font'].value[0].value.replace(/-/g, ' ') }

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z



Headlines

Left

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Header 7

Center

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Header 7

Right

Hero

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Header 7

Paragraph

Left

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Center

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

Right

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum Euismod.

List Styles

Left

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Center

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Right

  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  • Bulleted List Item 4


  1. Numbered List Item 1
  2. Numbered List Item 2
  3. Numbered List Item 3
  4. Numbered List Item 4

Buttons

Primary Button

Used as a primary call-to-action on light and dark backgrounds













Secondary Button

Used as a secondary call-to-action on light backgrounds














Form Elements

Input Form Fields

Form field used as an input for common text elements





Error messaging

Select Form Fields

Form field used as a select form element for selecting a single option from a list





Error messaging

Check Box

Radio

Grid

A responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

The grid system supports responsive classes for desktop, tablet, and mobile, vertical and horizontal alignment, directional flow, hiding/showing responsively, as well as offsetting, via classes.

Our Promise to You

US - free shipping over $60 & free exchanges.
International - see shipping page for details.