> For the complete documentation index, see [llms.txt](https://docs.mindtrix.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mindtrix.xyz/zh/mindtrix-deisgn-system/ui/colors.md).

# 顏色

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

## 主要色系

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

<table data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>Hex</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Primary #100</td><td>rgba(230, 230, 250, 1)</td><td>#E6E6FA</td><td><a href="/files/xNhSrarPqko5al0gi0Wz">/files/xNhSrarPqko5al0gi0Wz</a></td></tr><tr><td>Primary #200</td><td>rgba(206, 207, 246, 1)</td><td>#CECFF6</td><td><a href="/files/P7mWpTwpf57xaZgr7E8p">/files/P7mWpTwpf57xaZgr7E8p</a></td></tr><tr><td>Primary #300</td><td>rgba(174, 175, 229, 1)</td><td>#AEAFE5</td><td><a href="/files/bVkQnsMe79T3gezQEf72">/files/bVkQnsMe79T3gezQEf72</a></td></tr><tr><td>Primary #400</td><td>rgba(142, 143, 204, 1)</td><td>#8E8FCC</td><td><a href="/files/NhS9ROKjeERF4UhOtzgT">/files/NhS9ROKjeERF4UhOtzgT</a></td></tr><tr><td>Primary #500</td><td>rgba(102, 103, 171, 1)</td><td>#6667AB</td><td><a href="/files/BQdTqD0MCjTx2FAxMsc0">/files/BQdTqD0MCjTx2FAxMsc0</a></td></tr><tr><td>Primary #600</td><td>rgba(74, 75, 147, 1)</td><td>#4A4B93</td><td><a href="/files/U2rCpvyvyXREVy6PC7GB">/files/U2rCpvyvyXREVy6PC7GB</a></td></tr><tr><td>Primary #700</td><td>rgba(51, 52, 123, 1)</td><td>#33347B</td><td><a href="/files/rhWlu4W501Rtjoh28BDZ">/files/rhWlu4W501Rtjoh28BDZ</a></td></tr><tr><td>Primary #800</td><td>rgba(32, 33, 99, 1)</td><td>#202163</td><td><a href="/files/UGvljf46IqhoLnmJDlfH">/files/UGvljf46IqhoLnmJDlfH</a></td></tr><tr><td>Primary #900</td><td>rgba(19, 20, 82, 1)</td><td>#131452</td><td><a href="/files/CzCDM2Ultl3xMr2talXQ">/files/CzCDM2Ultl3xMr2talXQ</a></td></tr></tbody></table>

## 次要色系

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

<table data-column-title-hidden data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>HEX</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Secondary #100</td><td>rgba(254, 251, 206, 1)</td><td>#FEFBCE</td><td><a href="/files/xEHUzE1bWlOiCmJ8ct0j">/files/xEHUzE1bWlOiCmJ8ct0j</a></td></tr><tr><td>Secondary #200</td><td>rgba(254, 246, 158, 1)</td><td>#FEF69E</td><td><a href="/files/Hz8WmE1nX7g3F5ScAq57">/files/Hz8WmE1nX7g3F5ScAq57</a></td></tr><tr><td>Secondary #300</td><td>rgba(254, 240, 110, 1)</td><td>#FEF06E</td><td><a href="/files/Vh7phuiBynQKEC6EcgGb">/files/Vh7phuiBynQKEC6EcgGb</a></td></tr><tr><td>Secondary #400</td><td>rgba(253, 234, 74, 1)</td><td>#FDEA4A</td><td><a href="/files/9FVP8ClmUx4LdIElNevA">/files/9FVP8ClmUx4LdIElNevA</a></td></tr><tr><td>Secondary #500</td><td>rgba(252, 224, 15, 1)</td><td>#FCE00F</td><td><a href="/files/9doVcEDo11ABZsYgGL8n">/files/9doVcEDo11ABZsYgGL8n</a></td></tr><tr><td>Secondary #600</td><td>rgba(216, 189, 10, 1)</td><td>#D8BD0A</td><td><a href="/files/3wRcJ1XUsx4nbN4WSFi6">/files/3wRcJ1XUsx4nbN4WSFi6</a></td></tr><tr><td>Secondary #700</td><td>rgba(181, 156, 7, 1)</td><td>#B59C07</td><td><a href="/files/msNlMa9tGt83B2L27Uv5">/files/msNlMa9tGt83B2L27Uv5</a></td></tr><tr><td>Secondary #800</td><td>rgba(146, 124, 4, 1)</td><td>#927C04</td><td><a href="/files/qpWE4CA0KyaohMcK7ftt">/files/qpWE4CA0KyaohMcK7ftt</a></td></tr><tr><td>Secondary #900</td><td>rgba(120, 101, 2, 1)</td><td>#786502</td><td><a href="/files/zFgeqEq8LdKr3eZdTYcg">/files/zFgeqEq8LdKr3eZdTYcg</a></td></tr></tbody></table>

## 基礎色系

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

<table data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>Hex</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Basic #100</td><td>rgba(255, 255, 255, 1)</td><td>#FFFFFF</td><td><a href="/files/9sZZmauZM7v0CDf1jZe9">/files/9sZZmauZM7v0CDf1jZe9</a></td></tr><tr><td>Basic #200</td><td>rgba(247, 249, 252, 1)</td><td>#F7F9FC</td><td><a href="/files/MTLr7sBImlx1mxYCgUMN">/files/MTLr7sBImlx1mxYCgUMN</a></td></tr><tr><td>Basic #300</td><td>rgba(237, 241, 247, 1)</td><td>#EDF1F7</td><td><a href="/files/AAUfHTRhRRNTYWMNk28J">/files/AAUfHTRhRRNTYWMNk28J</a></td></tr><tr><td>Basic #400</td><td>rgba(228, 233, 242, 1)</td><td>#E4E9F2</td><td><a href="/files/AZHDxQHCwH6J2UeMSZ5h">/files/AZHDxQHCwH6J2UeMSZ5h</a></td></tr><tr><td>Basic #500</td><td>rgba(197, 206, 224, 1)</td><td>#C5CEE0</td><td><a href="/files/VZtpRdqc9OmiDLBCrGk8">/files/VZtpRdqc9OmiDLBCrGk8</a></td></tr><tr><td>Basic #600</td><td>rgba(143, 155, 179, 1)</td><td>#8F9BB3</td><td><a href="/files/IlmFSdqXaXYvsKfHEv9n">/files/IlmFSdqXaXYvsKfHEv9n</a></td></tr><tr><td>Basic #700</td><td>rgba(46, 58, 89, 1)</td><td>#2E3A59</td><td><a href="/files/miXc8XyF8uTIHWDytkhn">/files/miXc8XyF8uTIHWDytkhn</a></td></tr><tr><td>Basic #800</td><td>rgba(34, 43, 69, 1)</td><td>#222B45</td><td><a href="/files/DrNiYV0yJEJsyefyWOMa">/files/DrNiYV0yJEJsyefyWOMa</a></td></tr><tr><td>Basic #900</td><td>rgba(12, 12, 12, 1)</td><td>#0C0C0C</td><td><a href="/files/DZX9NFYXayMHMUNCfKo3">/files/DZX9NFYXayMHMUNCfKo3</a></td></tr></tbody></table>

## 功能色系

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

<table data-view="cards"><thead><tr><th>Color</th><th>RGBA</th><th>Hex</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Danger #100</td><td>rgba(255, 228, 212, 1)</td><td>#FFE4D4</td><td><a href="/files/SkRzlwoYDHnOA7wKOZq7">/files/SkRzlwoYDHnOA7wKOZq7</a></td></tr><tr><td>Danger #200</td><td>rgba(255, 195, 170, 1)</td><td>#FFC3AA</td><td><a href="/files/TkfRZJj6YGKk8FrysTz9">/files/TkfRZJj6YGKk8FrysTz9</a></td></tr><tr><td>Danger #300</td><td>rgba(255, 155, 127, 1)</td><td>#FF9B7F</td><td><a href="/files/UybKweqdZUS167Vi72RZ">/files/UybKweqdZUS167Vi72RZ</a></td></tr><tr><td>Danger #400</td><td>rgba(255, 116, 96, 1)</td><td>#FF7460</td><td><a href="/files/AfnEjmBzEXHRObcdVGY0">/files/AfnEjmBzEXHRObcdVGY0</a></td></tr><tr><td>Danger #500</td><td>rgba(255, 53, 43, 1)</td><td>#FF352B</td><td><a href="/files/n6jWViTQzccTcFaQ3KeO">/files/n6jWViTQzccTcFaQ3KeO</a></td></tr><tr><td>Danger #600</td><td>rgba(219, 31, 38, 1)</td><td>#DB1F26</td><td><a href="/files/uPF37udQ5CyngrjkaPRb">/files/uPF37udQ5CyngrjkaPRb</a></td></tr><tr><td>Danger #700</td><td>rgba(183, 21, 41, 1)</td><td>#B71529</td><td><a href="/files/D1ODJitgct0Adr5UTtGT">/files/D1ODJitgct0Adr5UTtGT</a></td></tr><tr><td>Danger #800</td><td>rgba(147, 13, 41, 1)</td><td>#930D29</td><td><a href="/files/7mUEhvlX9afBInxGTZpZ">/files/7mUEhvlX9afBInxGTZpZ</a></td></tr><tr><td>Danger #900</td><td>rgba(122, 8, 41, 1)</td><td>#7A0829</td><td><a href="/files/L86CJ7g7m2iHiZWopWEX">/files/L86CJ7g7m2iHiZWopWEX</a></td></tr></tbody></table>