精選 · 開放 · 免費

tldraw

一款簡約的協作畫布工具，旨在不干擾你的創意流動。

01

設計氣質 DNA

簡潔的數位白板，隱藏工具介面

02

色彩

中性畫布搭配單一鮮明藍色作為主要操作色

03

字型

humanist-sans

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

UI 元素使用中性無襯線字體 · 標準 UI 文字統一使用 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

文案語氣與禁用清單

• 語氣 簡約、功能導向、不引人注目
• 標題風格 精簡、具行動力的標籤文字
• 按鈕文案 直接清晰，例如「登入以分享」

• 勿使用深色背景——截圖顯示為明亮的白色畫布。
• 勿使用多種字體——截圖顯示統一使用 humanist-sans。
• 勿使用過重投影陰影——截圖顯示細緻、真實的陰影效果。
• 勿讓 UI 顯得擁擠——截圖顯示極簡的浮動工具列。
• 勿使用複雜色調——截圖顯示中性基底搭配單一藍色強調。
• 勿使用過於複雜的字體層級——截圖顯示以字重區分的簡潔層次。
• 避免: 避免在畫布上堆砌不必要的 UI 元素
• 避免: 避免使用過度裝飾性字體
• 避免: 避免使用多樣化的主色調

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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