精選 · 開放 · 免費

Studio Dumbar

一個動態優先的設計機構作品集，透過 3D 渲染與大膽的視覺實驗來突破排版邊界。

brandmotion
Studio Dumbar 網站截圖
↓ 下載設計系統包 (22 MB)在 OpenDesign 中開啟

原站: https://studiodumbar.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

實驗性動態3D排版設計工作室

一家實驗性動態設計工作室，將排版視為 3D 雕塑。

02

色彩

#FFFFFFInk
#868686Ink soft
#000000BG
rgba(255,255,255,1.0)Line

嚴格的單色調色盤，色彩僅源於展示的作品影像。

03

字型

geometric-sans · humanist-sans

導航使用統一的 20px 無襯線字體。 · 展示排版依賴 3D 渲染形式，而非傳統網頁字體。 · 層級透過尺寸與立體渲染來達成，而非字重變化。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

非對稱間距，著重於視覺構圖而非嚴格遵循網格。

05

表面 (圓角 / 陰影 / 邊線)

sm · 0px
md · 0px
lg · 0px
pill · 999px

用於平面 UI 元素的 0 0 0 rgba(0,0,0,0) · 於專案影像中渲染的複雜 3D 光影

06

版面

1920container
12columns
24pxgutter
768 / 1024breakpoints

全出血沉浸式佈局，搭配懸浮導航，且結構網格極不可見。

07

動效與互動

200msmicro
400mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

狀態變化時的平滑背景色轉場。 · 專案展示之間的沉浸式全視口轉場。 · 主視覺區域內的 3D 物體旋轉與變形。

細微的游標狀態變化與透過 transition 屬性實現的連結高亮。 · 沉浸式轉場至專案詳情頁面。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Studio Dumbar — 桌面首屏（hero）
桌面首屏（hero）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Studio Dumbar — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個實驗性動態設計工作室的作品集，定位於 3D 渲染與排版的交叉點。其視覺系統建立在嚴格的單色基礎上：純黑背景 (#000000)、白色文字 (#FFFFFF)，以及用於次要元素的柔灰色 (#868686)。在 UI 層，排版極簡，導航使用幾何與人文無襯線字體類別，尺寸為 20px；而真正的展示時刻則是 3D 渲染的排版雕塑，同時作為主視覺影像與專案識別。佈局為全出血且沉浸式，摒棄傳統網格結構，採用電影感的構圖。關鍵限制包括：不使用彩色 UI 元素（所有色彩源於作品）、不在介面元件上使用厚重陰影、不在容器上使用圓角。動態系統強調平滑的 1 秒轉場與 3D 物件操作。此方法確保作品集本身即展示了工作室的動態能力，而非僅僅描述它們。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko