色彩

Brickverse 的色彩系統以藍色為主色、黃色為輔色，搭配清晰的文字與背景色層級。

主色 (Primary)

品牌主色，用於按鈕、連結、重點強調

primary-DEFAULT

#0184ff

primary-light

#33a1ff

primary-lighter

#66b8ff

primary-dark

#0066cc

primary-darker

#004799

輔色 (Accent)

品牌輔色，用於高亮、標記、CTA 元素

accent-DEFAULT

#FAD75A

accent-light

#fbe485

accent-lighter

#fcf1b0

accent-dark

#f8ca2b

accent-darker

#d4a614

文字色 (Text)

文字層級色彩

text-primary

#000000

text-secondary

#666666

text-tertiary

#999999

背景色 (Background)

頁面與區塊背景色

bg-primary

#FFFFFF

bg-secondary

#F8F9FA

bg-tertiary

#F1F3F4

邊框色 (Border)

邊框與分隔線

border-DEFAULT

#E0E0E0

使用方式

Tailwind CSS

<!-- 文字顏色 -->
<p className="text-primary">主色文字</p>
<p className="text-text-secondary">次要文字</p>

<!-- 背景顏色 -->
<div className="bg-bg-secondary">次要背景</div>

<!-- 邊框顏色 -->
<div className="border border-border">邊框</div>

CSS Custom Properties

color: var(--color-primary);
background-color: var(--color-bg-secondary);
border-color: var(--color-border);