精選 · 開放 · 免費
Beau To
Beau透過為每個文件互動帶來智慧自動化,重新定義了面向客戶的流程。
SaaSProductivityAICleanTooling
01
設計氣質 DNA
自動化文件資料驗證效率
一個智慧文件處理引擎,自動化資料擷取與驗證。
02
色彩
#FF8308Accent
#000000Ink
#FFFFFFBG
#F6F4F1BG quiet
rgba(0,0,0,0.1)Line
以高對比的黑白確保清晰度,並利用鮮明的漸層強調動態能量。
03
字型
humanist-sans · monospace
- display
56px · 500 - display-sm
40px · 500 - heading
28px · 500 - body
17px · 400 - caption
14px · 400
04
間距
4px
8px
12px
16px
18px
24px
48px
72px
96px
基於4px網格,搭配充裕的空白以強調清晰感。
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 12px
lg · 24px
pill · 200px
細微的1px實線用於分隔。
0px 2px 6px 0px rgba(0, 0, 0, 0.06)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的首頁主視覺區域,後接交錯的分割佈局與三欄式功能區塊。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
懸停與狀態變化時,採用流暢的透明度過渡。
游標變成指標,並有細微的色彩或透明度過渡。 · 立即提供視覺回饋。
08
組件
- button 膠囊狀的主要按鈕,採用高對比黑色背景與白色文字。
- card 帶有細微邊框與柔和陰影的卡片,常包含資料驗證範例。
- chip 狀態指示器,使用彩色文字(綠色代表有效,橘色代表警告,紅色代表無效)。
- input 簡潔的文字輸入框,用於資料輸入。
- hero 大型居中標題,搭配輔助副標題與展示資料驗證的複雜UI介面模型。
09
文案語氣與禁用清單
- 語氣 專業、有效率且自信。
- 標題風格 直接且強調效益,常使用大號粗體字體。
- 按鈕文案 清晰且以行動為導向,例如「申請演示」。
- 不要使用多個主要強調色 — 截圖顯示僅使用單一漸層來強調各步驟
- 不要使用複雜的裝飾性背景 — 截圖顯示以乾淨的白色背景為主,僅有極少的雜訊
- 不要使用置中的內文 — 截圖顯示描述文字為左對齊以提升可讀性
- 不要所有元素都使用圓角 — 截圖顯示部分UI介面模型使用銳角,但按鈕為圓角
- 不要使用厚重的陰影 — 截圖顯示陰影非常細微,近乎平面風格
- 不要在程式碼中使用無襯線字體 — 截圖在文件資料擷取中使用等寬字體
- 避免: 空洞的內容
- 避免: 術語
- 避免: 被動語態
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Beau是一個用於文件自動化的SaaS平台,其特點是簡潔、高對比的美學。關鍵的十六進位色碼為 #FFFFFF、#000000 以及鮮明的橘紅色漸層(#FF8308)。字體採用現代人文無襯線體(Geist),大標題使用緊湊的字距。關鍵設計限制:保持極致的清晰度與空白,避免視覺雜亂,聚焦於資料導向的UI介面模型,並使用一致的鮮明漸層作為唯一的主要強調色。佈局應保持寬敞且居中,以強調專業效率與可信度。
en · zh-CN · zh-TW · ja · ko