큐레이션 · 오픈 · 무료

Clay

글로벌 브랜딩 및 UX 디자인 에이전시 포트폴리오.

EditorialCleanProductCalmRestraint
Clay 스크린샷
↓ 디자인 시스템 다운로드 (17 MB)OpenDesign 에서 열기

원본 사이트: https://clay.global

📦 팩 내용 보기 →

01

디자인 DNA

브랜딩UX에이전시글로벌디자인크리에이티브

고급 포트폴리오 작업을 선보이는 프리미엄 디자인 에이전시.

02

컬러

#06070AInk
#666C7AInk soft
#FFFFFFBG
#EFEDEEBG soft
#F3F4F6BG quiet
#B2B8C2Muted
rgba(6,7,10,1.0)Line

흑백 단색 계열에 미묘한 따뜻한 그레이 배경 그라데이션과 은은한 그레이 UI 요소를 사용합니다.

03

타이포그래피

geometric-sans

04

여백

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

표준 4px 기본 그리드를 사용하며, 히어로 영역에는 넉넉한 여백을, 콘텐츠 컨테이너에는 일관된 패딩을 적용합니다.

05

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

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

최소한의 1px 실선, 대부분 보더리스 카드, 그리고 눈에 띄는 필 형태의 연락처 버튼.

0 4px 24px rgba(6,7,10,0.08)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

히어로 영역의 비대칭 분할 레이아웃(왼쪽 텍스트, 오른쪽 3D 그래픽)과 그 아래의 대형 이미지 기반 케이스 스터디 카드 그리드.

07

모션과 인터랙션

150msmicro
650mssmall
900msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

페이지 로드 시 부드러운 투명도 페이드 인 · 스크롤 시 은은한 transform 효과 · 네비게이션 링크 hover 색상 전환

네비게이션 링크에 미묘한 색상 전환 (0.15s). · 인터랙티브 요소에 즉각적인 반응 및 커서 포인터.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

프리미엄 글로벌 브랜딩 및 UX 디자인 에이전시 웹사이트를 설계하세요. 순수한 흰색(#FFFFFF)과 깊은 잉크(#06070A)를 중심으로 한 단색 팔레트를 사용하고, 미묘한 따뜻한 그레이 배경(#EFEDEE)과 은은한 그레이 UI 요소(#666C7A)를 적용하세요. 타이포그래피는 두 가지 두께의 깔끔한 기하학적 sans-serif여야 합니다: 대형 디스플레이 헤드라인용 무거운 740 두께와 본문용 중간 500 두께, 모두 타이트한 음수 자간을 사용합니다. 레이아웃은 넉넉한 여백, 비대칭 분할 히어로 영역, 그리고 대형 보더리스 이미지 중심 케이스 스터디 카드를 특징으로 해야 합니다. 주요 인터랙션 요소인 CTA는 검은색 필 형태 버튼을 사용합니다. 필수 제약 조건: 모든 장식용 세리프 폰트를 피하고, 절대로 채도 높은 강조색을 사용하지 않으며, 부드러운 cubic-bezier 전환을 사용하여 절제되고 정교한 미학을 유지합니다.

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

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

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

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