큐레이션 · 오픈 · 무료

Gumroad

크리에이터가 자신의 대중에게 직접 판매할 수 있게 하는 플랫폼.

SaaSProductivityConsumerCalmRefined

↓ 디자인 시스템 다운로드 (1 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

디자인 DNA

크리에이터마켓플레이스수익화자기 역량 강화단순함

독립 크리에이터를 위한 초대형 디지털 마켓플레이스.

컬러

#000000Ink

#F4F4F0BG

#999999Muted

rgba(0,0,0,0.1)Line

따뜻한 중성 베이스와 장난스러운 포인트 컬러의 고대비.

타이포그래피

geometric-sans

display48px · 500

여백

4px

8px

16px

24px

32px

48px

64px

96px

중앙 요소 주변의 넉넉한 여백.

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

sm · 4px

md · 8px

lg · 16px

pill · 999px

입력 필드와 일부 카드에 적용되는 1px 얇은 solid 테두리.

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

부유하는 3D 요소를 포함한 중앙 정렬된 히어로 섹션.

모션과 인터랙션

150msmicro

150mssmall

150msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

버튼과 링크의 미묘한 hover 전환 효과.

배경색 변경 또는 투명도 변화. · 미세한 스케일 또는 색상 변화.

컴포넌트

button 흰색 텍스트를 사용한 검은색 solid 버튼, 둥근 모서리.
card 흰색 배경, 얇은 테두리, 둥근 모서리.
input 흰색 배경, 얇은 테두리, 둥근 모서리.
hero 대형 디스플레이 폰트와 행동 유도(CTA)가 포함된 중앙 정렬된 텍스트.

보이스와 금지 목록

톤 격려하고, 직접적이며, 친근한 어조.
헤드라인 '0에서 $1' 모티브를 사용한 굵고 명확한 스타일.
CTA '판매 시작하기'와 같은 행동 지향 동사.

순백 배경을 사용하지 마세요 — 스크린샷에서는 따뜻한 오프화이트(#F4F4F0)를 사용합니다.
블루를 포인트 컬러로 사용하지 마세요 — 스크린샷에서는 핑크/마젠타 장식 요소를 사용합니다.
장식용 세리프 폰트를 사용하지 마세요 — 스크린샷에서는 기하학적 산세리프 폰트를 사용합니다.
무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷에서는 얇은 테두리를 사용한 플랫 디자인을 보여줍니다.
복잡한 그래디언트를 사용하지 마세요 — 스크린샷에서는 단색과 깔끔한 전환을 사용합니다.
지나치게 밀집된 레이아웃을 사용하지 마세요 — 스크린샷에서는 넉넉한 여백과 중앙 정렬된 콘텐츠를 보여줍니다.
피하기: 전문 용어
피하기: 복잡함
피하기: 격식체

팩 안의 실제 스크린샷

Gumroad — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

이 사이트는 크리에이터가 디지털 제품을 판매하기 위한 SaaS 플랫폼입니다. 색상 팔레트는 따뜻한 오프화이트 배경(#F4F4F0)에 고대비의 검은색 텍스트(#000000)와 장난스러운 핑크 포인트 컬러를 사용합니다. 타이포그래피는 기하학적 산세리프(ABC Favorit)이며, 좁은 자간(-0.4px)과 굵은 디스플레이 웨이트를 사용합니다. 중요한 금지 사항: 순백 배경은 절대 사용하지 마세요; 블루 포인트 컬러는 피하세요; 세리프 폰트는 절대 사용하지 마세요; 무거운 드롭 섀도우는 피하세요; 복잡한 그래디언트는 피하세요; 밀집된 레이아웃은 피하세요. 레이아웃은 깔끔하고 중앙 정렬되어 명확한 행동 유도(CTA)에 초점을 맞춥니다.

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

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

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

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