Style Guide - Lily of the Desert

TYPOGRAPHY

* = needs mobile font size

h1.h1-large BreeBold 35px-58px

h1.h1-large.text-banana BreeBold 58px

h1.h1-large.text-white BreeBold 58px

h1: BreeBold 48px-72px

h1.text-banana: BreeBold 73px

h1.text-white: BreeBold 73px

h1.h1-small BreeBold 35px-58px

h1.h1-small.text-banana BreeBold 58px

h1.h1-small.text-white BreeBold 58px

h2: BreeBold 58px

h2.text-banana: BreeBold 35px-58px

h2.font-serif: PT Serif 58px

h2.text-banana.font-serif: PT Serif 58px

h3: BreeBold 36px-48px

h3.text-gray900: BreeBold 48px

h3.font-serif: PT Serif 58px

h3.text-banana.font-serif: PT Serif 58px

h3.h3-hero: BreeBold 32px-36px

h3.h3-hero.text-gray900: BreeBold 36px

h3.h3-hero.text-white: BreeBold 36px

h3.h3-hero.text-banana: BreeBold 36px

h3.h3-cards: BreeBold 30px-40px

h3.h3-cards.text-gray900: BreeBold 40px

h3.h3-cards.text-white: BreeBold 40px

h4: Museo500 20px-24px

h4.h4-cards: Bree 22px-28px

h4.h4-cards.text-gray900: Bree 28px

*h5: Museo500 20px

p: Museo500 16px-20px

p.p-bold: Museo900 16px

.price-label: Museo700 36px

.info-label: Museo700 12px-16px

p.small: Museo500 14-16px

p.small-bold: Museo700 16px

p.large: Museo500 18px-24px

*p.x-large: Museo500 36px

*The price-label and info-label classnames are not associated with an element because woocommerce doesnt always put text into p tags

ul: Museo500 16px-20px

  • li: Museo500 20px
  • li: Museo500 20px
  • li: Museo500 20px
  • li: Museo500 20px

ul.small: Museo500 14px-16px

  • li: Museo500 16px
  • li: Museo500 16px
  • li: Museo500 16px
  • li: Museo500 16px

ul.small-bold: Museo700 16px

  • li: Museo500 16px
  • li: Museo500 16px
  • li: Museo500 16px
  • li: Museo500 16px

ul.large: Museo500 18px-24px

  • li: Museo500 24px
  • li: Museo500 24px
  • li: Museo500 24px
  • li: Museo500 24px

*ul.x-large: Museo500 36px

  • li: Museo500 36px
  • li: Museo500 36px
  • li: Museo500 36px
  • li: Museo500 36px

ul.check-style: Museo500 16px-20px

  • li: Museo500 20px
  • li: Museo500 20px
  • li: Museo500 20px
  • li: Museo500 20px

an example of mixing classes to modify the check style ul.check-style.small.ul-semibold: Museo500 14px-16px

  • Shaving Gel to help minimize bumps while hydrating your skin
  • On your scalp to give extra moisturization or use as a styling gel
  • Use under your makeup as a daily moisturizer
  • Cool & soothe your skin after prolonged sun exposure
  • Apply after bathing to help lock in your skin’s natural moisture

BUTTONS

Primary: Museo700 18px

.btn (this is default) .btn.yellow

Secondary: Museo700 16px

.btn.secondary .btn.secondary.green .btn.secondary.yellow

this .btn-text style can be applied to any element so it can be used on the cards or stand alone, but text that is included on card style buttons

this .btn-text-sm style can be applied to any element so it can be used on the cards or stand alone, but text that is included on card style buttons

.btn.tag btn.green.outline

white

#FFFFFF

gray100

#E5E5E5

gray300

#CCCCCC

gray500

#999999

gray700

#666666

gray900

#333333

plum

#502457

.bg-plum on parent element will make text white

green

#1A763D

yellow

#FEDE62

lilac

#955C9B

banana

#FFF2C5

red

#CC3333

mauve

#EEE5F0