越
學越南語
繁

🎨 設計系統標準

越南語聲調色彩系統與設計規範參考指南

🎨 越南語聲調顏色標準

統一的聲調色彩系統，用於整個網站的設計一致性

¯
平聲

NGANG

聲調 1 - 平聲

使用範例:
ma (鬼)
´
升聲

SAC

聲調 2 - 升聲

使用範例:
má (媽媽)
`
降聲

HUYEN

聲調 3 - 降聲

使用範例:
mà (但是)
ˇ
問聲

HOI

聲調 4 - 問聲

使用範例:
mả (墳墓)
˜
拐聲

NGA

聲調 5 - 拐聲

使用範例:
mã (馬)
.
重聲

NANG

聲調 6 - 重聲

使用範例:
mạ (稻秧)

📝 使用說明

React 組件中使用：
import { getToneColors } from '@/lib/design-tokens';

const toneColors = getToneColors('ngang');
// 使用: bg-gradient-to-r ${toneColors.primary}
Tailwind CSS 類別：
bg-gradient-to-r from-green-50 to-emerald-50
dark:from-green-900/30 dark:to-emerald-900/30
border-green-200 dark:border-green-700
text-green-900 dark:text-green-100

💻 實作範例

聲調卡片組件

<div className="bg-gradient-to-br ${tone.colors.primary} dark:${tone.colors.primaryDark}
     p-6 rounded-xl border ${tone.colors.border} dark:${tone.colors.borderDark}
     hover:shadow-lg transition-shadow">
  <div className="text-center mb-4">
    <div className="text-4xl font-mono mb-2">{tone.symbol}</div>
    <div className="inline-block px-3 py-1 rounded-full text-sm font-medium ${tone.colors.badge}">
      {tone.displayName}
    </div>
  </div>
  <div className="text-center">
    <div className="text-lg font-semibold ${tone.colors.text} dark:${tone.colors.textDark} mb-1">
      {example}
    </div>
    <div className="text-sm ${tone.colors.accent} dark:${tone.colors.accentDark}">
      {description}
    </div>
  </div>
</div>

聲調按鈕

<button className="bg-gradient-to-r ${tone.colors.primary} dark:${tone.colors.primaryDark}
                hover:shadow-md transition-all duration-200
                px-4 py-2 rounded-lg border ${tone.colors.border} dark:${tone.colors.borderDark}
                ${tone.colors.text} dark:${tone.colors.textDark}
                hover:scale-105 transform">
  <span className="font-mono text-lg mr-2">{tone.symbol}</span>
  {tone.displayName}
</button>

資訊卡片

<div className="bg-gradient-to-r ${tone.colors.primary} dark:${tone.colors.primaryDark}
     p-4 rounded-lg border ${tone.colors.border} dark:${tone.colors.borderDark}">
  <h4 className="font-semibold ${tone.colors.text} dark:${tone.colors.textDark} mb-2">
    {title}
  </h4>
  <p className="text-sm ${tone.colors.accent} dark:${tone.colors.accentDark}">
    {description}
  </p>
</div>

🎨 色彩調色盤

¯平聲 (ngang)

淺色 (Light)
from-green-50 to-emerald-50
深色 (Dark)
from-green-900/30 to-emerald-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

´升聲 (sac)

淺色 (Light)
from-blue-50 to-cyan-50
深色 (Dark)
from-blue-900/30 to-cyan-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

`降聲 (huyen)

淺色 (Light)
from-purple-50 to-violet-50
深色 (Dark)
from-purple-900/30 to-violet-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

ˇ問聲 (hoi)

淺色 (Light)
from-orange-50 to-red-50
深色 (Dark)
from-orange-900/30 to-red-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

˜拐聲 (nga)

淺色 (Light)
from-yellow-50 to-amber-50
深色 (Dark)
from-yellow-900/30 to-amber-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

.重聲 (nang)

淺色 (Light)
from-red-50 to-pink-50
深色 (Dark)
from-red-900/30 to-pink-900/30
文字
文字色彩
強調
強調色彩
徽章
徽章色彩

✅ 使用最佳實務

色彩使用原則

  • ✓每個聲調使用專屬色彩，保持視覺一致性
  • ✓淺色主題與深色主題都要支援
  • ✓確保色彩對比度足夠，提升可讀性
  • ✓漸層效果用於主要區域，純色用於次要元素

開發注意事項

  • 📁從 lib/design-tokens.ts 匯入色彩
  • 🧩使用 ToneColorReference 組件
  • 🔄保持與設計系統的一致性
  • 📱測試在不同裝置上的顯示效果