Styleguide

Fonts

Gotham - Book is the default font.

Gotham - Bold additional fonts used.

  • Gotham - Book
    AaBb
    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​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
    .font--gotham-book
    or
    $main-font
  • Gotham - Bold
    AaBb
    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​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
    .font--gotham-bold
    or
    $header-font-bold

Typography

2019 Redesign - New Styleguide

Engineering note - related files:
gg_base/scss/00-global/_variables.scss
gg_base/scss/00-global/_mixins.scss
gg_base/scss/10-base/_typography-helpers.scss
  • Title - X-Large
    Shop by Skin Type
    .title--xl
  • Title - Large
    Bestseller
    .title--large
  • Title - Medium
    Supermud
    .title--med
  • Title - Small
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    .title--small
  • Title - Smaller
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    .title--smaller
  • Body - Normal
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum.
    .body-text
  • Tags
    how to
    .body-text--tags
  • Paragraph - P1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum.
    .paragraph-text--p1
  • Paragraph - P2
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum.
    .paragraph-text--p2
  • EM
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum.
    .em-text
  • Callout
    CALLOUT
    .callout-text

Colors

2019 Redesign Styleguide Colors

  • Pink #e51174 $cr19-dark-pink $cr19-text-pink $cr19-bg-pink
  • White #FFFFFF $color-white $cr19-text-white $cr19-bg-white
  • Black #000000 $color-black $cr19-text-black $cr19-bg-black
  • Grey / Dark #737373 $cr19-dark-gray $cr19-text-dark-gray $cr19-bg-dark
  • Error / Red #e60000 $cr19-error

Buttons - 2019 Styleguide

  • Primary Button
    Button
    .elc-button .elc-button--pink
  • Primary Button - Disabled
    Disabled
    .elc-button .elc-button--pink .elc-button--disabled
  • Secondary Button
    Button
    .elc-button .elc-button--inverted
  • Secondary Button - Disabled
    Disabled
    .elc-button .elc-button--inverted .elc-button--disabled

Links

  • Primary Link - Dark, Pink on hover
    .text-link--style-1
  • Secondary Link - Grey, Pink with hover
    .text-link--style-2

Icons

    • arrow_black

      arrow_black

    • arrow_down

      arrow_down

    • arrow_left

      arrow_left

    • arrow_right

      arrow_right

    • arrow_up

      arrow_up

    • arrow_white

      arrow_white

    • atsign

      atsign

    • bus

      bus

    • calendar

      calendar

    • car

      car

    • cart

      cart

    • checkbox

      checkbox

    • checkbox_checked

      checkbox_checked

    • circle_check

      circle_check

    • circle_check_thick

      circle_check_thick

    • circle_close

      circle_close

    • circle_up

      circle_up

    • close

      close

    • email

    • facebook

    • finder

      finder

    • flag_2

      flag_2

    • flag_head

      flag_head

    • flag_star

      flag_star

    • gg_burguer_menu

      gg_burguer_menu

    • gg_cart_shopping

      gg_cart_shopping

    • gg_close

      gg_close

    • gg_logo

    • gg_minus

      gg_minus

    • gg_plus

      gg_plus

    • gg_search

      gg_search

    • gg_star

      gg_star

    • gg_star_grey

      gg_star_grey

    • gg_star_pink

      gg_star_pink

    • gg_voice

      gg_voice

    • glasses

      glasses

    • google

      google

    • hamburger

      hamburger

    • head

      head

    • heart

      heart

    • heart_outline

      heart_outline

    • instagram

      instagram

    • livechat

      livechat

    • livechat2

      livechat2

    • livechat3

      livechat3

    • logo

    • marker_mobile

      marker_mobile

    • minus

      minus

    • phone

      phone

    • pinterest

      pinterest

    • plane

      plane

    • play

      play

    • play_icon_black

      play_icon_black

    • play_icon_white

      play_icon_white

    • plus

      plus

    • print

      print

    • quickshop_arrow

      quickshop_arrow

    • radio

      radio

    • radio_checked

      radio_checked

    • riding

      riding

    • search

      search

    • share

    • star

      star

    • star_outline

      star_outline

    • tag

      tag

    • tumblr

      tumblr

    • twitter

    • walking

      walking

    • youtube

      youtube

    • zoom

      zoom

    <svg role="img" aria-labelledby="my-unique-id" class="icon icon--twitter">
      <title id="my-unique-id">ADA title goes here</title>
      <use xlink:href="#twitter"></use>
    </svg>
    

Form Elements

  • Input
    .input-field
  • Input - Error
    .input-error .error
  • Input - Success
    .input-field .success
Toggle
Code