SUBSTANCE SYSTEMNEUX DAY · 設計規範
← 回盛典網站
SSOT
SINGLE SOURCE OF TRUTH · v1

SUBSTANCE
SYSTEM.

實體系統 — NEUX Day 的設計,我們怎麼想的

把工具收乾淨,只留下真相。

STRIP THE TOOLS. KEEP THE TRUTH.

老實講,這不算什麼風格指南,比較像給自己定的一張規矩清單。整套東西就黑白灰九階,加一道綠,沒了。會這樣選,是因為打從心裡相信一件事:把雜訊全收乾淨,那一份真相才看得見——所以這頁每一格灰、唯一亮起來的那點綠,都在為那句話作證。
與其跟你保證多會做,不如直接做給你看——這頁本身,就是一塊 SUBSTANCE。

01 / SIXSUBSTANCE

母題 — 表徵與本質

SUBSTANCE 這個字,其實是一句話講三件事:它是對外想說的(別再數你有幾個工具,去數你手上有幾份真相)、是整頁的視覺長相(外面那個框=表徵,裡面那顆實心核=本質)、也是你捲到一半會看到的那個畫面(四散的雜訊慢慢收攏,落定成一塊實心方塊)。這三件事沒打算各做各的,因為它們本來就是同一句話。看久了你會發現,這頁不是在跟你「說」SSOT 是本質——是讓你親眼看著表徵塌下去,最後只剩本質還亮著。

與其描述這套系統,乾脆讓這頁就是它。

我們是這樣想的

母題不是拿來裝飾的,是拿來證明的想說的話、頁面的長相、你捲動看到的變化,講的都是同一件事。與其宣告,不如直接演給你看。
克制不是品味好,是真的有話要說寧可把畫面上幾乎所有東西,都壓成同一層次的背景雜訊——這樣那唯一一個亮點,才真的有份量。東西少,意義才重。
真相是算出來的,不是播給你看的本質得靠你一步步往前走、被讀出來、被驗算出來,它才會現形——不是一開頭就攤在你面前的結論。

所以我們給自己定了幾條規矩

01整頁的第一屏,先蓋一個 SINGLE SOURCE OF TRUTH 的戳記——顏色、字體、動態這些規則,都只在這裡講一次,別處不重講。
02每一條「該這樣、不該那樣」,後面都要老實寫清楚「不這樣會壞在哪」。寧可講代價,也不想自誇多厲害。
03「框是表徵、核是本質」這個想法,要一路貫到字體分工、版面取捨、文案的去識別化,不能只當成捲到一半冒出來的一個小驚喜。如果母題到最後只剩一個很酷的動畫,看完卻說不出新逸為什麼這樣設計,那這整頁等於白做。
02 / SIXTHE ONE GREEN

色彩 — 一道綠法則

表徵用灰、本質才發光。版面、文字、線框、數據這些「會說明事情」的部分,全交給黑白灰九階扛;那唯一一道綠 #00E676,只留給「本質浮現」的那一刻。說真的,敢只用黑白,本身就是一種把握——對金融、對監管這種客戶,你願意只靠一個顏色撐全場,代表你對自己的內容夠有信心。

#FFFFFF
white
底 / 反白字
#F4F4F4
offwhite
微量區塊
#C8C8C8
pebble
最弱表徵 / 線
#9A9A9A
concrete
反白次要
#707070
stone
meta / 標籤
#2E2E2E
graphite
正文 light 艙
#1A1A1A
body-ink
主文
#0A0A0A
ink
標題 / dark 艙底
#00E676
signal
本質 / 此刻 / 真相 / CTA
THE ONE GREEN · 一道綠
這道綠是當稀有品在用的,不是拿來「強調一下」。多塗一處綠,每一道綠的份量就被分掉一點。它是一根指針,指給你看哪裡才是本質——所以它絕不去當背景、當卡片底、當分隔線。一整頁綠色加起來,大概也就佔到 1% 左右。
頂部進度條
章節英文標(Archivo Black EN label)
引言左界線(border-left)
黑塊落定那道光 + SSOT / SUBSTANCE 標
打字機 caret
結尾宣言高亮字
CTA 底線
✗ 濫用 · 整塊塗綠
能不能,只有一份。
綠一旦變成一大片,它就從信號退回成裝飾了——而且 #00E676 大面積一鋪,對比跟無障礙兩頭都不及格。本來「看到綠=這裡是本質」的那個直覺會整個垮掉,整套顏色也就跌回一個很普通的 SaaS。
✓ 正解 · 一道綠線
能不能,只有一份。
綠只拿來畫細線、點小標、亮一個字——它是去「指認」本質,不是去把本質塗滿。本質是一個點,不是一片。
03 / SIXTYPOGRAPHY

字體 — 五件套各司其職

字是當「崗位」在分的,不是當好看的選項。這五套字,是五個職務。一個字該用哪一套,先問它「在現場是什麼角色」,不問「哪個比較漂亮」——其實這就是 SUBSTANCE 落到排版上的樣子:先有它要扮的本質,字體才是它穿的那件表徵。

