日本タイポグラフィ協会
日文
淺灰白底配黑字，沒有任何彩色和陰影。首頁中段是一排黑白交錯的長條，上面是直排的明朝體；分類標籤是直角細框，按鈕是細黑框的膠囊形，標題字距逐字調整。
顏色
primary
#000000
ink-warm
#231816
text-muted
#666666
border-light
#CCCCCC
surface
#FAFAFA
surface-white
#FFFFFF
on-dark
#FFFFFF
border-hover
#999999
字級
display-en · Inter · 44px
The quick brown fox 敏捷的狐狸
page-title · Gothic BBB · 32px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
site-title · Gothic BBB · 22px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
heading-md · Gothic BBB · 22px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
article-body · Gothic BBB · 18px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
stat · Inter · 18px
The quick brown fox 敏捷的狐狸
title-md · Gothic BBB · 16px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
nav-label · Gothic BBB · 16px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
body-sm · Gothic BBB · 13px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
label-en · Inter · 14px
The quick brown fox 敏捷的狐狸
meta · Inter · 12px
The quick brown fox 敏捷的狐狸
caption · Gothic BBB · 11px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
圓角
none
0px
xs
3px
pill
9999px
full
9999px
間距
xs
5px
sm
10px
md
24px
lg
40px
xl
80px
side-rail
82px
form-width
754px
元件
- page
- site-header
- nav-link
- button-outline-pill
- button-outline-pill-hover
- menu-button-mobile
- category-tag
- category-tag-filled
- poster-strip
- poster-gap
- section-heading
- page-heading
- article-text
- breadcrumb
- archive-sidebar
- pagination
- news-date
- member-logo-text
- member-count
- english-label
- form-box
- input-field
- input-field-border
- input-field-hover
- input-field-hover-border
- textarea
- checkbox
- submit-button
- footnote
- social-icon