Starbucks
中文（台灣）
頂端一條星巴克綠的色條，下面是淺灰和白底，大張飲料照片當主視覺。按鈕是黑色細框的膠囊形，文字全用一般粗細的黑體，層次靠字級拉開。
顏色
primary
#006341
house-green
#1E3932
accent-green
#71B43A
link-green
#2A8A15
on-primary
#FFFFFF
ink
#000000
primary-dark
#0E382C
ink-soft
#1E1E1E
text
#231F20
text-warm
#3D3935
text-muted
#666666
text-breadcrumb
#53534A
surface
#FFFFFF
surface-header
#F7F7F7
surface-section
#F0F0F0
surface-map
#E5E3DF
border
#DDDDDD
border-chip
#AAAAAA
border-input
#ACACAC
placeholder
#CCCCCC
surface-hover
#EDEEEE
字級
section-title · Noto Sans TC · 42px
The quick brown fox 敏捷的狐狸
list-title · Noto Sans TC · 27px
The quick brown fox 敏捷的狐狸
store-name · Noto Sans TC · 18px
The quick brown fox 敏捷的狐狸
card-title · Noto Sans TC · 19px
The quick brown fox 敏捷的狐狸
nav-label · Noto Sans TC · 15px
The quick brown fox 敏捷的狐狸
body-md · Noto Sans TC · 16px
The quick brown fox 敏捷的狐狸
body-sm · Noto Sans TC · 14px
The quick brown fox 敏捷的狐狸
body-light · Noto Sans TC · 14px
The quick brown fox 敏捷的狐狸
breadcrumb · Noto Sans TC · 15px
The quick brown fox 敏捷的狐狸
input-text · Noto Sans TC · 13px
The quick brown fox 敏捷的狐狸
caption · Noto Sans TC · 13px
The quick brown fox 敏捷的狐狸
button-label · Noto Sans TC · 16px
The quick brown fox 敏捷的狐狸
圓角
sm
4px
md
8px
lg
12px
pill
32px
full
9999px
間距
xs
4px
sm
12px
md
15px
lg
30px
xl
48px
page-margin
80px
content-width
1280px
元件
- brand-strip
- header
- nav-link
- nav-link-hover
- button-outline
- button-hero
- filter-button
- category-chip
- category-chip-hover
- category-chip-active
- category-chip-border
- breadcrumb
- section-heading
- list-heading
- product-card
- product-card-name
- store-search-field
- store-search-field-focus
- store-search-placeholder
- store-search-border
- store-list-item
- store-list-detail
- store-map
- carousel-dot-active
- promo-section
- divider
- footer
- promo-label