Principles
Motion is the brand
Every surface earns one deliberate movement. Load reveals stagger; hovers lift; nothing twitches without purpose. 動態是品牌本體，不是裝飾。
One accent, spent carefully
The violet→blue gradient appears only where attention must go. Volt green is rarer still — micro-signals only. 高彩度只花在刀口上。
Templates outshine the shell
The site frame stays quiet and dark so every template's own personality carries the color. 主站退後，讓模版發光。
Color
CSS custom properties inassets/site.cssGround
--ink-0
#070709
Surface
--ink-1
#0B0B0F
Raised
--ink-2
#121218
Accent A
--acc-1 · electric violet
#6E56FF
Accent B
--acc-2 · signal blue
#23B0FF
Signal
--acc-3 · volt (micro only)
#9EF01A
Typography
Bricolage Grotesque · Instrument Sans · JetBrains Mono · Noto Sans TC--fs-hero · display 800Aa 設計
--fs-h1 · display 800Heading One 標題
--fs-h2 · display 800Heading Two 副標
--fs-body · Instrument SansBody copy runs in Instrument Sans at 1rem/1.6. Chinese annotations fall back to Noto Sans TC automatically. 內文自動退到思源黑體。
mono · JetBrains MonoMETRICS · LABELS · 00 / INDEX
Motion
hover each tilerise · .9s ease-out-quint
pop · .5s spring
morph · 1.2s ease-out
Curves: --ease-out: cubic-bezier(.22,1,.36,1) ·
--ease-spring: cubic-bezier(.34,1.56,.64,1) ·
durations .25s / .5s / .9s ·
all motion honors prefers-reduced-motion.
Components
Buttons
Chips
TagSaaS · AI
Radius--rad-s 8 · --rad-m 14 · --rad-l 22