# 顏色
Mindtrix color 區分為五大色系：Primary、Secondary、Basic、Notice。我們將顏色劃分為9種程度並使用RGB、Hex色碼顯示，方便設計師和工程師開發上溝通。
## 主要色系
Mindtrix 在色彩上採用PANTONE 2022長春花藍的色調，切分為9種色階，長春花籃具有藍色和紫紅色系結合，象徵實體與虛擬生活也以新的方式融合。它擴展你對生活的定義，迎向充滿活力的web3世界，探索與創造新的可能性。Mindtrix認為這樣概念與我們的產品精神相符合。
| Color | RGBA | Hex | |
|---|
| Primary #100 | rgba(230, 230, 250, 1) | #E6E6FA | p1.jpg |
| Primary #200 | rgba(206, 207, 246, 1) | #CECFF6 | p2.jpg |
| Primary #300 | rgba(174, 175, 229, 1) | #AEAFE5 | p3.jpg |
| Primary #400 | rgba(142, 143, 204, 1) | #8E8FCC | p4.jpg |
| Primary #500 | rgba(102, 103, 171, 1) | #6667AB | p5.jpg |
| Primary #600 | rgba(74, 75, 147, 1) | #4A4B93 | p6.jpg |
| Primary #700 | rgba(51, 52, 123, 1) | #33347B | p7.jpg |
| Primary #800 | rgba(32, 33, 99, 1) | #202163 | p8.jpg |
| Primary #900 | rgba(19, 20, 82, 1) | #131452 | p9.jpg |
## 次要色系
次要色系我們推薦使用主色的對比色進行傳達，抓著使用者最好的目光就是利用對比來呈現。Mindtrix選擇向日葵黃色調，讓用戶在web3的產品間也能清晰的辨別與使用，提高用戶注意力。
| Color | RGBA | HEX | |
|---|
| Secondary #100 | rgba(254, 251, 206, 1) | #FEFBCE | s1.jpg |
| Secondary #200 | rgba(254, 246, 158, 1) | #FEF69E | s2.jpg |
| Secondary #300 | rgba(254, 240, 110, 1) | #FEF06E | s3.jpg |
| Secondary #400 | rgba(253, 234, 74, 1) | #FDEA4A | s4.jpg |
| Secondary #500 | rgba(252, 224, 15, 1) | #FCE00F | s5.jpg |
| Secondary #600 | rgba(216, 189, 10, 1) | #D8BD0A | s6.jpg |
| Secondary #700 | rgba(181, 156, 7, 1) | #B59C07 | s7.jpg |
| Secondary #800 | rgba(146, 124, 4, 1) | #927C04 | s8.jpg |
| Secondary #900 | rgba(120, 101, 2, 1) | #786502 | s9.jpg |
## 基礎色系
黑灰白的色調為產品的穩定劑，能讓使用者可以舒適的閱讀，瀏覽產品資訊。
| Color | RGBA | Hex | |
|---|
| Basic #100 | rgba(255, 255, 255, 1) | #FFFFFF | b1.jpg |
| Basic #200 | rgba(247, 249, 252, 1) | #F7F9FC | b2.jpg |
| Basic #300 | rgba(237, 241, 247, 1) | #EDF1F7 | b3.jpg |
| Basic #400 | rgba(228, 233, 242, 1) | #E4E9F2 | b4.jpg |
| Basic #500 | rgba(197, 206, 224, 1) | #C5CEE0 | b5.jpg |
| Basic #600 | rgba(143, 155, 179, 1) | #8F9BB3 | b6.jpg |
| Basic #700 | rgba(46, 58, 89, 1) | #2E3A59 | b7.jpg |
| Basic #800 | rgba(34, 43, 69, 1) | #222B45 | b8.jpg |
| Basic #900 | rgba(12, 12, 12, 1) | #0C0C0C | b9.jpg |
## 功能色系
功能色對應到介面的使用狀態：網址、成功、提醒、錯誤，Mindtrix設計系統專注在提醒和錯誤的色系，因為產品要能讓用戶準確知道何時要特別警慎，遇到問題要能輕易排解，我們使用紅色調，紅色在日常生活經驗中具備提醒、錯誤的效果，在產品使用可以加深用戶印象。成功、網址等狀態會參考著主色、次要色系進行使用。
| Color | RGBA | Hex | |
|---|
| Danger #100 | rgba(255, 228, 212, 1) | #FFE4D4 | d1.jpg |
| Danger #200 | rgba(255, 195, 170, 1) | #FFC3AA | d2.jpg |
| Danger #300 | rgba(255, 155, 127, 1) | #FF9B7F | d3.jpg |
| Danger #400 | rgba(255, 116, 96, 1) | #FF7460 | d4.jpg |
| Danger #500 | rgba(255, 53, 43, 1) | #FF352B | d5.jpg |
| Danger #600 | rgba(219, 31, 38, 1) | #DB1F26 | d6.jpg |
| Danger #700 | rgba(183, 21, 41, 1) | #B71529 | d7.jpg |
| Danger #800 | rgba(147, 13, 41, 1) | #930D29 | d8.jpg |
| Danger #900 | rgba(122, 8, 41, 1) | #7A0829 | d9.jpg |
