Coming soon!
內容正在整理與優化中，
希望用更完整的方式與你分享。
觀看專案成果
看看其他作品來更認識我！
想了解更多細節，歡迎與我聯絡 👋
看看其他作品來更認識我！
企業共用設計系統建置
Input
Password
Password
Password
Message
Normal message
Warning message
Success message
Error message
Loading message
Input
Mode
Style
Value
Description
Light-xsmall
Light-xsmall
0 1px 2px 0px #000000 30%,
0 1px 3px 1px #000000 30%
可用於 raised card（訂閱方案卡片）
Light-small
Light-small
0 1px 2px 0px #000000 30%,
0 2px 6px 2px #000000 30%
可用於 dropdown 和 popover
Light-medium
Light-medium
0 4px 8px 3px #000000 30%,
0 1px 3px 0px #000000 30%
可用於 navigation、drawer 和 header
Light-large
Light-large
0 6px 10px 4px #000000 30%,
0 2px 3px 0px #000000 30%
可用於 floating button
Light-xlarge
Light-xlarge
0 8px 12px 6px #000000 30%,
0 4px 4px 0px #000000 30%
可用於 banner
Button
Default
Small
Large
Primary
Default
Button
Button
Button
Button
Button
Button
Dropdown
Default
Hover
Focused
Pressed
Disabled
Dropdown
Dropdown
Dropdown
Dropdown
Dropdown
Elevation 1
Hex: #00000
Alpha: 2%
X: 0 , Y: 1 , B: 1 , S: 0
Hex: #00000
Alpha: 4%
X: 0 , Y: 2 , B: 4 , S: 0
Elevation 2
Hex: #00000
Alpha: 4%
X: 0 , Y: 1 , B: 4 , S: 0
Hex: #00000
Alpha: 8%
X: 0 , Y: 4 , B: 10 , S: 0
Elevation 3
Hex: #00000
Alpha: 4%
X: 0 , Y: 2 , B: 20 , S: 0
Hex: #00000
Alpha: 8%
X: 0 , Y: 8 , B: 32 , S: 0
Elevation 4
Hex: #00000
Alpha: 6%
X: 0 , Y: 8 , B: 20 , S: 0
Hex: #00000
Alpha: 12%
X: 0 , Y: 24 , B: 60 , S: 0
Theme color
Primary
primary_darkest
點擊
#e91e63
primary_darker
hover
#e91e63
primary_dark
主色
#254edb
primary_DEFAULT
主色
#3366ff
primary_light
點擊
#6690ff
primary_lighter
備註
#84a9ff
primary_lightest
背景
#D6e4ff
Neutral color
Text
black
主要文字
#000000
gray-darkest
主要文字
#212121
gray-darker
輔助文字
#424242
gray-dark
輔助文字
#757575
gray-DEFAULT
輔助文字
#9e9e9e
gray-light
Placeholder
#bdbdbd
gray-lighter
分隔線
#e0e0e0
gray-lightest
背景
#f5f5f5
white
背景
#ffffff
Icon
arrow-block-down
arrow-block-left
arrow-block-right
arrow-block-up
arrow-circle-broken-down
arrow-circle-broken-down-left
arrow-circle-broken-down-right
arrow-circle-broken-left
arrow-circle-broken-right
arrow-circle-broken-up
arrow-circle-broken-up-left
arrow-circle-broken-up-right
arrow-circle-down
arrow-circle-down-left
arrow-circle-down-right
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-circle-up-left
arrow-circle-up-right
arrow-down
arrow-down-left
arrow-down-right
arrow-sort
arrow-drop-down/rounded
arrow-drop-down/outlined
arrow-left
arrow-narrow-down
arrow-narrow-down-left
arrow-narrow-down-right
arrow-narrow-left
arrow-narrow-right
arrow-narrow-up
arrow-narrow-up-left
arrow-narrow-up-right
arrow-right
arrow-square-down
arrow-square-down-left
arrow-square-down-right
arrow-square-left
arrow-square-right
arrow-square-up
arrow-square-up-left
arrow-square-up-right
arrow-up
arrow-up-left
arrow-up-right
arrows-down
arrows-left
arrow-drop-up/rounded
arrow-drop-up/outlined
arrows-right
arrows-triangle
arrows-up
chevron-down
chevron-down-double
chevron-left
chevron-left-double
chevron-right
chevron-right-double
chevron-selector-horizontal
chevron-selector-vertical
chevron-up
chevron-up-double
corner-down-left
corner-down-right
corner-left-down
corner-left-up
corner-right-down
corner-right-up
corner-up-left
corner-up-right
expand-01
expand-02
arrow-left/rounded
arrow-left/outlined
expand-03
expand-04
expand-05
expand-06
flip-backward
flip-forward
infinity
refresh-ccw-01
refresh-ccw-02
refresh-ccw-03
refresh-ccw-04
refresh-ccw-05
refresh-cw-01
refresh-cw-02
refresh-cw-03
refresh-cw-04
refresh-cw-05
reverse-left
reverse-right
switch-horizontal-01
switch-horizontal-02
switch-vertical-01
switch-vertical-02
arrow-right/rounded
arrow-right/filled
Developers
SaaS
Design System
Logo
Icons
Effects
FloatButton
Break point & Grid
全家集團電商與招商平台｜
好賣家
全家集團內部 ERP 系統｜Intra
Coming soon!
內容正在整理與優化中，
希望用更完整的方式與你分享。
觀看專案成果
想了解更多細節，歡迎與我聯絡 👋
想了解更多細節，歡迎與我聯絡 👋
Coming soon!
內容正在整理與優化中，
希望用更完整的方式與你分享。
觀看專案成果