큐레이션 · 오픈 · 무료

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 객체 회전 및 형태 변화.

전환 속성 통한 미묘한 커서 상태 변화와 링크 강조. · 프로젝트 상세 보기로의 몰입형 전환.

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 객체 조작을 강조합니다. 이 접근 방식은 포트폴리오 자체가 기술하는 것보다는 스튜디오의 모션 역량을 시연하도록 보장합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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