← OpenDesign
큐레이션 · 오픈 · 무료
Farcaster
구축. 공유. 성장.
web3 social
01
디자인 DNA
탈중앙화 소셜 개발자 오픈 프로토콜
빌더를 위한 탈중앙화 소셜 프로토콜.
02
컬러
#7959FFAccent
#FFFFFFInk
rgba(255, 255, 255, 0.8)Ink soft
#361AACBG
rgba(255, 255, 255, 0.5)Muted
rgba(255, 255, 255, 0.25)Line
높은 대비를 위해 딥 인디고 배경과 흰색 텍스트를 사용합니다.
03
타이포그래피
humanist-sans
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
표준 4px 베이스 그리드입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 300px
없음, 배경 대비에 의존합니다.
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
표준 웹 레이아웃, 모바일 우선입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
부드러운 hover 트랜지션.
스케일 또는 색상 변화. · 약간 축소.
08
컴포넌트
button 둥근 필 모양, primary 및 secondary 스타일. card 모바일 앱 프리뷰에 다크 글래스 효과. chip 보이는 것 없음. input 보이는 것 없음. hero 폰트 목업과 CTA가 포함된 분리형 레이아웃.
09
보이스와 금지 목록
톤 직설적이고 자신감 있는 기술적 어조. 헤드라인 짧고 강렬한 문장. CTA 명확하고 실행 가능한. 얇은 weight를 사용하지 마세요 — 스크린샷은 bold/medium weight를 보여줍니다. primary 버튼에 날카로운 모서리를 사용하지 마세요 — 스크린샷은 pill 모양을 보여줍니다. 밝은 배경을 사용하지 마세요 — 스크린샷은 딥 인디고를 보여줍니다. 복잡한 gradient를 사용하지 마세요 — 스크린샷은 단색 또는 매우 미묘한 gradient를 보여줍니다. 장식용 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 sans-serif를 보여줍니다. 레이아웃을 어지럽히지 마세요 — 스크린샷은 명확하고 집중된 히어로 섹션을 보여줍니다. 피하기: 모호한 약속. 피하기: 과장된 마케팅 문구. 피하기: 비전문적인 전문 용어.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
개발자와 크리에이터를 위한 탈중앙화 소셜 프로토콜. 딥 인디고 배경(#361AAC)에 흰색 텍스트와 생동감 있는 보라색 액센트(#7959FF). 깔끔한 humanist sans-serif 타이포그래피(Inter)를 사용하며 강조를 위해 bold weight를 사용합니다. 버튼은 완전히 둥글며(filter 모양). 레이아웃은 깔끔하고 집중적이며 어지러움을 피합니다. 중요한 주의사항: 버튼에 날카로운 모서리를 사용하지 마세요, 밝은 배경을 사용하지 마세요, 얇은 폰트 weight를 사용하지 마세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 탈중앙화 프로토콜을 위한 현대적이고 집중된 SaaS 랜딩 페이지의 강력한 예시입니다.