精选 · 开放 · 免费

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

导航使用一致的20像素无衬线字体。 · 展示性排版依赖3D渲染形态，而非传统网络字体。 · 层级通过比例和维度渲染实现，而非字重变化。

04

间距

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

非对称间距，侧重视觉构图而非严格遵循网格。

05

表面 (圆角 / 阴影 / 边线)

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

0 0 0 rgba(0,0,0,0) 用于平面UI元素 · 复杂3D光效渲染于项目图像内

06

布局

1920container
12columns
24pxgutter
768 / 1024breakpoints

全出血沉浸式布局，浮动导航且结构网格可见度极低。

07

动效与交互

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

状态变化时平滑的背景色过渡。 · 项目展示间的沉浸式全视口过渡。 · 主视觉区域内3D对象的旋转与变形。

通过过渡属性实现细微光标状态变化与链接高亮。 · 沉浸式过渡至项目详情视图。

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层排版极简，导航采用几何与人文无衬线字体类别（20像素），而实际展示时刻则是3D渲染的排版雕塑，既作为主视觉也作为项目标识。布局采用全出血沉浸式设计，摒弃传统网格结构，追求电影感构图。关键约束包括：不使用彩色UI元素（所有色彩均源于作品）、不为界面组件添加厚重投影、容器不使用圆角。运动系统强调平滑的1秒过渡与3D对象操作。此方法确保作品集自身演示工作室的动态能力，而非仅作描述。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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