Styleguide
Fonts
  • 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
  • Gotham Medium
    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-medium
Typography - Editorial Styles
  • Title - X-Large
    I am an Extra Large Title.


    Extra Large Title
    with a Linebreak
    .title--xl
  • Title - Large
    Large Title is quite large.


    Large Title
    with a Linebreak
    .title--large
  • Body Text

    By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was...

    .body-text

Buttons

  • Button
    Button
    .btn
  • Secondary Button
    Button
    .button .button--secondary
  • Button - Inactive
    Button
    .btn .btn--inactive
  • Button - Select
    Button
    .btn .btn--select

Text Links

  • Link - Style 1
    .text-link--style-1
  • Link - Style 2
    .text-link--style-2
Colors
  • Brand Colors
    Light Gray
    #F4F6F4
    $color-light-gray-v2
    Gray
    #CCCCCC
    $color-gray-v2
    Dark Gray
    #808080
    $color-dark-gray-v2
    Green
    #A3D6C7
    $color-green-v2
    Black
    #000
    $color-black
    White
    #fff
    $color-white
  • System Colors
    Error
    #ff0000
    $color-error-v2
    Success
    #458745
    $color-success-mark
Icons
    • account
    • account_v2
    • bag
      bag
    • bag_v2
      bag_v2
    • caret--down
      caret--down
    • caret--left
      caret--left
    • caret--right
      caret--right
    • caret--up
      caret--up
    • cart_icon
      cart_icon
    • checkbox
      checkbox
    • checkbox--checked
      checkbox--checked
    • circle-caret--left
      circle-caret--left
    • circle-caret--right
      circle-caret--right
    • close
      close
    • email
    • email_icon
    • facebook
    • hamburger
      hamburger
    • head--outline
      head--outline
    • head--solid
      head--solid
    • heart--filled
      heart--filled
    • heart--outline
      heart--outline
    • information
      information
    • instagram
      instagram
    • livechat
      livechat
    • location
      location
    • location--filled
      location--filled
    • logo
    • logo_v2
      logo_v2
    • map-marker
      map-marker
    • map-marker-v2
      map-marker-v2
    • minus
      minus
    • minus-thin
      minus-thin
    • pinterest
      pinterest
    • pinterest--circle
      pinterest--circle
    • play
      play
    • plus
      plus
    • plus-thin
      plus-thin
    • radio
      radio
    • radio--checked
      radio--checked
    • search_icon
      search_icon
    • search_v2
      search_v2
    • star
      star
    • star--green
      star--green
    • star-o--green
      star-o--green
    • stars
      stars
    • store
      store
    • twitter
    • youtube
      youtube
    • youtube--play
      youtube--play
    <svg role="img" aria-labelledby="my-unique-id" class="svgicon svgicon--twitter">
      <title id="my-unique-id">ADA title goes here</title>
      <use xlink:href="#twitter"></use>
    </svg>
    

Form Elements

  • Input
    .input-form
  • Input - Error
    .input-error .error

Layout

This section lists standard widths, padding rules and breakpoints.

Layout Helpers

  • Horizontal Alignment
    left
    .horizontal-align-left
    right
    .horizontal-align-right
    center
    .horizontal-align-center
  • Vertical Alignment
    top
    .justify-start
    center
    .justify-center
    bottom
    .justify-end

Container Maximum Widths - Plus padding rules

NOTE: padding amount changes depending on screen or device width. Larger screens have more left / right padding.


  • Full width: 100% - no outer padding
    .container-max-width-full
    Full width: 100% with padding
    .container-max-width-full .container-max-width--padded
    Large: 1440px - no outer padding
    .container-max-width-large
    Large: 1440px with padding
    .container-max-width-large .container-max-width--padded
Styleguide Tools