Hedy Mao's Portfolio

Coming soon!

內容正在整理與優化中，

希望用更完整的方式與你分享。

想了解更多細節，歡迎與我聯絡 👋

crissymaono1@gmail.com

Hedy Mao

精選作品

關於我

下載履歷

聯繫我

Coming soon!

內容正在整理與優化中，

希望用更完整的方式與你分享。

看看其他作品來更認識我！

企業共用設計系統建置

COP28 氣候大會專題網站設計

全家集團電商與招商平台｜

好賣家

Coming soon!

內容正在整理與優化中，

希望用更完整的方式與你分享。

Hedy Mao

精選作品

關於我

下載履歷

聯繫我

看看其他作品來更認識我！

企業共用設計系統建置

Input

Password

Message

Normal message

Warning message

Success message

Error message

Loading message

Input

Mode

Style

Value

Description

Light-xsmall

0 1px 2px 0px #000000 30%,

0 1px 3px 1px #000000 30%

可用於 raised card（訂閱方案卡片）

Light-small

0 1px 2px 0px #000000 30%,

0 2px 6px 2px #000000 30%

可用於 dropdown 和 popover

Light-medium

0 4px 8px 3px #000000 30%,

0 1px 3px 0px #000000 30%

可用於 navigation、drawer 和 header

Light-large

0 6px 10px 4px #000000 30%,

0 2px 3px 0px #000000 30%

可用於 floating button

Light-xlarge

0 8px 12px 6px #000000 30%,

0 4px 4px 0px #000000 30%

可用於 banner

Button

Default

Small

Large

Primary

Default

Button

Dropdown

Default

Hover

Focused

Pressed

Disabled

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

COP28 氣候大會專題網站設計

全家集團電商與招商平台｜

好賣家

想了解更多細節，歡迎與我聯絡 👋

crissymaono1@gmail.com

看看其他作品來更認識我！

企業共用設計系統建置

Input

Password

Message

Normal message

Warning message

Success message

Error message

Loading message

Input

Mode

Style

Value

Description

Light-xsmall

0 1px 2px 0px #000000 30%,

0 1px 3px 1px #000000 30%

可用於 raised card（訂閱方案卡片）

Light-small

0 1px 2px 0px #000000 30%,

0 2px 6px 2px #000000 30%

可用於 dropdown 和 popover

Light-medium

0 4px 8px 3px #000000 30%,

0 1px 3px 0px #000000 30%

可用於 navigation、drawer 和 header

Light-large

0 6px 10px 4px #000000 30%,

0 2px 3px 0px #000000 30%

可用於 floating button

Light-xlarge

0 8px 12px 6px #000000 30%,

0 4px 4px 0px #000000 30%

可用於 banner

Button

Default

Small

Large

Primary

Default

Button

Dropdown

Default

Hover

Focused

Pressed

Disabled

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

COP28 氣候大會專題網站設計

全家集團電商與招商平台｜好賣家

想了解更多細節，歡迎與我聯絡 👋

crissymaono1@gmail.com