新野獸派
Neubrutalism
粗框色塊、硬派陰影、大膽搶眼
高對比黑白骨架 + 螢光色塊的 Gen Z 視覺語言。厚 2px 邊框、錯位陰影、monospace 字體排列，帶有 90s Web 的粗獷感。本站首頁採用的正是這個系統。
#Bold
#Monospace
#High-contrast
#Off-grid
style lab · 5 themes
設計風格
範本庫
收錄 5 種 2025 前端設計語言，對應不同產品氣質與品牌調性。 本站主視覺採用 Neubrutalism，其它幾款作為設計教材與風格參考。 若有企業內訓 / 形象網站改版需求，可以挑選喜歡的風格當作溝通起點。
themes · 共 5 款
風格一覽
自然提煉
Nature Distilled
大地色調、有機質感、手作溫暖
木紋、米白、苔綠層次疊合的手作美感。適合需要放鬆、溫暖、親近感的教育型產品。字體選用圓潤襯線 + 小型手寫元素，留白大方。
#Organic
#Earthy
#Serif
#Warm
動態敘事
Motion-Driven
流暢轉場、視覺敘事、場景切換
以 Framer Motion 動畫貫穿整個首頁體驗，滑鼠滾輪觸發場景轉場。深色基底 + 高飽和漸層強調視覺焦點，適合作品集或 Launch Page 使用。
#Motion
#Gradient
#Dark
#Cinematic
視差敘事
Parallax Storytelling
章節式滾動、電影級沉浸體驗
以章節為單位的視差滾動設計，每個 section 都是一個視覺場景。深紫藍基底配霓虹紅點綴，字體使用襯線體強化文學感。適合長篇故事型內容。
#Parallax
#Serif
#Narrative
#Immersive
反修飾原生
Anti-Polish / Raw
手繪質感、紙張肌理、真實不修飾
刻意反對「pixel perfect」的設計哲學，採用噪點、手繪線條、紙張紋理。強調真實、粗糙、原創。適合個人部落格或獨立藝術家網站。
#Raw
#Hand-drawn
#Texture
#Anti-design
want a custom site?
想要自己的設計系統？
企業內訓 / 形象網站改版 / React Design System 建置，歡迎直接聯繫討論。 這些風格都可以當作起點，再依品牌調性客製色彩、字體、動態細節。