← OpenDesign
큐레이션 · 오픈 · 무료
Whimsical
기술 팀과 에이전트를 위해 특별히 제작된 화이트보드
design tool
01
디자인 DNA
화이트보드 협업 기술적 아이디어 기획
엔지니어를 위한 디지털 캔버스 회의실
02
컬러
#9E39E5Accent
#220A33Ink
#5C275EInk soft
#FFFFFFBG
#F5F4F5BG soft
#6A5C70Muted
rgba(224,219,227,1)Line
깨끗한 표면에 고대비 잉크와 생동감 있는 보라색 강조
03
타이포그래피
humanist-sans · monospace
display 96px · 700h2 32px · 700body 16px · 400대형 디스플레이 텍스트에는 타이트한 네거티브 트래킹을 사용합니다 · 인터랙티브 요소에는 중간 무게감의 글꼴을 사용합니다 · 엄격한 타이포그래피 계층을 유지합니다
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
8px 세로 리듬
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(224,219,227,1)
0px 16px 32px -4px rgba(37,8,53,0.06) · 0px 12px 16px -4px rgba(37,8,53,0.2)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
콘텐츠를 중앙에 배치한 12컬럼 유동적 그리드
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.3, 0.1, 0, 1) easing
인터랙티브 요소의 부드러운 hover 전환 · 카드 hover 시 미묘한 부양 효과
미묘한 배경색 변화 또는 transform · 즉각적인 시각적 피드백
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 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Whimsical은 기술 팀을 위해 특별히 제작된 화이트보드로 자리매김하는 전문적인 생산성 도구입니다. 디자인은 깨끗한 흰색과 부드러운 회색 표면에 주요 강조색으로 깊고 풍부한 보라색이 특징인 고대비 팔레트에 의존합니다. 타이포그래피는 크고 인상적인 헤드라인을 위한 디스플레이 글꼴과 본문 텍스트용으로 매우 읽기 쉬운 산세리프를 결합합니다. 핵심 제약 사항으로는 다크 모드나 지나치게 장난기 있는 미학 피해야 하며, 인터페이스는 구조화되고 효율적입니다. 넉넉한 여백을 유지하고 모든 인터랙티브 요소가 부드럽고 의도적인 전환을 갖도록 하세요. 레이아웃은 시각적 소음이나 무거한 장식을 피하고 명확성과 집중된 협업을 우선시해야 합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 전문적인 절제미와 독특한 브랜드 아이덴티티의 균형을 잘 이룬 현대적인 SaaS 도구의 훌륭한 예시입니다.