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 - 2022 Style Updates
  • Extra Large Headline
    Extra Large Headline Text.


    Extra Large Headline Text
    with a Linebreak
    .typography-headline--xl
  • Large Headline
    Large Headline Text.


    Large Headline Text
    with a Linebreak
    .typography-headline--l
  • Medium Headline
    Medium Headline Text.


    Medium Headline Text
    with a Linebreak
    .typography-headline--m
  • Body
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non tempor nunc dictum. Auctor turpis amet diam, proin condimentum dictum pellentesque tortor.
    .typography-body-text
  • Link
    .typography-link-text
  • Label
    Shop the Look
    .typography-label-text
  • Annotation
    © Bobbi Brown Professional Cosmetics, Inc. All worldwide rights reserved.
    .typography-annotation-text
Legacy Styles
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 - 2022 Style Updates
  • Primary CTA Button
    Find your shade
    Add to bag
    .cta-primary
  • Primary CTA White Button
    Find your shade
    .cta-primary-white
  • Primary CTA Gray Button
    Out of stock
    .cta-primary-gray
  • Secondary CTA Button
    Find your shade
    icon--camera Try it on
    .cta-secondary
  • CTA Text
    Add to bag
    .cta-text
  • CTA Text Gray
    Add to bag
    .cta-text-gray
Colors - 2022 Style Updates
  • Typography & UI
    Black
    #221F20
    $color-core-black
    Gray on Light
    #6F6D6E
    $color-gray-on-light
    Line
    #E9E9E9
    $color-line
    White
    #FFFFFF
    $color-white
    Gray on Dark
    #A9A9A9
    $color-core-dark-gray
    Red (Error)
    #C8323E
    $color-core-red
  • Core
    BLack
    #221F20
    $color-core-black
    Gold
    #D6B371
    $color-core-gold
    Light Gray
    #AFB4BB
    $color-core-light-gray
    White
    #FFFFFF
    $color-white
  • Category
    Crushed Lip
    #DD4955
    $color-category-crushed-lip
    Extra Lip
    #DC788E
    $color-category-extra-lip
    Glow
    #EBC4C1
    $color-category-glow
    Foundation Light
    #FAE7D4
    $color-category-foundation-light
    Correct & Conceal
    #EED8C9
    $color-category-correct-conceal
    Finish Powder
    #E3C2AA
    $color-category-finish-powder
    Brow
    #AE9485
    $color-category-brow
    Brow Dark
    #85614E
    $color-category-brow-dark
    Foundation
    #AA7256
    $color-category-foundation
    Foundation Dark
    #6E4335
    $color-category-foundation-dark
    Mascara
    #202225
    $color-category-mascara
    Eye
    #AFB4BB
    $color-core-light-gray
    Skincare
    #E3EDF8
    $color-category-skincare
    Remedies
    #FEF4CD
    $color-category-remedies
Icons
    • icon--add
      icon--add
    • icon--arrow-left
      icon--arrow-left
    • icon--arrow-right
      icon--arrow-right
    • icon--bag
      icon--bag
    • icon--camera
      icon--camera
    • icon--chat-fab
      icon--chat-fab
    • icon--close
      icon--close
    • icon--contract
      icon--contract
    • icon--dropdown
      icon--dropdown
    • icon--expand
      icon--expand
    • icon--favorite
      icon--favorite
    • icon--grid
      icon--grid
    • icon--info
      icon--info
    • icon--info-filled
      icon--info-filled
    • icon--list
      icon--list
    • icon--logo-afterpay
      icon--logo-afterpay
    • icon--logo-bb
      icon--logo-bb
    • icon--logo-bb-stacked
      icon--logo-bb-stacked
    • icon--menu
      icon--menu
    • icon--minus
      icon--minus
    • icon--pause
      icon--pause
    • icon--radio
      icon--radio
    • icon--radio-checked
      icon--radio-checked
    • icon--search
      icon--search
    • icon--share
    • twitter
    <svg role="img" class="svgicon svgicon--twitter">
      <title>ADA title goes here</title>
      <use xlink:href="#twitter"></use>
    </svg>
    
Form Elements - 2022 Style Updates
  • Primary Input
    .input-primary
Legacy Styles
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