Style Guide

Back to home
Shop template
Colors
Typograpphy
Buttons
Icons

Key colors

global colors

Black
#0A0A0A
White
#fefefe
Brand
#bb9200

neutral colors

Neutral 1000
#050505
Neutral 900
#0A0A0A
Neutral 800
#2C2C2C
Neutral 700
#494949
Neutral 600
#5C5C5C
Neutral 500
#838383
Neutral 400
#A4A4A4
Neutral 300
#CACACA
Neutral 200
#DEDEDE
Neutral 100
#EBEBEB
Neutral 50
#F6f6f6
Neutral 0
#fefefe

Semantic colors

Blue 400
#069ADF
Blue 300
#0AA8EE
Blue 200
#81D3F6
Blue 100
#E1F5FD
Orange 400
#F28022
Orange 300
#FD9B27
Orange 200
#FECD88
Orange 100
#FFF3E2
Red 400
#D92525
Red 300
#F93C2A
Red 200
#EB706D
Red 100
#FFEBED
Green 400
#17903A
Green 300
#2EB14E
Green 200
#74C984
Green 100
#E8F5E6

Typography

Heading Tags

heading 1

56px / 4rem > 3.5rem

Heading H1

heading 2

44px / 3.5rem > 3rem

Heading H2

heading 3

32px / 3rem > 2.5rem

Heading H3

heading 4

24px / 2.5rem > 2rem

Heading H4

heading 5

20px / 2rem > 1.5rem
Heading H5

heading 6

16px / 1.5rem > 1rem
Heading H6

Heading Styles

display hg

104px / 6.5rem

Display Huge

display lg

64px / 4rem

Display large

heading

40px / 2.5rem

Heading

heading sm

28px / 1.75rem

heading small

titletext

20px / 1.25rem

titletext

subtitle

12px / 0.75rem

subtitle

paragraph

Text Size LG

24px / 1.5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.

Text Size MD

20px / 1.25rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.

Text Size RG

16px / 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Size sm

14px / 0.875rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Size XS

12px / 0.75rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Size tiny

10px / 0.625rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph styles

Text Style Quote

Sample text is being used as a placeholder.

Text Style 2Lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

Text Style 3Lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text styles

Text Strikethrough

text-style-strikethrough

Text Italic

text-style-italic

Text Muted

text-style-muted

text-allcaps

text-style-allcaps

text-nowrap

text-style-nowrap

Text Underline

text-style-underline

text-center
text-align-center
text-right
text-align-right
text-left
text-align-left
text-color-brand
text-color-brand
text-color-dark
text-color-dark
text-color-light
text-color-light
body-text-light
body-text-light
body-text-dark
body-text-dark

text Weight

text-xbold
text-weight-xbold
text-bold
text-weight-bold
text-semibold
text-weight-semibold
text-medium
text-weight-medium
text-normal
text-weight-normal
text-light
text-weight-light

rich text

Unordered List

‍

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

‍

‍

Ordered List

‍

  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.

‍

‍

Blockquotes

‍

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

‍

‍

Text Link

‍

Lorem ipsum dolor sit amet consectetur

‍

Buttons

primary buttons

Button Small
Button Text
Button Default
Button Text
Button Large
Button Text
Button Small - White
Button Text
Button Default - White
Button Text
Button Large - White
Button Text

seconday buttons

Button Small
Button Text
Button Default
Button Text
Button Large
Button Text
Button Small - White
Button Text
Button Default - White
Button Text
Button Large - White
Button Text

Icons

font icons

arrow_back
arrow_forward
arrow_upward
arrow_downward
arrow_outward
chevron_right
chevron_left
expand_more
expand_less
add
remove
clear
shopping_cart
search
thumb_up
shopping_bag
done
arrow_back
arrow_forward
arrow_upward
arrow_downward
arrow_outward
chevron_right
chevron_left
expand_more
expand_less
add
remove
clear
shopping_cart
search
thumb_up
shopping_bag
done

social media icons