我的帳戶
搜尋鄰近櫃點
購物說明
訂單、退換貨、配送等相關說明
Styleguide
Fonts
-
BBText Regular
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-regular -
BBText Regular Italic
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-regular-italic -
BBText Bold
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-bold -
BBText Bold Italic
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-bold-italic -
BBText Light
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-light -
BBText Light Italic
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bbtext-light-italic -
Brandon Text
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text -
Brandon Text Light
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text-light -
Brandon Text Medium
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text-medium -
Brandon Text Bold
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.brandon-text-bold -
BB Sans
AaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;
.bb-sans
Typography - 2021 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
Body Text.
Body Text
with a Linebreak.typography-body-text -
Link
Shop.typography-link-text
-
Label
Label Text.typography-label-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
-
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 - 2021 Style Updates
-
Typography & UI
Black
#221F20
$color-core-blackGray on Light
rgba(34, 31, 32, 0.65)
$color-gray-op65Outline
rgba(34, 31, 32, 0.1)
$color-gray-op10White
#FFFFFF
$color-whiteGray on Dark
rgba(34, 31, 32, 0.5);
$color-gray-op50White on Dark
rgba(255, 255, 255, 0.5)
$color-white-op50 -
Core
BLack
#221F20
$color-core-blackGold
#E4CB9B
$color-core-goldLight Gray
#AFB4BB
$color-core-light-grayWhite
#FFFFFF
$color-white -
Category
Crushed 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
Legacy Styles
Colors
-
Primary Colors
White
#fff
$color-whiteBlack
#000
$color-black -
Secondary Colors
Reddish Pink
#ff3453
$color-reddish-pinkWarm Grey
#777777
$color-warm-greyDark Grey
#1b1b1b
$color-black-2Light Grey
#EBEBEB
$color-very-light-pink
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 - 2021 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