큐레이션 · 오픈 · 무료

dbt

현대적이고 AI에 준비된 데이터 변환을 위한 오픈 표준입니다.

devdata
dbt 스크린샷
↓ 디자인 시스템 다운로드 (60 MB)OpenDesign 에서 열기

원본 사이트: https://www.getdbt.com

📦 팩 내용 보기 →

01

디자인 DNA

오픈 표준데이터 변환AI 준비 완료개발자 도구

데이터 파이프라인을 위한 현대적 산업 작업장

02

컬러

#FE6703Accent
#030711Ink
#374151Ink soft
#FFFFFFBG
#F5F3FFBG soft
#6B7280Muted
rgba(3,7,17,0.1)Line

깨끗한 화이트 위의 높은 대비 잉크에 밝은 오렌지 강조색으로 주요 작업을 강조합니다.

03

타이포그래피

transitional-serif · humanist-sans · monospace

헤드라인은 권위를 위해 트랜지션 세리프를 사용합니다 · 본문은 가독성을 위해 깨끗한 휴머니스트 산스를 사용합니다 · 코드 스니펫은 중립적인 모노스페이스 폰트를 사용합니다

04

여백

4px
8px
12px
16px
24px
32px
40px
48px
64px

일관된 4px 기본 그리드와 여유로운 섹션 패딩(64px)을 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 4px
md · 8px
lg · 12px
pill · 999px

카드와 입력 필드에는 얇은 1px 테두리를, 인터랙티브 요소에는 더 두꺼운 테두리를 사용합니다.

0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px rgba(0,0,0,0.1)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

모바일 및 태블릿용 반응형 브레이크포인트가 있는 표준 12컬럼 그리드입니다.

07

모션과 인터랙션

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

호버 상태를 위한 미묘한 페이드 및 스케일 트랜지션 · 대부분의 인터랙티브 요소에 적용되는 표준 이징

인터랙티브 요소에 미묘한 색상 변화 또는 배경 변화가 적용됩니다. · 즉각적인 시각적 피드백을 제공하는 표준 포인터 커서를 사용합니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

dbt Labs 사이트는 데이터 변환과 AI 준비에 중점을 둔 현대적인 개발자 도구 SaaS입니다. 주요 화이트 배경, 니어 블랙 잉크, 밝은 오렌지 강조색을 사용한 깨끗하고 전문적인 미학을 사용합니다. 타이포그래피는 헤드라인을 위한 트랜지션 세리프, 본문을 위한 휴머니스트 산스, 코드를 위한 모노스페이스 폰트를 결합합니다. 레이아웃은 12컬럼 그리드를 사용하여 여유롭습니다. 주요 요소로는 큰 히어로 섹션, 얇은 테두리가 있는 깨끗한 화이트 카드, 두드러진 오렌지 호출-행동 버튼이 포함됩니다. 중요한 제약 조건: 장난스럽거나 whimsical한 요소를 피하고, 결코 무딘 팔레트를 사용하지 않으며, 전체적으로 여유로운 여백을 유지합니다. 전체적인 느낌은 권위 있고 신뢰할 수 있으며 기술적으로 정확합니다.

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

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

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

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