精選 · 開放 · 免費
Campsite
一個專注的團隊溝通工具,以有組織的貼文取代吵雜的聊天。
SaaSProductivityCleanCalmRestraint
01
設計氣質 DNA
周全專注團隊溝通
一個寧靜、組織完善的團隊貼文圖書館。
02
色彩
#fb432cAccent
#171717Ink
#737373Ink soft
#ffffffBG
#f5f5f5BG soft
#f0f0f0BG quiet
#a3a3a3Muted
rgba(0, 0, 0, 0.1)Line
高對比的極簡主義:以深墨色為基底的簡潔白色表面,搭配鮮豔的橘紅色作為關鍵動作的強調色。
03
字型
humanist-sans · monospace
- display
56px · 500 - h2
32px · 600 - body
16px · 400 - small
14px · 400
大型展示文字使用負字距調整 · 內文使用一般字重 · 章節標題使用半粗體
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
一致的 4px 基礎網格
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(0, 0, 0, 0.1)
0px 3px 6px -3px rgba(0, 0, 0, 0.05) · 0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 1px 0px -1px rgba(0, 0, 0, 0.05)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的行銷網站佈局,內容置中並留有寬敞的空間。
07
動效與互動
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
滑鼠懸停時的平滑顏色過渡 · 互動時細微的 box-shadow 變化
細微的顏色或背景變化。 · 立即的視覺反饋。
08
組件
- button 圓潤的膠囊形狀,使用外框或實心的主色調。
- card 乾淨的白色容器,帶有細微邊框與柔和陰影。
- chip 小型圓角標籤,帶有淡淡的背景色。
- input 標準的文字輸入欄位,配有淺色邊框。
- hero 大型置中標題,搭配輔助性副標題與產品截圖。
09
文案語氣與禁用清單
- 語氣 專業且平易近人。
- 標題風格 簡潔、直接,並以效益為導向。
- 按鈕文案 簡單、行動導向的文字置於圓角按鈕內。
- 避免使用深色或暗黑模式背景——截圖顯示明亮的白色表面 (#ffffff)。
- 避免使用尖銳、未圓角的邊角——截圖顯示膠囊形狀 (9999px) 與圓角卡片 (8px–12px)。
- 避免使用喧鬧、複雜的漸層——截圖顯示乾淨的純色背景與單一橘色強調。
- 避免使用過度裝飾或手寫字體——截圖顯示乾淨、功能性的無襯線字體。
- 避免元素過於擁擠——截圖顯示寬敞的留白(基礎 4px 網格)。
- 避免使用生硬的陰影——截圖顯示非常細微、低透明度的 box-shadow。
- 避免: 充滿術語的語言
- 避免: 過於大聲或具侵略性的行銷文案
- 避免: 視覺雜亂
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Campsite 是一個專注於遠端團隊的團隊溝通工具。其設計 DNA 建立在簡潔、高對比的極簡美學上:明亮的白色 (#ffffff) 表面、深墨色 (#171717) 文字,以及鮮豔的橘紅色 (#fb432c) 作為主要動作的強調色。排版使用人文無襯線字體類別,大型展示文字採用負字距調整。關鍵設計限制:避免使用暗黑模式或複雜漸層,避免使用尖銳邊角(一律使用圓潤膠囊形狀或柔和圓角),以及避免佈局過度擁擠(保持寬敞的留白)。
en · zh-CN · zh-TW · ja · ko