search

顏色

Mindtrix color 區分為五大色系：Primary、Secondary、Basic、Notice。我們將顏色劃分為9種程度並使用RGB、Hex色碼顯示，方便設計師和工程師開發上溝通。

hashtag
主要色系

Mindtrix 在色彩上採用PANTONE 2022長春花藍的色調，切分為9種色階，長春花籃具有藍色和紫紅色系結合，象徵實體與虛擬生活也以新的方式融合。它擴展你對生活的定義，迎向充滿活力的web3世界，探索與創造新的可能性。Mindtrix認為這樣概念與我們的產品精神相符合。

Cover
Color

Primary #100

RGBA

rgba(230, 230, 250, 1)

Hex

#E6E6FA

Cover
Color

Primary #200

RGBA

rgba(206, 207, 246, 1)

Hex

#CECFF6

Cover
Color

Primary #300

RGBA

rgba(174, 175, 229, 1)

Hex

#AEAFE5

Cover
Color

Primary #400

RGBA

rgba(142, 143, 204, 1)

Hex

#8E8FCC

Cover
Color

Primary #500

RGBA

rgba(102, 103, 171, 1)

Hex

#6667AB

Cover
Color

Primary #600

RGBA

rgba(74, 75, 147, 1)

Hex

#4A4B93

Cover
Color

Primary #700

RGBA

rgba(51, 52, 123, 1)

Hex

#33347B

Cover
Color

Primary #800

RGBA

rgba(32, 33, 99, 1)

Hex

#202163

Cover
Color

Primary #900

RGBA

rgba(19, 20, 82, 1)

Hex

#131452

hashtag
次要色系

次要色系我們推薦使用主色的對比色進行傳達，抓著使用者最好的目光就是利用對比來呈現。Mindtrix選擇向日葵黃色調，讓用戶在web3的產品間也能清晰的辨別與使用，提高用戶注意力。

Cover

Secondary #100

rgba(254, 251, 206, 1)

#FEFBCE

Cover

Secondary #200

rgba(254, 246, 158, 1)

#FEF69E

Cover

Secondary #300

rgba(254, 240, 110, 1)

#FEF06E

Cover

Secondary #400

rgba(253, 234, 74, 1)

#FDEA4A

Cover

Secondary #500

rgba(252, 224, 15, 1)

#FCE00F

Cover

Secondary #600

rgba(216, 189, 10, 1)

#D8BD0A

Cover

Secondary #700

rgba(181, 156, 7, 1)

#B59C07

Cover

Secondary #800

rgba(146, 124, 4, 1)

#927C04

Cover

Secondary #900

rgba(120, 101, 2, 1)

#786502

hashtag
基礎色系

黑灰白的色調為產品的穩定劑，能讓使用者可以舒適的閱讀，瀏覽產品資訊。

Cover
Color

Basic #100

RGBA

rgba(255, 255, 255, 1)

Hex

#FFFFFF

Cover
Color

Basic #200

RGBA

rgba(247, 249, 252, 1)

Hex

#F7F9FC

Cover
Color

Basic #300

RGBA

rgba(237, 241, 247, 1)

Hex

#EDF1F7

Cover
Color

Basic #400

RGBA

rgba(228, 233, 242, 1)

Hex

#E4E9F2

Cover
Color

Basic #500

RGBA

rgba(197, 206, 224, 1)

Hex

#C5CEE0

Cover
Color

Basic #600

RGBA

rgba(143, 155, 179, 1)

Hex

#8F9BB3

Cover
Color

Basic #700

RGBA

rgba(46, 58, 89, 1)

Hex

#2E3A59

Cover
Color

Basic #800

RGBA

rgba(34, 43, 69, 1)

Hex

#222B45

Cover
Color

Basic #900

RGBA

rgba(12, 12, 12, 1)

Hex

#0C0C0C

hashtag
功能色系

功能色對應到介面的使用狀態：網址、成功、提醒、錯誤，Mindtrix設計系統專注在提醒和錯誤的色系，因為產品要能讓用戶準確知道何時要特別警慎，遇到問題要能輕易排解，我們使用紅色調，紅色在日常生活經驗中具備提醒、錯誤的效果，在產品使用可以加深用戶印象。成功、網址等狀態會參考著主色、次要色系進行使用。

Cover
Color

Danger #100

RGBA

rgba(255, 228, 212, 1)

Hex

#FFE4D4

Cover
Color

Danger #200

RGBA

rgba(255, 195, 170, 1)

Hex

#FFC3AA

Cover
Color

Danger #300

RGBA

rgba(255, 155, 127, 1)

Hex

#FF9B7F

Cover
Color

Danger #400

RGBA

rgba(255, 116, 96, 1)

Hex

#FF7460

Cover
Color

Danger #500

RGBA

rgba(255, 53, 43, 1)

Hex

#FF352B

Cover
Color

Danger #600

RGBA

rgba(219, 31, 38, 1)

Hex

#DB1F26

Cover
Color

Danger #700

RGBA

rgba(183, 21, 41, 1)

Hex

#B71529

Cover
Color

Danger #800

RGBA

rgba(147, 13, 41, 1)

Hex

#930D29

Cover
Color

Danger #900

RGBA

rgba(122, 8, 41, 1)

Hex

#7A0829

PreviousUI風格規範Next字體

Last updated