큐레이션 · 오픈 · 무료

Whimsical

기술 팀과 에이전트를 위해 특별히 제작된 화이트보드

01

디자인 DNA

엔지니어를 위한 디지털 캔버스 회의실

02

컬러

깨끗한 표면에 고대비 잉크와 생동감 있는 보라색 강조

03

타이포그래피

humanist-sans · monospace

• display96px · 700
• h232px · 700
• body16px · 400

대형 디스플레이 텍스트에는 타이트한 네거티브 트래킹을 사용합니다 · 인터랙티브 요소에는 중간 무게감의 글꼴을 사용합니다 · 엄격한 타이포그래피 계층을 유지합니다

04

여백

8px 세로 리듬

05

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

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

레이아웃

콘텐츠를 중앙에 배치한 12컬럼 유동적 그리드

07

모션과 인터랙션

인터랙티브 요소의 부드러운 hover 전환 · 카드 hover 시 미묘한 부양 효과

미묘한 배경색 변화 또는 transform · 즉각적인 시각적 피드백

08

컴포넌트

• button 흰색 텍스트의 단색 다크 배경 또는 아웃라인 스타일
• card 미묘한 그림자와 둥근 모서리를 가진 깔끔한 컨테이너
• chip 라벨용 작은 둥근 태그
• input 명확한 포커스 상태가 있는 깔끔한 테두리 필드
• hero 중앙에 배치된 굵은 타이포그래피를 갖춘 큰 그라디언트 배경

09

보이스와 금지 목록

• 톤 전문적이고 명확하며 고무적인 어조
• 헤드라인 가치에 대한 굵고 간결한 진술
• CTA '무료로 시작하기'와 같은 직접적인 행동 동사

• 다크 모드 인터페이스를 사용하지 않습니다 — 스크린샷은 주로 흰색/연한 회색 배경을 보여줍니다
• 무거운 드롭 그림자를 사용하지 않습니다 — 스크린샷은 부드럽고 확산된 상승 그림자를 보여줍니다
• 장난기 있고 둥근 디스플레이 글꼴을 사용하지 않습니다 — 스크린샷은 깔끔하고 기하학적인 휴머니스트 산세리프 타이포그래피를 보여줍니다
• 네온이나 고채도 색상을 사용하지 않습니다 — 스크린샷은 깊은 보라색 강조가 있는 절제된 팔레트를 보여줍니다
• 과도한 테두리로 레이아웃을 어지럽히지 않습니다 — 스크린샷은 최소한의 테두리 사용을 보여줍니다
• 긴 단락에 중앙 정렬을 사용하지 않습니다 — 스크린샷은 기능 그리드에서 왼쪽 정렬된 본문 복사를 보여줍니다
• 피하기: 지나치게 캐주얼한 은어
• 피하기: 맥락 없는 밀도 높은 기술 용어
• 피하기: 공격적인 판매 언어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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