精選 · 開放 · 免費
Fluidtouch Biz
一家創作頂級無紙化生產力應用程式的現代軟體工作室。
SaaSProductivityApp UICleanProduct
01
設計氣質 DNA
生產力筆記無紙化日誌現代
一家專注於數位轉型的時尚現代應用程式工作室。
02
色彩
#f31765Accent
#ffffffInk
#a9afc3Ink soft
#121318BG
#191c26BG soft
#212529BG quiet
rgba(33, 37, 41, 1.0)Line
深色模式搭配鮮豔的粉色強調主要操作和高亮。
03
字型
geometric-sans
- display
64px · 700 - heading
48px · 700 - subhead
22px · 400 - body
16px · 400
所有主要和次要文字皆使用幾何無襯線字體。 · 標題使用粗體(700)並緊縮字距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 格線間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255,255,255,0.1)
0px 4px 16px rgba(0,0,0,0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬度主視覺區塊,後接三欄產品格線。
07
動效與互動
150msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素在 hover 時平滑過渡。 · 內容區塊淡入動畫。
文字連結的色彩變換與底線顯現。 · 細膩的縮放或色彩變化回饋。
08
組件
- button 藥丸形按鈕,搭配鮮豔的背景色。
- card 簡潔的卡片,邊框最小化並帶有細膩的 hover 過渡效果。
- chip 文字連結在 hover 時顯示底部邊框底線。
- input 標準的表單輸入欄位,帶有圓角。
- hero 全視窗高度區塊,文字居中且字體巨大。
09
文案語氣與禁用清單
- 語氣 現代、專業且具鼓舞性。
- 標題風格 直接、行動導向且粗體。
- 按鈕文案 清晰且吸引人的行動號召,例如「探索更多」。
- 勿使用淺色背景——截圖顯示深色主題。
- 勿使用襯線字體——截圖顯示幾何無襯線字體。
- 勿使用圓角矩形按鈕——截圖顯示藥丸形按鈕。
- 勿使用明亮的霓虹色作為主要背景——截圖使用深灰色。
- 勿使用複雜的圖案或質感——截圖使用乾淨的純色背景與細膩漸層。
- 勿使用厚重陰影——截圖使用最小化或無可見陰影。
- 避免: 術語
- 避免: 過多的驚嘆號
- 避免: 被動語態
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為創作生產力應用程式的軟體工作室設計的深色主題網站。設計使用深灰色和黑色調色盤(#121318, #191c26),搭配鮮豔的粉色強調色(#f31765)。字體使用乾淨的幾何無襯線字體(Poppins),標題為粗體且巨大。關鍵禁忌包括避免淺色背景、襯線字體和複雜質感。版面特色為全高度主視覺區塊和乾淨的三欄產品格線。使用藥丸形按鈕以營造現代感。
en · zh-CN · zh-TW · ja · ko