Typography 字體設計
Font
Noto Serif TCLine Height
Heading120%在大標題上使用Normal150%在內文上使用Text Style
Heading 100px B
The quick brown fox jumps over the lazy dog.
Heading 48px B
The quick brown fox jumps over the lazy dog.
Heading 40px B
The quick brown fox jumps over the lazy dog.
Heading 32px B
The quick brown fox jumps over the lazy dog.
Heading 28px B
The quick brown fox jumps over the lazy dog.
Heading 24px B
The quick brown fox jumps over the lazy dog.
Heading 20px B
The quick brown fox jumps over the lazy dog.
Normal 16px B
The quick brown fox jumps over the lazy dog.
Normal 14px B
The quick brown fox jumps over the lazy dog.
Normal 16px R
The quick brown fox jumps over the lazy dog.
Normal 14px R
The quick brown fox jumps over the lazy dog.
Normal 12px R
The quick brown fox jumps over the lazy dog.
Color System 色彩系統
主要色 Primary
- #7B6651
- #BF9D7D
- #D0B79F
- #E1D1C2
- #F1EAE4
- #FAF7F5
輔助色 Semantic
Success
- #299F65
- #52DD7E
- #BCFBBD
- #E8FEE7
Info
- #1D66AC
- #3BADEF
- #B1EFFD
- #E6FBFE
Alert / Error
- #C22538
- #DA3E51
- #F5CCD1
- #FDECEF
輔助色 Semantic
- #140F0A
- #000000
- #4B4B4B
- #909090
- #ECECEC
- #F9F9F9
- #FFFFFF
Icon 圖標
Material Design Icons
Iconfy
LOGO 標誌
Primary Color
White Color
Hero Button 導引按鈕
Default
Button 按鈕
Primary
with icon no icon Initial Disable Secondary
with icon no icon Initial Disable Ghost
with icon no icon Initial Disable Text
with icon no icon Initial Disable
Input Field 輸入框
必填 基礎 佔位字 錯誤訊息
Dropdown 下拉
Default
Section Tab 區塊標籤
Default ItemActive Item
Checkbox 確認方塊
Default
Stepper 進度條
Default