Nintendo

中文(台灣)

https://www.nintendo.com/tw/

白底和淺灰底為主,左上角一塊紅底白字的標誌定調,紅色只用在主要按鈕和選中的頁籤。按鈕、頁籤方正,幾乎沒有圓角,色彩交給遊戲主視覺。

主色系
紅
配色印象
強調色突出
設計風格
扁平

顏色

  • 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