BlockMeet 設計系統

返回應用

BlockMeet 色彩系統

返回首頁

這是BlockMeet的品牌色彩系統設計指南，用於確保整個產品體驗的一致性和專業性。

主品牌色 - 深湖藍

brand-50

hsl(194, 100%, 97%)

brand-100

hsl(194, 90%, 92%)

brand-200

hsl(194, 85%, 83%)

brand-300

hsl(194, 80%, 71%)

brand-400

hsl(194, 75%, 58%)

brand-500

hsl(194, 70%, 50%)

brand-600

hsl(194, 75%, 41%)

brand-700

hsl(194, 75%, 33%)

brand-800

hsl(194, 75%, 26%)

brand-900

hsl(194, 75%, 20%)

brand-950

hsl(194, 80%, 12%)

輔助品牌色 - 珊瑚紅

secondary-50

hsl(6, 100%, 97%)

secondary-100

hsl(6, 95%, 94%)

secondary-200

hsl(6, 90%, 87%)

secondary-300

hsl(6, 85%, 79%)

secondary-400

hsl(6, 80%, 70%)

secondary-500

hsl(6, 75%, 60%)

secondary-600

hsl(6, 70%, 52%)

secondary-700

hsl(6, 75%, 42%)

secondary-800

hsl(6, 80%, 35%)

secondary-900

hsl(6, 85%, 25%)

secondary-950

hsl(6, 90%, 15%)

強調品牌色 - 琥珀黃

accent-50

hsl(45, 100%, 96%)

accent-100

hsl(45, 95%, 90%)

accent-200

hsl(45, 90%, 82%)

accent-300

hsl(45, 85%, 70%)

accent-400

hsl(45, 80%, 60%)

accent-500

hsl(45, 90%, 50%)

accent-600

hsl(45, 85%, 43%)

accent-700

hsl(45, 80%, 35%)

accent-800

hsl(45, 75%, 28%)

accent-900

hsl(45, 70%, 22%)

accent-950

hsl(45, 80%, 12%)

成功綠

success-50

hsl(152, 70%, 95%)

success-100

hsl(152, 68%, 88%)

success-200

hsl(152, 65%, 75%)

success-300

hsl(152, 60%, 60%)

success-400

hsl(152, 58%, 48%)

success-500

hsl(152, 65%, 40%)

success-600

hsl(152, 70%, 33%)

success-700

hsl(152, 75%, 27%)

success-800

hsl(152, 80%, 20%)

success-900

hsl(152, 85%, 15%)

success-950

hsl(152, 90%, 8%)

警告黃

warning-50

hsl(36, 100%, 97%)

warning-100

hsl(36, 95%, 92%)

warning-200

hsl(36, 90%, 84%)

warning-300

hsl(36, 85%, 74%)

warning-400

hsl(36, 80%, 64%)

warning-500

hsl(36, 90%, 56%)

warning-600

hsl(36, 85%, 49%)

warning-700

hsl(36, 80%, 40%)

warning-800

hsl(36, 75%, 32%)

warning-900

hsl(36, 70%, 25%)

warning-950

hsl(36, 80%, 15%)

錯誤紅

error-50

hsl(0, 100%, 97%)

error-100

hsl(0, 95%, 94%)

error-200

hsl(0, 90%, 88%)

error-300

hsl(0, 85%, 80%)

error-400

hsl(0, 80%, 70%)

error-500

hsl(0, 90%, 60%)

error-600

hsl(0, 85%, 50%)

error-700

hsl(0, 80%, 41%)

error-800

hsl(0, 75%, 33%)

error-900

hsl(0, 70%, 25%)

error-950

hsl(0, 80%, 15%)

資訊藍

info-50

hsl(210, 100%, 97%)

info-100

hsl(210, 95%, 92%)

info-200

hsl(210, 90%, 86%)

info-300

hsl(210, 85%, 75%)

info-400

hsl(210, 80%, 65%)

info-500

hsl(210, 90%, 58%)

info-600

hsl(210, 85%, 50%)

info-700

hsl(210, 80%, 42%)

info-800

hsl(210, 75%, 34%)

info-900

hsl(210, 70%, 27%)

info-950

hsl(210, 80%, 14%)

中性灰

neutral-50

hsl(220, 20%, 98%)

neutral-100

hsl(220, 15%, 94%)

neutral-200

hsl(220, 12%, 88%)

neutral-300

hsl(220, 10%, 78%)

neutral-400

hsl(220, 8%, 65%)

neutral-500

hsl(220, 6%, 50%)

neutral-600

hsl(220, 6%, 40%)

neutral-700

hsl(220, 6%, 30%)

neutral-800

hsl(220, 6%, 20%)

neutral-900

hsl(220, 8%, 15%)

neutral-950

hsl(220, 10%, 8%)

CSS變數使用指南

使用以下格式在您的樣式中引用這些顏色：

.my-element {
  /* 基本使用 */
  color: var(--color-brand-500);
  background-color: var(--color-neutral-50);
  
  /* 與透明度一起使用 */
  border-color: rgb(var(--color-brand-500-rgb) / 0.5);
  
  /* 在Tailwind中使用 */
  @apply text-brand-500 bg-neutral-50;
}

品牌色彩應用場景指南

主品牌色 (深湖藍)

• 主要按鈕和操作元素
• 導航欄和頁頭
• 重要資訊高亮
• 進度指示元素
• 主要交互狀態

輔助品牌色 (珊瑚紅)

• 次要按鈕和行動點
• 特殊促銷內容
• 需要注意的UI元素
• 比較和對比內容
• 收藏和喜愛功能

強調色 (琥珀黃)

• 突出顯示重要資訊
• 特殊功能標記
• 新功能指示
• 促銷和特價標籤
• 提高注意度的元素

主題應用展示

以下展示了基於我們色彩系統的淺色與深色主題應用案例

淺色主題應用

按鈕元件

訊息提示

成功訊息提示

操作已成功完成，您的變更已保存。

錯誤訊息提示

操作失敗，請檢查輸入並重試。

標籤元件

品牌標籤特殊標籤資訊標籤

深色主題預覽