我的帳戶 
店舖地址 客戶服務
退貨與換貨, 常見問題
Styleguide
Fonts
- BBText RegularAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-regular - BBText Regular ItalicAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-regular-italic - BBText BoldAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-bold - BBText Bold ItalicAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-bold-italic - BBText LightAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-light - BBText Light ItalicAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-light-italic - Brandon TextAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text - Brandon Text LightAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text-light - Brandon Text MediumAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text-medium - Brandon Text BoldAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text-bold - BB SansAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bb-sans
Typography - 2022 Style Updates
- Extra Large HeadlineExtra Large Headline Text.Extra Large Headline Text
with a Linebreak.typography-headline--xl - Large HeadlineLarge Headline Text.Large Headline Text
with a Linebreak.typography-headline--l - Medium HeadlineMedium Headline Text.Medium Headline Text
with a Linebreak.typography-headline--m - BodyLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non tempor nunc dictum. Auctor turpis amet diam, proin condimentum dictum pellentesque tortor..typography-body-text
- LinkLink.typography-link-text
- LabelShop the Look.typography-label-text
- Annotation© Bobbi Brown Professional Cosmetics, Inc. All worldwide rights reserved..typography-annotation-text
Legacy Styles
Typography - V1
- H1H1 Text.H1 Text
with a Linebreak.h1 - H2H2 Text.H2 Text
with a Linebreak.h2 - H3H3 Text.H3 Text
with a Linebreak.h3 - H4H4 Text.H4 Text
with a Linebreak.h4 - H5H5 Text.H5 Text
with a Linebreak.h5 - H6H6 Text.H6 Text
with a Linebreak.h6 - H7H7 Text.H7 Text
with a Linebreak.h7 - H8H8 Text.H8 Text
with a Linebreak.h8 - H9H9 Text.H9 Text
with a Linebreak.h9 - H10H10 Text.H10 Text
with a Linebreak.h10 - H11H11 Text.H11 Text
with a Linebreak.h11 - H12H12 Text.H12 Text
with a Linebreak.h12 - H13H13 Text.H13 Text
with a Linebreak.h13 - H14H14 Text.H14 Text
with a Linebreak.h14 - H15H15 Text.H15 Text
with a Linebreak.h15 - H16H16 Text.H16 Text
with a Linebreak.h16 - H17H17 Text.H17 Text
with a Linebreak.h17 - H18H18 Text.H18 Text
with a Linebreak.h18 - H19H19 Text.H19 Text
with a Linebreak.h19 - H20H20 Text.H20 Text
with a Linebreak.h20 - H21H21 Text.H21 Text
with a Linebreak.h21 - H22H22 Text.H22 Text
with a Linebreak.h22 - H23H23 Text.H23 Text
with a Linebreak.h23 - H24H24 Text.H24 Text
with a Linebreak.h24 - H25H25 Text.H25 Text
with a Linebreak.h25
Typography - V2
- T1T1 Text.T1 Text
with a Linebreak.t1 - T2T2 Text.T2 Text
with a Linebreak.t2 - T3T3 Text.T3 Text
with a Linebreak.t3 - T4T4 Text.T4 Text
with a Linebreak.t4 - T5T1 Text.T1 Text
with a Linebreak.t5
- 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
Typography - ELC specific
Colors - 2022 Style Updates
- Typography & UIBlack
#221F20
$color-core-blackGray on Light
#6F6D6E
$color-gray-on-lightLine
#E9E9E9
$color-lineWhite
#FFFFFF
$color-whiteGray on Dark
#A9A9A9
$color-core-dark-grayRed (Error)
#C8323E
$color-core-red - CoreBLack
#221F20
$color-core-blackGold
#D6B371
$color-core-goldLight Gray
#AFB4BB
$color-core-light-grayWhite
#FFFFFF
$color-white - CategoryCrushed Lip
#DD4955
$color-category-crushed-lipExtra Lip
#DC788E
$color-category-extra-lipGlow
#EBC4C1
$color-category-glowFoundation Light
#FAE7D4
$color-category-foundation-lightCorrect & Conceal
#EED8C9
$color-category-correct-concealFinish Powder
#E3C2AA
$color-category-finish-powderBrow
#AE9485
$color-category-browBrow Dark
#85614E
$color-category-brow-darkFoundation
#AA7256
$color-category-foundationFoundation Dark
#6E4335
$color-category-foundation-darkMascara
#202225
$color-category-mascaraEye
#AFB4BB
$color-core-light-graySkincare
#E3EDF8
$color-category-skincareRemedies
#FEF4CD
$color-category-remedies
Icons
- icon--add
- icon--arrow-left
- icon--arrow-right
- icon--bag
- icon--camera
- icon--chat-fab
- icon--close
- icon--contract
- icon--dropdown
- icon--expand
- icon--favorite
- icon--grid
- icon--info
- icon--info-filled
- icon--list
- icon--logo-afterpay
- icon--logo-bb
- icon--logo-bb-stacked
- icon--menu
- icon--minus
- icon--pause
- icon--radio
- icon--radio-checked
- 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
- Inputinput
- Input - Error.error
- Input - Success.success
- Textareatextarea
- Textarea - Error.error
- Textarea - Success.success
- Dropdown - Native selectselect > option
- Radioinput type="radio"
- Checkboxinput type="checkbox"
Styleguide Tools