我的帳戶
搜尋鄰近櫃點
購物說明
訂單、退換貨、配送等相關說明
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 - 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
-
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
-
-
arrow_down
-
arrow_left
-
arrow_right
-
arrow_up
-
atsign
-
bus
-
calendar
-
car
-
cart
-
checkbox
-
checkbox_checked
-
circle_check
-
circle_check_thick
-
circle_close
-
circle_up
-
close
-
douban
-
email
-
facebook
-
finder
-
flag_2
-
flag_head
-
flag_star
-
glasses
-
google
-
hamburger
-
head
-
heart
-
heart_outline
-
instagram
-
kaixin
-
kakao_off
-
kakao_on
-
line
-
livechat
-
livechat2
-
logo
-
marker_mobile
-
minus
-
phone
-
pinterest
-
plane
-
play
-
plus
-
print
-
quickshop_arrow
-
radio
-
radio_checked
-
riding
-
search
-
share
-
shipping_truck
-
star
-
star_outline
-
tag
-
tumblr
-
twitter
-
walking
-
wechat
-
weibo
-
weixin
-
xiaonei
-
youtube
-
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