Mindtrix
中文
中文
  • 簡介
  • 品牌理念
    • 價值
    • 團隊成員
    • 平台技術
    • NFT總覽
    • 合作夥伴
  • 世界觀
    • 故事源起
    • 維也納森林
      • 綠巴札市集
      • 帕德門神廟
      • 回音岩壁
      • 灌木村
      • 密米爾沼澤
      • 卡巴拉聲命樹
      • 卡巴拉瞭望台
      • 解謎石陣
      • 故事廊道
  • Roadmap
    • 根-開拓脈絡
    • 幹-凝聚
    • 枝-聚落
    • 葉-緊密連結
    • 林-永續發展
  • Podcast NFT
    • Podcast NFT 價值
      • 對創作者的價值
      • 對收藏者、聽眾的價值
    • Podcast NFT 種類
      • 單集音檔精華
      • 單集圖檔精華
      • 出席證明協議 POAP
    • 建立 Podcast NFT
    • 購買 Podcast NFT
      • 單集贊助
      • 專案贊助
    • 收藏者如何使用 Podcast NFT?
    • 創作者如何推廣 Podcast NFT?
    • 合作案例
  • Pack NFT
    • Pack NFT 空投階段
    • Pack NFT 價值
    • Pack NFT 購買教學
      • Blocto
    • Pack NFT 命運投票
  • Otter NFT
    • Otter NFT 價值
    • 內容物
    • 特徵
    • 稀有度
  • 交易
    • 二級市場
      • Flowty
      • Flowverse
  • 代幣經濟
    • PP代幣
  • 常見問題
    • 新手
    • 創作者
    • Podcast NFT
    • Pack NFT
    • Otter NFT
    • 社群互動
  • Mindtrix 設計系統
    • 簡介
    • UI風格規範
      • 顏色
      • 字體
    • 3D風格規範
      • NFT設計流程
    • 案例
  • 官方外部連結
    • Marketplace
    • Discord
    • Twitter
    • Instagram
    • Facebook
    • Youtube
    • Medium
Powered by GitBook
On this page
  • 主要色系
  • 次要色系
  • 基礎色系
  • 功能色系
  1. Mindtrix 設計系統
  2. UI風格規範

顏色

PreviousUI風格規範Next字體

Last updated 1 year ago

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

主要色系

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

次要色系

次要色系我們推薦使用主色的對比色進行傳達,抓著使用者最好的目光就是利用對比來呈現。Mindtrix選擇向日葵黃色調,讓用戶在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

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

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

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