← OpenDesign 큐레이션 · 오픈 · 무료
Payload
모던 웹 애플리케이션 구축을 위한 오픈소스 Next.js 백엔드입니다.
cms dev
01
디자인 DNA
개발자 우선 모던 헤드리스 CMS TypeScript
백엔드 개발을 위한 고성능 스포츠카
02
컬러
#ffffffInk
rgba(255,255,255,0.5)Ink soft
#000000BG
rgba(255,255,255,0.125)BG soft
#808080Muted
은은한 질감 오버레이를 적용한 고대비 단색 팔레트
03
타이포그래피
geometric-sans · monospace
display 56px · 500heading 32px · 500body 16px · 400caption 12px · 500제목에는 타이트한 트래킹의 기하학적 산세리프 사용 · 본문에는 동일 기하학적 산세리프 패밀리의 레귤러 웨이트 사용 · 코드 스니펫에는 모노 폰트 사용 · 라벨과 메타데이터에는 대문자 변환 적용
04
여백
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
96px
풍부한 패딩을 적용한 일관된 4px 그리드
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 40px
1px solid rgba(255,255,255,0.125)
0 4px 24px rgba(0,0,0,0.5)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
풍부한 패딩을 적용한 풀폭 섹션
07
모션과 인터랙션
150ms micro
300ms small
800ms medium
cubic-bezier(0.165, 0.84, 0.44, 1) easing
인터랙티브 요소의 매끄러운 hover 전환 · 콘텐츠 섹션의 순차적 페이드인 애니메이션
은은한 불투명도 및 변형 변경 · 시각적 피드백을 포함한 즉각적 응답
08
컴포넌트
button 단색 흰색 배경과 검정 텍스트를 적용한 알약 모양의 기본 버튼 card 은은한 테두리와 배경 틴트를 적용한 간단한 카드 chip 자간을 적용한 소문자 라벨 input 은은한 테두리를 적용한 최소한의 입력 필드 hero 대형 타이포그래피와 코드 스니펫 미리보기가 포함된 풀폭 히어로 09
보이스와 금지 목록
톤 자신감 있고 기술적이며 개발자 중심적 헤드라인 기능성에 대한 굵고 직접적인 진술 CTA 방향 화살표가 포함된 명확한 행동 중심 버튼 화려한 그라데이션 사용 금지 — 스크린샷은 단색 팔레트 표시 세리프 폰트 사용 금지 — 스크린샷은 전체적으로 기하학적 산세리프 표시 바쁜 배경 사용 금지 — 스크린샷은 깔끔한 어두운 표면 표시 작은 터치 타겟 사용 금지 — 스크린샷은 풍부한 패딩 표시 장식적 요소 사용 금지 — 스크린샷은 최소한의 기능적 디자인 표시 복잡한 애니메이션 사용 금지 — 스크린샷은 은은하고 목적 지향적인 모션 표시 피하기: 지나치게 캐주얼한 언어 피하기: 마케팅 용어 피하기: 과도한 구두점 피하기: 대문자 본문 텍스트 10
팩 안의 실제 스크린샷
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Payload CMS는 웹 개발을 위한 모던 백엔드 솔루션으로 위치한, 개발자 중심 헤드리스 CMS입니다. 주요 시각 요소로는 다크 테마(#000000 배경)와 기하학적 산세리프 폰트를 사용한 흰색(#ffffff) 타이포그래피가 포함됩니다. 디자인은 타이트한 트래킹의 굵고 큰 헤드라인과 최소한의 장식적 요소를 강조합니다. 핵심 제약 사항: 화려한 강조색 없이 엄격한 단색 팔레트 유지, 일관된 기하학적 산세리프 타이포그래피 계층 사용, 전체적으로 풍부한 간격과 패딩 확보. 깔끔하고 기술적인 미학을 저해할 수 있는 세리프 폰트, 그라데이션, 또는 지나치게 장식적인 요소는 피할 것. 인터페이스는 코드 스니펫, 터미널 스타일 명령어, 기술적 콘텐츠의 명확한 시각적 계층을 통해 개발자 경험을 우선시합니다.
더 보기 en · zh-CN · zh-TW · ja · ko
