精選 · 開放 · 免費
incident.io
現代、全方位的 AI 平台,用於事件管理與值勤,專為節奏快速的工程團隊設計。
devops
01
設計氣質 DNA
事件回應SREAI可靠性營運
一個為工程團隊打造的精煉控制室,融合嚴肅的營運專注與平易近人的清晰度。
02
色彩
#F25533Accent
#161618Ink
rgba(22,22,24,0.66)Ink soft
#FFFFFFBG
#F8F5F0BG soft
#F5F5F5BG quiet
rgba(22,22,24,0.4)Muted
rgba(22,22,24,0.08)Line
以深邃墨黑與溫潤米白為主的單色系基調,輔以單一、高飽和度的品牌橘,嚴格用於主要操作與關鍵提示。
03
字型
transitional-serif · geometric-sans · monospace
- display
80px · 400 - h2
44px · 400 - body-lg
18px · 400 - body
16px · 400
使用 STKBureauSerif 或類似的過渡襯線體作為大型展示與編輯標題。 · 使用 STKBureauSans 或類似的幾何無襯線體作為所有介面元素、導覽與內文。 · 確保緊湊的字距與高對比度,以在溫潤的背景上達到最佳可讀性。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
寬裕的留白與垂直間距(通常為 80px 以上)營造沉靜、有如編輯設計的節氣,分隔不同的內容區塊。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(22, 22, 24, 0.08)
0px 4px 6px rgba(22, 22, 24, 0.04) · 0px 8px 15px -3px rgba(22, 22, 24, 0.06) · 0px 20px 50px -12px rgba(22, 22, 24, 0.16)
06
版面
1200container
12columns
24pxgutter
768 / 1024breakpoints
標準的 12 欄置中網格,帶有寬邊距,提供開闊、寬敞的畫布用於產品展示。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
標準介面互動(如顏色、透明度、變形)採用流暢的 150ms 過渡效果。 · 標題文字「fast」帶有細微的水平 glitch/回音效果,動態地表現速度與突破性。
互動元素的顏色與透明度變化採用標準的 150ms 過渡效果,維持流暢感而不分散內容注意力。 · 透過標準按鈕狀態提供即時視覺回饋,依賴細微的透明度或陰影變化。
08
組件
- button 高度差異化的按鈕系統,主要採用大膽、藥丸狀的橘色按鈕用於「取得展示」,對比的深色或描邊次要按鈕用於「開始免費試用」。
- card 簡潔、圓角的卡片(通常為 12px 圓角),搭配細微陰影或細邊框,常用於框住產品介面截圖或客戶引言。
- chip 小型、藥丸狀的標籤(通常帶有彩色圓點),用於內容分類,例如「AI SRE」功能標籤。
- input 極簡的輸入欄位,採用細邊框,依賴標準系統樣式但維持整體的幾何美學。
- hero 大尺寸、置中的佈局,以大型襯線標題、簡潔副標題、顯眼的雙重號召按鈕,以及重疊的產品介面模型為核心。
09
文案語氣與禁用清單
- 語氣 自信、直接且具技術權威性,同時平易近人,明顯為節奏快速的工程團隊所設計。
- 標題風格 強而有力、以行動為導向的標題,有時會使用富有表現力的排版(如「fast」的 glitch 效果)來強調核心價值主張。
- 按鈕文案 高度對比且以行動為導向。「取得展示」是主要的、高飽和度的號召行動,而「開始免費試用」則是較為含蓄的次要選項。
- 不要使用通用的無襯線體標題 —— 截圖顯示展示文字使用了顯著的過渡襯線體。
- 不要使用柔和、低飽和度的強調色 —— 截圖顯示使用大膽、高飽和度的橘色作為主要操作色彩。
- 不要在互動元素上使用尖銳的 0px border-radius —— 截圖顯示混用了 8px、12px 與藥丸狀造型。
- 不要使用擁擠、密集的佈局 —— 截圖顯示寬裕的留白與編輯設計的節奏。
- 不要使用多個相互競爭的高飽和度色彩 —— 截圖顯示以單一主導的橘色強調色搭配單色系調色盤。
- 不要僅依賴靜態文字來強調 —— 截圖顯示使用了富有表現力的排版效果(glitch)來傳達意義。
- 避免: 企業行話
- 避免: 過於複雜的技術術語
- 避免: 被動或猶豫的語言
- 避免: 用於展示文字之外的裝飾性字體
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
incident.io 是一個以開發者為中心的 SaaS 平台,用於事件管理,定位為現代、全方位的解決方案。其設計 DNA 以白色(#FFFFFF)與溫潤米白(#F8F5F0)為主要背景,搭配深邃墨黑(#161618)作為文字,輔以單一、大膽、高飽和度的橘色(#F25533),嚴格用於主要操作與關鍵提示。排版採用精緻的混合方式,大型展示/標題文字使用過渡襯線體,所有內文與介面元素則使用簡潔的幾何無襯線體。關鍵設計規則包括:維持寬裕的留白與編輯設計的節奏、嚴格遵守色彩規範(單色基調 + 單一強調色),以及使用獨特的元件形狀系統。切勿使用通用的無襯線體標題、使用多個相互競爭的高飽和度強調色,或創造擁擠、密集的佈局。始終以自信、具技術權威性但平易近人的語氣來框架產品。
en · zh-CN · zh-TW · ja · ko