Airbnb
中文(台灣)
白底深灰字,中間一條大圓角搜尋列配粉紅色的圓形搜尋鈕。房源照片排成一列列圓角正方形,字小,層次靠粗細,粉紅色只出現在標誌和搜尋鈕。
顏色
primary
#FF385C
on-primary
#FFFFFF
ink
#222222
text-secondary
#6C6C6C
border
#DDDDDD
primary-deep
#E61E4D
surface
#FFFFFF
surface-header
#F7F7F7
surface-chip
#F2F2F2
surface-map
#E5E3DF
ink-hover
#3F3F3F
text-disabled
#C1C1C1
surface-chip-hover
#EBEBEB
error
#C13515
字級
headline-lg · Airbnb Cereal VF · 26px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
help-title · Airbnb Cereal VF · 32px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
section-title · Airbnb Cereal VF · 22px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
title-md · Airbnb Cereal VF · 15px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
label-md · Airbnb Cereal VF · 14px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
body-md · Airbnb Cereal VF · 14px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
body-lg · Airbnb Cereal VF · 16px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
body-sm · Airbnb Cereal VF · 12px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
label-sm · Airbnb Cereal VF · 12px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
badge · Airbnb Cereal VF · 11px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
圓角
sm
8px
md
12px
lg
20px
xl
32px
full
9999px
間距
xs
4px
sm
8px
md
12px
lg
24px
xl
48px
page-margin
48px
元件
- header
- search-bar
- search-bar-placeholder
- search-button
- button-primary
- button-dark
- button-dark-hover
- button-dark-focus
- button-secondary
- button-secondary-hover
- button-secondary-focus
- button-text
- icon-button
- carousel-arrow-disabled
- filter-chip
- help-tab
- help-tab-active
- help-search-field
- listing-photo
- listing-title
- listing-meta
- guest-favorite-badge
- booking-card
- booking-field
- map-panel
- modal
- section-heading
- page-title
- help-heading
- logo
- error-text
- link-chip