Styleguide
Fonts
  • BBText Regular
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bbtext-regular
  • BBText Regular Italic
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bbtext-regular-italic
  • BBText 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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bbtext-bold
  • BBText Bold Italic
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bbtext-bold-italic
  • BBText Light
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bbtext-light
  • BBText Light Italic
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bbtext-light-italic
  • Brandon Text
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .brandon-text
  • Brandon Text Light
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .brandon-text-light
  • Brandon Text 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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .brandon-text-medium
  • Brandon Text 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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .brandon-text-bold
  • BB Sans
    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​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .bb-sans
Typography - V1
  • H1
    H1 Text.


    H1 Text
    with a Linebreak
    .h1
  • H2
    H2 Text.


    H2 Text
    with a Linebreak
    .h2
  • H3
    H3 Text.


    H3 Text
    with a Linebreak
    .h3
  • H4
    H4 Text.


    H4 Text
    with a Linebreak
    .h4
  • H5
    H5 Text.


    H5 Text
    with a Linebreak
    .h5
  • H6
    H6 Text.


    H6 Text
    with a Linebreak
    .h6
  • H7
    H7 Text.


    H7 Text
    with a Linebreak
    .h7
  • H8
    H8 Text.


    H8 Text
    with a Linebreak
    .h8
  • H9
    H9 Text.


    H9 Text
    with a Linebreak
    .h9
  • H10
    H10 Text.


    H10 Text
    with a Linebreak
    .h10
  • H11
    H11 Text.


    H11 Text
    with a Linebreak
    .h11
  • H12
    H12 Text.


    H12 Text
    with a Linebreak
    .h12
  • H13
    H13 Text.


    H13 Text
    with a Linebreak
    .h13
  • H14
    H14 Text.


    H14 Text
    with a Linebreak
    .h14
  • H15
    H15 Text.


    H15 Text
    with a Linebreak
    .h15
  • H16
    H16 Text.


    H16 Text
    with a Linebreak
    .h16
  • H17
    H17 Text.


    H17 Text
    with a Linebreak
    .h17
  • H18
    H18 Text.


    H18 Text
    with a Linebreak
    .h18
  • H19
    H19 Text.


    H19 Text
    with a Linebreak
    .h19
  • H20
    H20 Text.


    H20 Text
    with a Linebreak
    .h20
  • H21
    H21 Text.


    H21 Text
    with a Linebreak
    .h21
  • H22
    H22 Text.


    H22 Text
    with a Linebreak
    .h22
  • H23
    H23 Text.


    H23 Text
    with a Linebreak
    .h23
  • H24
    H24 Text.


    H24 Text
    with a Linebreak
    .h24
  • H25
    H25 Text.


    H25 Text
    with a Linebreak
    .h25
Typography - V2
  • T1
    T1 Text.


    T1 Text
    with a Linebreak
    .t1
  • T2
    T2 Text.


    T2 Text
    with a Linebreak
    .t2
  • T3
    T3 Text.


    T3 Text
    with a Linebreak
    .t3
  • T4
    T4 Text.


    T4 Text
    with a Linebreak
    .t4
  • T5
    T1 Text.


    T1 Text
    with a Linebreak
    .t5
    Typography - ELC specific
  • ELC Heading 1

    Heading 1

    .elc-heading--1
  • ELC Heading 2

    Heading 2

    .elc-heading--2
  • ELC Heading 3

    Heading 3

    .elc-heading--3
  • ELC Heading 4

    Heading 4

    .elc-heading--4
  • ELC Heading 5
    Heading 5
    .elc-heading--5
  • ELC Heading 6
    Heading 6
    .elc-heading--6
  • ELC Body 1

    Body 1

    .elc-body--1
  • ELC Body 2

    Body 2

    .elc-body--2
  • ELC Subtitle 1

    Subtitle 1

    .elc-subtitle--1
  • ELC Subtitle 2

    Subtitle 2

    .elc-subtitle--2
  • ELC Caption

    Caption

    .elc-caption
  • ELC Overline

    Overline

    .elc-overline
Buttons
  • Standard Button
    Button
    .button
  • White Button
    Button
    .button .button--white
  • Disabled Button
    Button
    .button .button--disabled
Text Links
Colors
  • Primary Colors
    White
    #fff
    $color-white
    Black
    #000
    $color-black
  • Secondary Colors
    Reddish Pink
    #ff3453
    $color-reddish-pink
    Warm Grey
    #777777
    $color-warm-grey
    Dark Grey
    #1b1b1b
    $color-black-2
    Light Grey
    #EBEBEB
    $color-very-light-pink
Icons
    • arrow_down
      arrow_down
    • arrow_left
      arrow_left
    • arrow_right
      arrow_right
    • arrow_up
      arrow_up
    • 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
    • douban
      douban
    • email
    • facebook
    • finder
      finder
    • flag_2
      flag_2
    • flag_head
      flag_head
    • flag_star
      flag_star
    • glasses
      glasses
    • google
      google
    • hamburger
      hamburger
    • head
      head
    • heart
      heart
    • heart_outline
      heart_outline
    • instagram
      instagram
    • kaixin
      kaixin
    • kakao_off
      kakao_off
    • kakao_on
      kakao_on
    • line
      line
    • livechat
      livechat
    • livechat2
      livechat2
    • logo
    • marker_mobile
      marker_mobile
    • minus
      minus
    • phone
      phone
    • pinterest
      pinterest
    • plane
      plane
    • play
      play
    • plus
      plus
    • print
      print
    • quickshop_arrow
      quickshop_arrow
    • radio
      radio
    • radio_checked
      radio_checked
    • riding
      riding
    • search
      search
    • share
    • shipping_truck
      shipping_truck
    • star
      star
    • star_outline
      star_outline
    • tag
      tag
    • tumblr
      tumblr
    • twitter
    • walking
      walking
    • wechat
      wechat
    • weibo
      weibo
    • weixin
      weixin
    • xiaonei
      xiaonei
    • youtube
      youtube
    • zoom
      zoom
    <svg role="img" class="svgicon svgicon--twitter">
      <title>ADA title goes here</title>
      <use xlink:href="#twitter"></use>
    </svg>
    
Form Elements
  • Input
    input
  • Input - Error
    .error
  • Input - Success
    .success
  • Textarea
    textarea
  • Textarea - Error
    .error
  • Textarea - Success
    .success
  • Dropdown - Native select
    select > option
  • Radio
    input type="radio"
  • Checkbox
    input type="checkbox"
Styleguide Tools