精選 · 開放 · 免費

Balsa

一款用於建構軟體的文件與專案追蹤工具。

01

設計氣質 DNA

一個簡潔、專注的工作空間，協助產品團隊對齊目標與任務。

02

色彩

採用高對比黑白配色，並以單一高飽和度黃色作為強調色，用於突顯關鍵的 UI 卡片與提示區塊。

03

字型

grotesque-sans · humanist-sans · monospace

• display48px · 700
• heading24px · 700
• body16px · 400
• caption12px · 400

UI 標籤與狀態指示器使用大寫字母。 · 主標題使用粗體字重與緊湊的字間距。

04

間距

採用一致的 4px 格線基底，首頁區域留有充裕的空白。

05

表面 (圓角 / 陰影 / 邊線)

使用纖細、低透明度的黑色邊框（rgba(0,0,0,0.09））以實現細微的區隔。

rgba(0,0,0,0.05) 0px 1px 0px 0px · rgba(0,0,0,0.15) 0px 0.7px 0.7px -0.625px, rgba(0,0,0,0.145) 0px 1.8px 1.8px -1.25px, rgba(0,0,0,0.05) 0px 30px 30px -3.75px

06

版面

行銷網站採用置中單欄版面，而產品介面截圖則使用複雜的多欄格線。

07

動效與互動

在 hover 與 focus 狀態時，提供流暢的過渡效果。

互動元素在 hover 時會有細微的顏色變化或陰影移動。 · 點擊時透過狀態變化提供立即的視覺回饋。

08

組件

• button 主要操作使用實心黑色膠囊形按鈕，次要操作則使用帶有邊框的膠囊形按鈕。
• card 白色卡片搭配柔和陰影（例如：主要產品介面截圖），以及用於強調功能的黃色強調卡片。
• chip 狀態指示器採用圓角設計與背景顏色。
• input 簡潔的輸入欄位，帶有邊框與細微陰影。
• hero 置中的文字密集型首頁區域，包含大型標題、副標題，以及下方顯眼的產品介面截圖。

09

文案語氣與禁用清單

• 語氣 直接、專業，並專注於提升團隊效率。
• 標題風格 全大寫、粗體，且具有高對比度。
• 按鈕文案 清晰、以行動為導向，且常置於膠囊形按鈕內。

• 避免使用繁雜的背景——截圖顯示的是乾淨的純白色（#FFFFFF）背景。
• 避免使用低對比的強調色——截圖顯示的是高飽和度的黃色（#FFB700）用於強調。
• 避免使用淺色或灰色的主要文字顏色——截圖顯示主標題使用純黑色（#000000）。
• 避免使用銳利的直角——截圖顯示主要卡片與容器採用圓角（12px）設計。
• 避免使用深色模式介面——截圖顯示的是以白色/淺色為主的主題。
• 避免使用裝飾性、手寫體或過度風格化的字體——截圖顯示的是乾淨、實用的無襯線與等寬字體類別。
• 避免: 過於口語化的語言
• 避免: 複雜的專業術語
• 避免: 過於密集的文字區塊

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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