DESIGN SYSTEM PREVIEW · 設計系統預覽
NEON NIGHT 霓虹夜
深夜霓虹招牌設計系統 — 玻璃管邊框・多層發光・電子招牌字體
A cyberpunk night-signage aesthetic for the Design Lab
CORE PALETTE 核心霓虹色
TYPOGRAPHY 字體規範
H1 — Orbitron · 700 · 2.6rem
DEEP CITY LIGHTS 深夜城市之光
H2 — Orbitron · 600 · 2rem
OPEN AFTER MIDNIGHT 午夜後仍營業
H3 — Orbitron · 600 · 1.4rem
SIGNAL: ONLINE 訊號:上線中
Body — Rajdhani · 17px · line-height 1.7
正文使用 Rajdhani 保持窄體幾何感又不失可讀性。連結是電光青,hover 時發光層數升到最大;數據讀數如色碼 #00F0FF 用等寬字 Share Tech Mono 呈現,像儀表板上的數字。
BUTTONS 按鈕
// hover:邊框與文字 glow 由 2 層升級為 4 層完整強度,背景浮現微弱色調
TAGS & BADGES 標籤徽章
INFO 資訊
ONLINE 上線
LIMITED 限定
DANGER 危險
FEATURED 精選
BETA 實驗性
SIGN CARDS 招牌卡片
ARCADE
NEON ALLEY 霓虹小巷
01 · NIGHT DISTRICT
深夜巷弄裡層層疊起的招牌燈,構成整個系統的視覺原型。每一塊招牌都是獨立光源。
SIGNAGE
SYNTHWAVE DRIVE 合成波公路
02 · OUTRUN AESTHETIC
復古未來主義的招牌字體與漸層地平線,是這套系統色彩靈感的另一個來源。
SIGNAL PANEL 訊號面板(招牌元件)
NEON NIGHT
// SYSTEM ONLINE · 系統已啟動
// 進場播放一次 flicker 通電閃爍,之後轉為穩定常亮 — 絕不持續閃爍
COLOR REFERENCE 色彩對照表
| 色彩 Name | Hex | 角色 Role |
| 電光青 Electric Cyan | #00F0FF | Primary — CTA、連結、主招牌色 |
| 霓虹洋紅 Neon Magenta | #FF2E9A | Secondary — 精選標籤、次要按鈕 |
| 螢光萊姆 Neon Lime | #C6FF3D | Accent / Success — 上線狀態、成功回饋 |
| 紫外光 UV Violet | #B24BFF | Tertiary — 裝飾發光、實驗性標籤 |
| 警示琥珀 Signal Amber | #FF9F1A | Warning — 警示文字、限定標籤 |
| 危險紅光 Danger Flare | #FF3355 | Danger — 錯誤狀態、危險警示 |
| 主文字 Text Primary | #F1F0FF | Text — 標題與正文(冷紫調近白) |
| 畫布黑 Canvas | #0A0A12 | Base — 頁面底色,所有光的起點 |