ARCHIVO BLACK表徵骨架
羅馬數字 / 數據 / 標準字
VII · SUBSTANCE · 730
NOTO SERIF TC情緒與現場
章名 / 第一人稱原話
700–900 · 禁 fake italic
在 AI 裡長大的工程師
NOTO SANS TC 900重量級陳述
招牌句 / 宣言
能不能,只有一份。
JETBRAINS MONO工程檔案感
時間 / 座標 / meta / 數據標籤
13:06 · SESSION 07/09 · 25.0°N
INTER中性底噪
UI / 英數內文
The quiet workhorse · 200–900
✗ fake italic
能不能,只有一份。
瀏覽器硬把方塊字拉斜,筆畫整個變形,看起來像一張壞掉的截圖。中文本來就沒有真斜體,這樣一拉,專業度當場就破了。
✓ 換字重 + 信號色界線
能不能,只有一份。
中文不靠躺下來喊,中文是換一張臉喊——加重字重、Serif 跟 Sans 互換、多留白、配一道綠色界線。

巨型字級對比=張力引擎

那根 clamp(7rem,26vw,24rem) 的羅馬數字像一根柱子,旁邊配的是 13px 的 Mono 場景說明——大小差到三十倍,「結構」跟「細節」之間就有了電壓。最大的是骨架,最小的是檔案,夾在中間的,是人說的話。這股張力靠的是字級的高低落差,不是靠顏色。

clamp 規範

·標題一律 clamp(min, Nvw, max),別寫死 px。min 顧手機、max 顧大螢幕,這樣不管在什麼尺寸,那股張力的比例都守得住。
·字距分三檔語氣:Mono 標籤 .2–.4em(工程的冷靜)/正文 .02em/Archivo 標準字 −.04em(招牌的力道)。
·內文一行鎖在 48–58ch、行高 1.65–1.9;正文別整段拉滿到 1140 全寬。
04 / SIXTHE MARK

Annual Mark — 會生長的標記

這個標記只有兩個部件:外面那個方框,是你交出去的所有東西(SRS、SDD、CMS、工單、會議紀錄);裡面那顆實心核,是那唯一的一份本質(SSOT)。框是多、核是一;框是雜訊、核是訊號。它不是一個貼上去就不動的 logo,是一個會長大的東西——本質不是一開頭就給你看的答案,是你陪它重走那一天之後,親眼看它從一團混沌裡落定下來。

捲到這裡 → 四散的表徵收攏成一顆實心方核(本質落定)· 全頁就這一個高潮
實心核 · 線稿框
空心核
框與核同色
雙色 / 框核異色

為什麼這樣設計

它是會長大的 logo,不是貼上就不動的 logo核會隨著你往下捲一路長大,到主旨那一章才塌縮落定——這個 logo 有時間軸。看的人是在「等它成形」,不是在「認出它」。
每年可以換種子,但骨子裡那句話不准動每年換一組 seed(散得多開、cell 多密、緩動怎麼走)就是當年的指紋;但「四散的表徵收攏成一顆實心核」這件事,年年都不准動。可以換皮,但不能換骨。

幾條不准破的線

·永遠是「方形線稿外框 + 置中實心方核」;框不准填色、核不准空心、不准用圓框、不准多塞第三個元素、框跟核的意思不准對調。
·塌縮是算好的、一頁就這一個高潮、整段約 1200ms,只有在落定的那一瞬間,才准放一道綠掃過去;關了動畫的人,直接看到已經落定的實心核就好。
·核最小邊長 ≥24px(印刷)/≥16px(螢幕),四周留白 ≥ 核邊長的 0.34 倍;別把標記放在中灰底上(對比不夠)。
05 / SIXMOTION AS ARGUMENT

版式與動態 — 動效是論述的標點

1180 的 strict 網格、髮絲線、大量留白、明暗章節交替、那幾根巨型羅馬數字當柱子、四角裁切加十字準星。動效在這裡只做一件事:把「表徵變回本質」這個過程演給你看,不是把畫面弄熱鬧。會動的地方,就是重音所在。

把它關掉,這個論點還在嗎?
答不出來的,就不准它動。

為什麼這樣設計

捲動就是放映機所有動態都掛在 onScroll / IntersectionObserver 上,你的手指就是播放鍵——沒有自動倒帶,因為這場盛會本來就是你回來補的。
一頁只給一個高潮正因為把那 99% 壓到幾乎不動,剩下那 1% 的塌縮才壓得住場。到處都在動,就等於哪裡都沒有重音。
關掉動畫的人,我們第一個照顧把所有動畫關掉之後,論點要一個字都不能少——動效是擴音器,不是承重牆。(不信右上角按按看 ↗)

能動的就這四類,其餘預設不動

狀態指示:進度條 / mini-mark 的核 / scroll-spy / 羅馬數字 scrub。
reveal 淡入上浮(threshold .16、translateY 24px、約 1 秒)。
一點活著的張力:掃描線 / 外框 draw-in / pulse。
每頁唯一那個論述高潮:noise→collapse。每一章都塞一塊 canvas,就會變成一頁五個高潮,重音被分光,整頁吵成一團,像還沒做完的 demo。
·打字機一頁只配兩次,留給現場原話跟招牌句;別讓敘事自己 autoplay(綁著 scroll,要能倒、能停)。
06 / SIXTHE REPLAY

