DESIGN SYSTEM PREVIEW

Dithered Pixel

抖動像素 — 1-bit 終端機美學
Bayer 網點・熱感紙・鋸齒像素邊角

>_ Core Palette

墨黑
#0D0D0D
紙白
#F6F3E7
雜訊灰
#4A4A46
網點灰
#C9C6B8
訊號紅
#FF3B2F
深雜訊
#242420

>_ Bayer Dither Ramp

全部由黑白兩色網點密度組成,沒有一個像素是真正的灰色。All七階由 100% 黑到 0% 黑的網點密度模擬灰階。

100%
75%
60%
50%
35%
20%
8%

repeating-conic-gradient + background-size 控制網點密度

>_ Typography

H1 — VT323 · 400 · clamp(2.4rem,7vw,4rem)

SYSTEM READY 系統就緒

H2 · 2.2rem

載入中請稍候 Loading...

H3 · 1.6rem

[ 錯誤代碼 ERROR 0x0D ]

Body — Space Mono · 16px · line-height 1.7

單色終端機的世界裡,一切訊息都用等寬字排列。連結用虛線底線,hover 時反色顯示,像被游標選取。MICRO LABEL 只用於極短徽章文字。

>_ Buttons

Hover:黑白反色或硬邊位移陰影,無漸變過渡

>_ Tags & Badges

SELECTED DEFAULT DISABLED [OK] PASS [ERR] FAIL

>_ Panels

FILE 01

收據列印模組

模擬熱感紙印表機輸出效果,黑白網點取代灰階,適合報表與清單類介面。

FILE 02

反白選取狀態

深色面板用於強調或選取態,Signal Red 在此依然是唯一允許出現的彩色。

>_ Terminal Window

SYSTEM BOOT... OK > render --style dithered-pixel --accent signal-red LOADING BAYER MATRIX [####------] 40% > _

掃描線疊加(scanline overlay)+ 終端機提示符游標

>_ Color Reference

色彩Hex角色
墨黑#0D0D0DPrimary — 文字、邊框、網點深色
紙白#F6F3E7Canvas — 頁面底色
雜訊灰#4A4A46Secondary — 次要文字
網點灰#C9C6B8Muted — 淺網點、分隔線
訊號紅#FF3B2FAccent — 系統唯一彩色
深雜訊#242420深色面板、hover 反白底