設計系統-Vue2 版

primary, success, warning, danger, gray 以及其他輔助顏色

色彩計畫

#B3D9FF

#80BFFF

#4CA6FF

#1A8CFF

#0073E6

#0059B2

#004080

#00264D

#000D1A

#AEDF95

#8FD36E

#71C847

#5AA933

#458227

#305A1B

#1B330F

#060C04

#000000

#FFCD70

#FFBB3D

#FFA90A

#D68B00

#A36A00

#704900

#3D2800

#0A0700

#000000

#FEBEBE

#FE8B8B

#FD5959

#FC2626

#EC0303

#BA0202

#880202

#560101

#230000

#EEEEEE

#D4D4D4

#BBBBBB

#A1A1A1

#888888

#6F6F6F

#555555

#3C3C3C

#222222

#FFFFFF(White)

#090909(Black)

#FFBB00(Focus)

#5C45D2(Visited)

#BBBBBB(Placeholder)

#BBBBBB(Border)

Noto sans tc

字體字型、大小、粗細、間距、行距與中英文

為了自主性，我們並沒有將 Noto Sans TC 放到框架裡，但我們推薦使用 Noto Sans TC。

為無障礙網頁設計而生的 UI 框架

為無障礙網頁設計而生的 UI 框架(H1)

為無障礙網頁設計而生的 UI 框架(H2)

為無障礙網頁設計而生的 UI 框架(H3)

為無障礙網頁設計而生的 UI 框架(H4)

為無障礙網頁設計而生的 UI 框架(H5)

為無障礙網頁設計而生的 UI 框架(H6)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~!@#$%^&*()_+{[}]|\:;”‘<,>.?/

～！＠＃＄％＾＆＊（）＿＋『「』」｜、：”‘，。？

padding

間距

使用 4px 的倍數為基底增長

0.25rem
4px

0.5rem
8px

0.75rem
12px

1rem
16px

1.5rem
24px

2rem
32px

3rem
48px

4rem
64px

5rem
80px

6rem
96px

8rem
128px

10rem
160px

icon

圖示

同樣為了自由度，我們沒有特別設計 icon，
如果您也沒有特別設計，我們推薦使用 Font Awesome，
或是謹慎的使用 Emoji 也是不錯的選擇

Design system resources

設計規範資源下載

Figma Community

前往下載

設計規範部分關於 CSS 或 SCSS 請詳見如何使用元件