精選 · 開放 · 免費
Immersive Garden
專注於高端、沉浸式體驗的精緻數位工作室。
agencywebgl
01
設計氣質 DNA
優雅極簡沉浸式雕塑感高端
一個建築與數位藝術交融的靜謐藝廊空間。
02
色彩
#030303Ink
#e8e8e8BG
rgba(3,3,3,0.1)Line
極度克制;依賴嚴格的淺色-on-深色 / 深色-on-淺色二元對比。
03
字型
transitional-serif · grotesque-sans
- display
44px · 400 - body
16px · 400 - caption
14px · 400
大寫標籤使用寬鬆字間距。 · 展示型排版保持緊湊行高。 · 絕不使用粗體;依賴大小與字體系列建立層級。
04
間距
4px
8px
16px
20px
24px
40px
48px
160px
採用嚴格的 16px 基礎單位,搭配寬大、有呼吸感的邊距以平衡空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
無
06
版面
1440container
12columns
16pxgutter
768 / 1024breakpoints
全螢幕畫布佈局,內容錨定於特定區域。
07
動效與互動
250msmicro
300mssmall
1900msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
緩慢、優雅的透明度淡入淡出用於頁面過渡。 · 互動文字元素的細微懸停狀態。 · 3D WebGL 元素的平滑、線性移動。
導覽與 CTA 文字的細微色彩變化與透明度改變。 · 透過狀態改變提供即時視覺反饋。
08
組件
- button 純文字互動元素,依賴細微的透明度與色彩變化。
- card 極簡的項目展示,依賴高解析度影像。
- hero 全視窗沉浸式場景,搭配 3D 雕塑感背景。
09
文案語氣與禁用清單
- 語氣 精緻、內斂且高度專業。
- 標題風格 簡短有力的陳述,搭配優雅的襯線字體排版。
- 按鈕文案 低調的文字連結,極少視覺干擾。
- 請勿使用粗體字重——截圖顯示所有文字元素僅使用常規字重。
- 請勿添加陰影——截圖顯示完美平整、啞光的 UI 表面。
- 請勿使用鮮豔的強調色——色板嚴格單色灰階。
- 請勿使用圓角容器——佈局依賴銳利邊緣與全幅影像。
- 請勿讓佈局擁擠——截圖展示了極致的留白運用。
- 請勿使用裝飾性邊框——元素之間透過留白而非線條分隔。
- 避免: 過度技術性的術語。
- 避免: 侵略性的銷售語言。
- 避免: 視覺雜亂或裝飾性元素。
- 避免: 明亮、飽和的色彩。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
本站為高端數位設計機構作品集,其特色在於優雅的單色色板,運用淺灰色 (#e8e8e8) 與近黑色 (#030303)。字體排版依賴展示型過渡襯線體與內文怪誕無襯線體的精緻組合。佈局寬敞簡約,採用全視窗畫布與極致留白。關鍵限制:嚴格避免粗體字重、永不使用陰影或裝飾性邊框,並維持高對比灰階美學。始終優先考慮精緻的工作室級呈現,而非功能密度。
en · zh-CN · zh-TW · ja · ko