큐레이션 · 오픈 · 무료

MotherDuck

답을 위한 인프라.

datadb
MotherDuck 스크린샷
↓ 디자인 시스템 다운로드 (14 MB)OpenDesign 에서 열기

원본 사이트: https://motherduck.com

📦 팩 내용 보기 →

01

디자인 DNA

데이터 웨어하우스분석SQLDuckDB클라우드

복잡한 데이터 인프라를 위한 친근하고 접근 가능한 유틸리티.

02

컬러

#FFDE00Accent
#383838Ink
#F4EFEABG
#666666Muted
rgba(56,56,56,1)Line

고대비의 따뜻한 중립적 베이스에 활기찬 노란색 강조와 날카로운 2px 검정 테두리를 적용하여 독특한 일러스트레이션 느낌을 줍니다.

03

타이포그래피

monospaced · humanist-sans

모든 제목은 대문자로 표기되며 고정폭 글꼴로 설정됩니다. · 본문 텍스트는 가독성을 위해 깔끔한 휴머니스트산세리프체를 사용합니다.

04

여백

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

기본 4px 그리드를 기반으로 하며, 주요 섹션 주위에 넉넉한 padding을 적용합니다.

05

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

sm · 2px
md · 2px
lg · 2px
pill · 999px

2px solid rgb(56, 56, 56)

rgb(56, 56, 56) -8px 8px 0px 0px · rgb(255, 222, 0) -6px 6px 0px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

스택된 콘텐츠를 갖춘 중앙 정렬된 히어로 섹션과 다중 열 로고 그리드로 구성됩니다.

07

모션과 인터랙션

120msmicro
200mssmall
400msmedium
cubic-bezier(0.34, 0, 0.12, 1)easing

hover 시 미묘한 transform 효과 · 부드러운 상태 변화를 위한 ease-in-out 전환

미묘한 transform과 그림자 위치 변화. · 기본 포인터 커서.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

MotherDuck은 개발자와 데이터 팀을 위한 클라우드 데이터 웨어하우스 플랫폼으로, 친근하면서도 정확한 기술적 미학이 특징입니다. 디자인은 따뜻한 베이지 배경(#F4EFEA), 짙은 잉크 그레이(#383838), 생동감 있는 노란색 강조(#FFDE00), 그리고 주요 버튼을 위한 밝은 라이트 블루(#6FC2FF)를 활용합니다. 타이포그래피는 제목용 고정폭 글꼴(Aeonik Mono)을 대문자로 크게 사용하고, 본문용 깔끔한 휴머니스트산세리프체와 결합합니다. 핵심 디자인 규칙은 다음과 같습니다: 부드러운 글로우 대신 날카로운 2px 검정 테두리와 하드 오프셋 그림자를 유지하고, 전시 텍스트는 철저히 대문자를 사용하며, 일반적인 둥글거나 '부드러운' UI 패턴을 피합니다. 전체적인 느낌은 일러스트레이션적이고 구조적이며 접근 가능합니다.

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

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

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

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