口吻與公開 — 重走那一天 · 規範即作品集

說故事的主軸,叫「重走那一天」(The Replay)——這不是翻一本年鑑,是補一場你錯過的盛會,左邊那座「那一天的時鐘」從 10:00 走到 18:00,當你的時間軸。文案走報導的口吻、用場景帶你進去、現場的話用第一人稱原汁原味留著,客戶名一律拿掉、講成泛稱。能把「我們為什麼這樣約束自己」老老實實講清楚,本身就是本質又證明了一次:能讓人看見約束,比讓人看見華麗,難偽造得多。

看的是 · 紀律與品味

一個能把自家規矩講清楚的環境,才留得住資深設計師——也順便篩掉品味跟我們不對盤的人。你在這頁看到的不是一堆漂亮作品,是一個有原則的工作環境。

看的是 · 交付一致性的保證

這頁其實是把那套美學紀律,翻成一句白話:「新逸交付的時候,也是這樣自律的。」權限守得住、稽核守得住、留白守得住。一家肯把那道綠鎖死在七個地方的公司,做 RegTech、做 SSOT 治理的時候,也會守住該守的那條線。這份信任,是金融客戶身上最貴的東西。

看的是 · 可以被致敬的方法論

先把話講清楚、先公開的人,會變成別人引用的那個源頭。是想讓你看懂我們怎麼想,不是讓你 npm install 我們的牌子。

看的是 · 一份能照著走的 SSOT

這頁是要讓自家的設計語言,別再各專案各說各話。以後任何一個顏色、一個值要改,先改這份規範,再往下衍生——規範是本質,其他長出來的東西都是表徵。

口吻規範

·報導的口吻 + 第一人稱現場原話 + 用場景帶進去;客戶名一律拿掉講成泛稱。
·現場原話用 Serif TC(font-style:normal)+ 一道綠的左界線。

公開紀律

·入口掛在主站 footer 的「Design Principles」,不放第一屏——讓真的想找的人自己走進來,省得被當成行銷頁誤會。
·哪些能公開哪些不能:公開顏色的命名、用法的該與不該、母題的故事;不公開字型授權檔、能直接 import 的變數檔、還沒發表的下一屆主視覺。
·公開的同時,就要指派一個人來維護,把「實際做出來的東西」跟「這份規範」綁在一起同步。語言改了卻沒人跟,就等於對外昭告「自家的 SSOT 也會走鐘」,反而砸了自己的招牌。
+ / ASSESSMENTWORTH PUBLISHING?

品牌與設計效益評估

值得,這頁該公開——但寧可用「一張約束清單、讓本質自己作證」的方式公開,而不是拿來秀設計功夫。

對外賣的,本來就是 SSOT(一份真相來源)跟 RegTech 治理。一份能老實講清楚「為什麼只敢用一道綠、只敢用黑白」的規範公開出去,等於把「我們連自家視覺都做 SSOT」這句話,從一句口號變成一份你可以當場驗的東西——這是新逸講過的話跟做出來的事最對得上的一次,比任何案例都更不怕被打折。真要說風險,全都在「能不能持續守紀律」這件事上,不在方向對不對。

對誰有幫助
  • 招募者:能把自家約束講清楚的環境,才留得住資深設計師。
  • 金融 / 監管客戶:把美學上的自律,翻成一句「我們交付也守得住」的承諾。
  • 同業 / 想引用的人:先把話講清楚的人,會變成被引用的那個源頭。
  • 內部團隊:一份能照著走的設計 SSOT,讓各專案別再各說各話。
我們想撐起的樣子
  • 撐起「一個守得住自律的設計團隊」這個樣子。
  • 盛典網站已經演過一次「別再數工具、去數真相」;這頁是把當初那個決定的來龍去脈攤開,讓你看清楚那道綠是 SSOT,不是裝飾。
  • 對外,新逸不喊「我們很美」,喊的是「我們對本質有約束」。
風險(皆在執行紀律)
  • 那道綠被用爛(最該防):綠一旦拿去做 hover、做第二強調、做卡片底,整個論證就沒了物證。
  • 母題只剩一個小驚喜:大家只記得「那個酷動畫」,講不出設計道理,效益就漏光了。
  • 不小心開始炫技:重心從「約束」滑到「我們多會做動畫」,那就坐實了虛榮、也洩了底。
  • 公開了卻沒人顧:沒人維護,就等於昭告「自家的 SSOT 也會走鐘」。
怎麼算它成功
  • 資深設計師來面談時,自己提到這頁
  • 業務在談 RegTech / CMS 的時候,把它當成「連自家視覺都做 SSOT」的信任佐證拿出來引用
  • 被外面的文章、被 AI 當成「一道綠」的代表案例引用
  • 衡量它,看的是被當成標準源引用了幾次,不是看流量——這是一個慢慢發酵、靠信任、撐定位的資產。