astertaste

Apple

中文（台灣）

https://www.apple.com/tw/

黑底和淺灰底的滿版區塊輪流出現，每塊只放一項產品的大照片和置中的粗黑體標題。藍色只用在膠囊形按鈕和連結，沒有陰影和框線。

產業
科技・軟體・AI
網站類型
產品・服務網站
主色系
藍
黑
白
配色印象
黑白單色
強調色突出
設計風格
極簡
俐落時尚

顏色

  • primary

    #0071E3

  • on-primary

    #FFFFFF

  • link-on-dark

    #2997FF

  • ink

    #1D1D1F

  • surface-dark

    #000000

  • text-secondary

    #6E6E73

  • link

    #0066CC

  • ink-strong

    #000000

  • surface

    #FFFFFF

  • surface-alt

    #F5F5F7

  • surface-tint

    #FAFAFC

  • surface-chip

    #E8E8ED

  • on-dark

    #F5F5F7

  • text-tertiary

    #86868B

  • border-light

    #D2D2D7

  • nav-background

    #1D1D1FCC

  • nav-text

    #FFFFFFCC

  • nav-text-light

    #000000CC

  • breadcrumb-text

    #000000B8

  • primary-hover

    #0077ED

字級

  • hero-xl · SF Pro TC · 80px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • display-xl · SF Pro TC · 56px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • headline-lg · SF Pro TC · 40px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • headline-md · SF Pro TC · 28px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • subhead-lg · SF Pro TC · 28px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • body-lg · SF Pro TC · 21px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • title-sm · SF Pro TC · 17px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • body-md · SF Pro TC · 17px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • body-sm · SF Pro TC · 14px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • label-sm · SF Pro TC · 14px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • caption · SF Pro TC · 12px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • footnote-mark · SF Pro TC · 17px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • nav-label · SF Pro TC · 12px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

圓角

  • none

    0px

  • sm

    8px

  • md

    12px

  • card

    28px

  • pill

    980px

  • full

    9999px

間距

  • xs

    8px

  • sm

    12px

  • md

    16px

  • lg

    24px

  • xl

    48px

  • xxl

    56px

  • section

    144px

  • nav-height

    44px

  • content-width

    980px

  • wide-width

    1260px

元件

  • button-primary
  • button-primary-hover
  • button-primary-focus
  • button-primary-small
  • button-outline
  • button-outline-hover
  • button-outline-on-dark
  • button-outline-on-dark-hover
  • text-link
  • text-link-hover
  • search-result-title
  • search-result-title-hover
  • global-nav
  • global-nav-link-hover
  • global-nav-light
  • global-nav-light-link-hover
  • hero-dark
  • hero-light
  • page-title
  • promo-tile
  • product-card
  • chapter-nav-item
  • tab-nav-item
  • tab-nav-item-active
  • select-pill
  • search-field
  • pagination-input
  • pagination-border
  • carousel-button
  • breadcrumb
  • release-note
  • footnote-ref
  • footer