風格規格書：Neon Ink 螢光墨紙
從 whatsub.equal2.app 分析出來、重新實作的完整風格決策。包含色彩策略、字體階層、密度、動態、材質與明確的 Do / Don't。
本文件為 style.md 規格。設計系統零件清單見 design-system，落地計畫見 frontend-plan。
風格來源：whatsub.equal2.app。取的是它的色彩策略與版型手法；所有色票、字級、陰影配方均為觀察後重新實作。本站不使用該站的字標、文案、插畫或任何素材，demo 頁的內容講的是這套設計系統自己。
1. Style One-liner
溫暖的紙、純粹的墨、一種吵到不行的螢光綠 —— 一個看起來像工具、不像廣告的介面。
2. Brand Personality
| 形容詞 | 對應的 UI 呈現 |
|---|---|
| 直率 | 標題講結果、用口語短句，而不是「AI 驅動的解決方案」這種產品型錄語言 |
| 高對比 | 幾乎只有黑與紙白，第三個顏色一出現就是螢光綠，沒有中間調 |
| 手作感 | 紙紋、半調網點、手繪插畫，刻意避開漸層與 3D |
| 工具氣質 | 等寬字用在數據與標籤上，資訊密度偏高，不留無意義的大留白 |
| 年輕 | 圓角膠囊按鈕、超大字標、口語文案 |
3. Visual Principles
- 一頁只有一種吵。 螢光綠是整頁唯一的高飽和色，出現次數越少越有力。一屏之內超過三處就該砍。
- 黑不是灰。 主文字
#0A0A0A幾乎是純黑，次要文字直接跳到#575751（暖灰），中間不設階。這種「跳階」是紙本印刷的特徵。 - 線是髮絲。 分隔線用
#E5E3DC，1px。永遠不用陰影去做「分隔」，陰影只給浮起來的東西。 - 深色面板是產品畫面的替身。 白卡片內嵌一塊深色面板，代表「這是軟體的輸出」。面板一定要有網點疊層，否則會像一個沒填滿的方塊。
- 字標是圖形。 wordmark 用 800 字重、負字距，並且永遠不換行。
- 把產品的輸出當作主視覺。 原站的做法是拿一條黑底白字的圓角長條當 hero 主體 —— 因為那正是它產出的東西的形狀。這個手法可以移植到任何有明確產出物的工具：一則對話泡泡、一張圖表、一份收據。本站的 demo 頁就換成了一條寫著「同一份 HTML，六種長相」的橫幅。
- 插畫滿版、文字避讓。 插畫壓到出血邊，文字放在插畫刻意留白的角落，中間用一層 canvas 色的漸層 scrim 保證對比。
- 區塊標籤用超寬字距。
letter-spacing: 0.32em的置中小標（「功 能」「定 價」），是這個風格最容易辨認的簽名。
4. Color Strategy
色票
| 角色 | 值 | 用法 |
|---|---|---|
| Canvas | #F7F6F2 |
頁面底。暖白，不是純白 —— 純白會讓螢光綠變刺眼 |
| Canvas 2 | #EFEEE9 |
交替區塊 |
| Surface | #FFFFFF |
卡片。跟 canvas 的差異很小，靠邊框分辨 |
| Surface Inverse | #0A0A0A |
深色面板、高對比標語橫幅 |
| Ink | #0A0A0A |
主文字 |
| Ink 2 | #575751 |
說明文字。暖灰，跟紙色同一個色溫 |
| Ink 3 | #8A8A84 |
佔位、停用 |
| Line | #E5E3DC |
髮絲線 |
| Accent | #39FF14 |
底色、圖形、進度條、focus 環 |
| Accent Ink | #1E7A0C |
accent 當文字時唯一合法的形式 |
| On Accent | #0A0A0A |
放在螢光綠上的文字（黑字，不是白字） |
三條規則
一、#39FF14 永遠不可以當文字色。
它在紙色底上的對比是 1.3:1。要用綠色寫字，只能用 --ds-accent-ink（4.7:1）。
二、螢光綠鋪滿時，文字用黑色。
--ds-on-accent: #0A0A0A。白字放在螢光綠上是 1.5:1，看不見。頁尾整塊綠底配黑字就是這個原因。
三、螢光綠一屏最多三處。 典型分配：一顆主按鈕的 hover 內環、一個 badge、一處圖形。超過就變成 2000 年代的網頁。
語意色要降飽和
在這麼亮的品牌色旁邊，一般的紅綠黃會顯得髒。成功色直接沿用 #1E7A0C（暗綠），危險色用偏磚紅的 #C4321F，警告用 #B26A00。
5. Typography Strategy
字體
- Display / Body：Geologica（400 / 600 / 800）。幾何無襯線，字腔大，重量到 800 時非常有存在感。標題與內文用同一套 —— 這是「工具感」的來源之一，介面不需要兩種聲音。
- Mono：IBM Plex Mono。用在：數據、代碼、方案代號、超寬字距的區塊標籤。
- CJK fallback：
PingFang TC→Noto Sans TC→Microsoft JhengHei。必須接在每一個 family 後面。
階層
| Token | 用途 | 字重 | 字距 |
|---|---|---|---|
step-6 |
Wordmark、hero 主標 | 800 | -0.045em |
step-5 |
H1 | 800 | -0.02em |
step-4 |
區塊主標 | 800 | -0.02em |
step-3 |
卡片標題 | 800 | -0.02em |
step-1 |
導言 | 400 | 0 |
step-0 |
內文 | 400 | 0 |
step--1 |
說明、標籤 | 400 / 700 | 0（標籤 0.32em） |
中文排版
- 行高 1.75。中文方塊字沒有 x-height 的視覺喘息，行高低於 1.6 會糊成一片。
- 標題行高 1.12，可以壓很緊，因為中文標題本來就滿版。
- 中英混排時不用手動加空白，交給
text-wrap: pretty與字體本身的 metrics。
6. Spacing & Density
偏中高密度。這是工具站，不是形象官網。
- 區塊間距
clamp(48px, 7vw, 112px) - 卡片內距
--ds-space-6（24px 基準） - 卡片之間
--ds-space-6 - 內文段落之間
--ds-space-4
判準：一屏要能看到至少兩個完整的資訊單位。 一屏只放一句話的做法屬於形象網站，跟這個風格的氣質不合。
7. Motion & Interaction
節奏短而乾脆，沒有彈跳、沒有視差。
| 情境 | 時間 | 內容 |
|---|---|---|
| hover 變色 | --ds-dur-1（120ms） |
只動 color / background |
| 卡片浮起 | --ds-dur-2（220ms） |
translateY(-2px) + 陰影 |
| 面板內的循環動畫 | 1.4–7s | 「產品正在運作」的示意，例如逐格輪播 |
主按鈕的 hover 是這個風格的簽名：底色不變，內縮一圈 2px 的螢光綠。
.ds-btn[data-variant='primary']:hover {
box-shadow: var(--ds-btn-shadow-hover), inset 0 0 0 2px var(--ds-accent);
}
focus 是雙環：先一圈墨黑，再一圈螢光綠。單用綠色的話，按鈕本身是綠的時候就看不見了。
--ds-ring: 0 0 0 1.5px var(--ds-ink), 0 0 0 3px var(--ds-accent);
8. Depth & Material
四種材質，各有明確用途，不可混用：
一、紙（canvas） SVG turbulence 產生的 5% 灰度雜訊，160px 平鋪。不是圖片，沒有額外請求。
二、玻璃（floating nav）
一圈髮絲外環 + 四道內側高光，模擬倒角。加上一層 135° 的斜向反光 ::after。
--ds-glass-shadow:
0 0 0 1px rgb(10 10 10 / 0.06),
inset 0 0 0 1.2px rgb(255 255 255 / 0.45),
inset 0 1.5px 0 rgb(255 255 255 / 0.65),
inset 0 -1px 0 rgb(255 255 255 / 0.30),
inset 0 0 14px rgb(255 255 255 / 0.14);
backdrop-filter 不支援時會退化成半透明底色，可接受。
三、深色面板（device panel）
linear-gradient(170deg, #191919, #0E0E0E) 加上 14px 的網點疊層。網點是必要的，沒有它就只是一個深色方塊。
四、半調插畫（halftone）
SVG <pattern> 的圓點，用 clipPath 限制在圖形內部，再用漸層遮罩讓它往下變密。用 PNG 疊圖在縮放時會產生摩爾紋。
陰影只有三階，而且只給浮起來的東西：shadow-1 是髮絲外環，shadow-2 是卡片 hover，shadow-3 是彈窗與標語橫幅。
9. Do / Don't
Do
- 一屏只給螢光綠三次出場機會
- 綠色當文字時一律換成
--ds-accent-ink - 綠底上的字用黑色
- 深色面板一定加網點
- wordmark 用
white-space: nowrap - 區塊小標用 0.32em 字距、置中
- 數字、方案代號一律等寬字 +
tabular-nums - 插畫要有刻意留白的角落給文字
Don't
- 不要用漸層當主視覺。 這個風格是平塗 + 網點，一加漸層就變成別的東西
- 不要用彩色陰影。 陰影一律是墨黑的低透明度
- 不要把螢光綠用在大面積背景（頁尾除外，那是刻意的收尾句點）
- 不要加圓角以外的裝飾邊框（雙線、虛線、內陰影邊框都不要）
- 不要用兩種以上的字體家族（Geologica + IBM Plex Mono 就是全部）
- 不要用純白
#FFFFFF當頁面底色，會讓螢光綠刺眼 - 不要做視差捲動或 3D 傾斜，跟手作印刷的氣質衝突
- 不要在深色面板裡用純黑
#000，用#0E0E0E，純黑在 OLED 上會像破洞
10. 什麼時候不要用這個風格
- 金融、醫療、法律這類需要「穩重」的產品 —— 螢光綠會讓人不信任
- 大量彩色照片的電商 —— 品牌色會跟商品照打架
- 需要長時間閱讀的內容站 —— 高對比配高密度，讀久了累
這幾種情況，看 Nordic Calm 或 Editorial Serif。