큐레이션 · 오픈 · 무료

tldraw

아이디어의 흐름을 방해하지 않도록 설계된 미니멀리즘 협업 캔버스 도구.

01

디자인 DNA

숨겨진 크롬이 있는 깔끔한 디지털 화이트보드

02

컬러

기본 작업을 위한 단 하나의 선명한 블루가 포함된 중립적 캔버스

03

타이포그래피

humanist-sans

• body12px · 500
• caption16px · 500
• h124px · 700

UI 요소에는 중립적인 sans-serif 사용 · 일반 UI 텍스트의 일관된 weight 500 유지 · 굵은 글꼴은 제목에만 절제하여 사용

04

여백

8px 기본 그리드

05

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

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.16) 0px 0px 2px 0px · rgba(0, 0, 0, 0.24) 0px 2px 3px 0px

07

모션과 인터랙션

UI 패널 가시성을 위한 부드러운 전환

인터랙티브 요소에서 커서가 포인터로 변경됨 · 색상 변경 또는 미세한 그림자로 활성 상태 표시

08

컴포넌트

• button 기본 버튼은 흰색 텍스트와 둥근 모서리가 적용된 단색 블루이며, 보조 버튼은 회색 또는 테두리만 있는 형태입니다.
• card 전통적인 카드 없음; UI는 그림자가 적용된 플로팅 패널로 표시됩니다.
• chip 관찰된 칩 없음.
• input 텍스트 입력 필드가 보이지 않음; 인터페이스는 주로 아이콘 기반입니다.
• hero 전체 캔버스가 히어로 영역으로 작동합니다.

09

보이스와 금지 목록

• 톤 미니멀하고 기능적이며, 방해하지 않는
• 헤드라인 간결하고 행동 지향적인 레이블
• CTA '로그인하여 공유하기'처럼 직접적이고 명확한

• 어두운 배경을 사용하지 마세요 — 스크린샷은 밝은 흰색 캔버스를 보여줍니다.
• 다양한 글꼴을 사용하지 마세요 — 스크린샷은 일관된 humanist-sans를 보여줍니다.
• 무거운 드롭 그림자를 사용하지 마세요 — 스크린샷은 미묘하고 사실적인 그림자를 보여줍니다.
• UI를 복잡하게 하지 마세요 — 스크린샷은 최소화된 플로팅 도구 모음을 보여줍니다.
• 복잡한 색상 팔레트를 사용하지 마세요 — 스크린샷은 단일 블루 액센트가 포함된 중립적 기본 색상을 보여줍니다.
• 지나치게 복잡한 타이포그래피를 사용하지 마세요 — 스크린샷은 단순하고 weight 기반의 계층 구조를 보여줍니다.
• 피하기: 불필요한 UI로 캔버스를 어지럽히는 것
• 피하기: 지나치게 장식적인 글꼴 사용
• 피하기: 다양한 기본 색상 사용

10

팩 안의 실제 스크린샷

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

11

System Prompt

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