Nintendo
中文(台灣)
白底和淺灰底為主,左上角一塊紅底白字的標誌定調,紅色只用在主要按鈕和選中的頁籤。按鈕、頁籤方正,幾乎沒有圓角,色彩交給遊戲主視覺。
顏色
primary
#E60012
on-primary
#FFFFFF
heading
#1B1B1B
text
#3C3C3C
border
#D9D9D9
primary-deep
#CF0001
text-sub
#8C8C8C
text-light
#9B9B9B
surface
#FFFFFF
surface-gray
#F2F2F2
surface-gray-strong
#E6E6E6
text-disabled
#B4B4B4
字級
article-title · ncommonCn · 30px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
section-title · ncommonCn · 30px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
article-heading · ncommonCn · 18px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
nav-label · ncommonCn · 14px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
article-body · ncommonCn · 16px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
body-md · ncommonCn · 15px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
body-sm · ncommonCn · 14px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
card-title · ncommonCn · 12px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
label-en · Roboto · 14px
The quick brown fox 敏捷的狐狸
caption · ncommonCn · 10px
Google Fonts 上沒有這個字型,用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
圓角
sm
2px
md
4px
full
9999px
間距
xs
8px
sm
14px
md
24px
lg
40px
xl
72px
header-height
73px
content-width
1200px
元件
- header
- header-mobile
- logo-block
- button-primary
- button-primary-hover
- button-primary-focus
- button-secondary
- button-secondary-hover
- text-link
- text-link-hover
- pickup-tab
- pickup-tab-active
- topic-card
- topic-card-hover
- filter-tab
- filter-tab-active
- switcher-tab
- switcher-tab-active
- keyword-field
- keyword-field-placeholder
- search-button-disabled
- pagination-button
- article-date
- article-header
- article-subheading
- article-text
- breadcrumb-band
- section
- news-meta
- news-date-light
- divider
- hover-accent
- footer