Color
FPA 的色彩系統以中性色為底、Arithmetic Blue 為醒目點。~70% 白色/淺灰、~15% 黑色、~15% 藍色系列。
Color Use Ratio
根據 Brand Guideline 的 Approximate Color Use 規範。藍色不應佔據超過畫面 20%，除非是刻意的品牌強調場景。
~70% Neutral
~15%
~15%
Neutral Palette
中性色系——白、黑、灰。PMS Ultra Black / PMS Cool Grey。
Arithmetic Blue
品牌主色的四階漸層。從深到淺：400 → 100。
Semantic Tokens — Background
語義化的背景色 token。Dark mode 下自動重新映射。
| Token | Value |
|---|---|
--bg-primary | var(--color-white) |
--bg-secondary | var(--color-grey-light) |
--bg-inverse | var(--color-black) |
--bg-accent | var(--color-blue-400) |
--bg-accent-subtle | var(--color-blue-100) |
Semantic Tokens — Text
| Token | Value |
|---|---|
--text-primary | var(--color-black) |
--text-secondary | var(--color-grey-dark) |
--text-inverse | var(--color-white) |
--text-accent | var(--color-blue-400) |
--text-on-accent | var(--color-white) |
Semantic Tokens — Border
| Token | Value |
|---|---|
--border-default | var(--color-grey-light) |
--border-strong | var(--color-black) |
--border-accent | var(--color-blue-400) |
Semantic Tokens — Interactive
| Token | Value |
|---|---|
--interactive-default | var(--color-blue-400) |
--interactive-hover | var(--color-blue-300) |
--interactive-active | var(--color-blue-400) |
--interactive-subtle | var(--color-blue-100) |
Usage
如何在 CSS 中使用色彩 token。
css
/* Usage example */
.card {
background: var(--bg-primary);
border: 1px solid var(--border-default);
color: var(--text-primary);
}
.card:hover {
border-color: var(--border-accent);
}
.button-primary {
background: var(--bg-inverse);
color: var(--text-inverse);
}
.button-accent {
background: var(--bg-accent);
color: var(--text-on-accent);
}Do / Don't
Do
Use neutral backgrounds
Blue as accent only, not as main background for content areas.
Don't
Full blue backgrounds for content
Avoid using Arithmetic Blue as the main background for large content areas.