顏色
Mindtrix color 區分為五大色系:Primary、Secondary、Basic、Notice。我們將顏色劃分為9種程度並使用RGB、Hex色碼顯示,方便設計師和工程師開發上溝通。
主要色系
Mindtrix 在色彩上採用PANTONE 2022長春花藍的色調,切分為9種色階,長春花籃具有藍色和紫紅色系結合,象徵實體與虛擬生活也以新的方式融合。它擴展你對生活的定義,迎向充滿活力的web3世界,探索與創造新的可能性。Mindtrix認為這樣概念與我們的產品精神相符合。

Primary #100
rgba(230, 230, 250, 1)
#E6E6FA

Primary #200
rgba(206, 207, 246, 1)
#CECFF6

Primary #300
rgba(174, 175, 229, 1)
#AEAFE5

Primary #400
rgba(142, 143, 204, 1)
#8E8FCC

Primary #500
rgba(102, 103, 171, 1)
#6667AB

Primary #600
rgba(74, 75, 147, 1)
#4A4B93

Primary #700
rgba(51, 52, 123, 1)
#33347B

Primary #800
rgba(32, 33, 99, 1)
#202163

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

Secondary #100
rgba(254, 251, 206, 1)
#FEFBCE

Secondary #200
rgba(254, 246, 158, 1)
#FEF69E

Secondary #300
rgba(254, 240, 110, 1)
#FEF06E

Secondary #400
rgba(253, 234, 74, 1)
#FDEA4A

Secondary #500
rgba(252, 224, 15, 1)
#FCE00F

Secondary #600
rgba(216, 189, 10, 1)
#D8BD0A

Secondary #700
rgba(181, 156, 7, 1)
#B59C07

Secondary #800
rgba(146, 124, 4, 1)
#927C04

Secondary #900
rgba(120, 101, 2, 1)
#786502
基礎色系
黑灰白的色調為產品的穩定劑,能讓使用者可以舒適的閱讀,瀏覽產品資訊。

Basic #100
rgba(255, 255, 255, 1)
#FFFFFF

Basic #200
rgba(247, 249, 252, 1)
#F7F9FC

Basic #300
rgba(237, 241, 247, 1)
#EDF1F7

Basic #400
rgba(228, 233, 242, 1)
#E4E9F2

Basic #500
rgba(197, 206, 224, 1)
#C5CEE0

Basic #600
rgba(143, 155, 179, 1)
#8F9BB3

Basic #700
rgba(46, 58, 89, 1)
#2E3A59

Basic #800
rgba(34, 43, 69, 1)
#222B45

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

Danger #100
rgba(255, 228, 212, 1)
#FFE4D4

Danger #200
rgba(255, 195, 170, 1)
#FFC3AA

Danger #300
rgba(255, 155, 127, 1)
#FF9B7F

Danger #400
rgba(255, 116, 96, 1)
#FF7460

Danger #500
rgba(255, 53, 43, 1)
#FF352B

Danger #600
rgba(219, 31, 38, 1)
#DB1F26

Danger #700
rgba(183, 21, 41, 1)
#B71529

Danger #800
rgba(147, 13, 41, 1)
#930D29

Danger #900
rgba(122, 8, 41, 1)
#7A0829
Last updated