精選 · 開放 · 免費
Onroadmap
一款簡約的路線圖工具，用於對齊團隊並視覺化優先順序。
ProductivitySaaSCleanCollaborationCalm
01
設計氣質 DNA
路線圖規劃對齊視覺化優先順序
團隊優先事項的簡潔白板
02
色彩
#000000Ink
#222222Ink soft
#FFFFFFBG
#FAFAFABG soft
#F3F3F3BG quiet
#999999Muted
rgba(243, 243, 243, 1)Line
中性畫布搭配鮮活的多彩色調，代表不同的路線圖軌道。
03
字型
geometric-sans · humanist-sans
- display
40px · 700 - h2
32px · 700 - h3
21px · 500 - body
16px · 400 - caption
14px · 400
標題採用粗體字重，並縮減字距 · 內文保持寬裕的行高以確保可讀性 · 次要文字使用柔和的墨色
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
各區塊間保持寬裕的垂直節奏，卡片與按鈕內部則採用緊湊的內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 6px
lg · 8px
pill · 999px
啟用狀態時使用細微的 2px solid 邊框，其餘狀態則無邊框，或利用 box-shadow 營造深度感。
0 8px 16px rgba(0, 0, 0, 0.16) · 0 4px 16px rgba(0, 0, 0, 0.32) · 0 0 0 3px rgb(243, 243, 243)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
單欄垂直流動，內容區塊置中。
07
動效與互動
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
按鈕與卡片的細膩懸停狀態 · 互動元素的聚焦過渡效果
按鈕可能略微加深顏色；卡片則可能略微浮起並加強陰影。 · 立即回饋，可能伴隨輕微的縮放或透明度變化。
08
組件
- button 高對比黑底白字，採用圓潤的膠囊形狀。
- card 白色或淺灰背景，搭配細微邊框或 box-shadow 以營造浮起效果。
- chip 多彩標籤（綠、粉、紫），採用膠囊形狀並帶有同色調的 box-shadow。
- input 未完全可見，但應為簡約風格，具備細微邊框。
- hero 置中佈局，包含大型漸層球體標誌、粗體雙色調標題，以及主要行動呼籲按鈕。
09
文案語氣與禁用清單
- 語氣 直接、清晰且專業。
- 標題風格 簡短、陳述性的語句，採用粗體無襯線字體。
- 按鈕文案 簡潔且行動導向，搭配箭頭符號。
- 勿使用裝飾性或襯線字體 — 截圖顯示的是簡潔的幾何無襯線標題。
- 勿添加複雜的陰影效果 — 截圖顯示的是細微、柔和的 box-shadow。
- 勿使用繁雜或深色的背景 — 截圖顯示的是以白色為主的畫布。
- 勿在主視覺區域堆砌元素 — 截圖顯示中央元素周圍有大量留白。
- 勿將徽章製成圓角方形 — 截圖顯示的是膠囊形狀的標籤。
- 勿在卡片上使用粗重的邊框 — 截圖顯示卡片間以細微陰影或背景變化區隔。
- 避免: 充滿術語的語言
- 避免: 複雜的句子結構
- 避免: 視覺雜亂或喧鬧的背景
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個簡約的 SaaS 路線圖工具網站。採用乾淨的白色背景搭配黑色文字，以實現最佳可讀性。字型方面，標題使用幾何無襯線體，內文則使用人文無襯線體。主要色調為中性的黑、白、灰，並僅在狀態徽章與路線圖軌道指示器上使用鮮活的多彩色調（綠、粉、紫、藍）。佈局採置中設計，間距寬裕。關鍵禁忌：切勿使用裝飾性字體、切勿添加複雜陰影、切勿讓不必要的元素使介面變得雜亂。設計優先考慮清晰度與專注度。
en · zh-CN · zh-TW · ja · ko