精選 · 開放 · 免費

incident.io

現代、全方位的 AI 平台，用於事件管理與值勤，專為節奏快速的工程團隊設計。

01

設計氣質 DNA

一個為工程團隊打造的精煉控制室，融合嚴肅的營運專注與平易近人的清晰度。

02

色彩

以深邃墨黑與溫潤米白為主的單色系基調，輔以單一、高飽和度的品牌橘，嚴格用於主要操作與關鍵提示。

03

字型

transitional-serif · geometric-sans · monospace

• display80px · 400
• h244px · 400
• body-lg18px · 400
• body16px · 400

使用 STKBureauSerif 或類似的過渡襯線體作為大型展示與編輯標題。 · 使用 STKBureauSans 或類似的幾何無襯線體作為所有介面元素、導覽與內文。 · 確保緊湊的字距與高對比度，以在溫潤的背景上達到最佳可讀性。

04

間距

寬裕的留白與垂直間距（通常為 80px 以上）營造沉靜、有如編輯設計的節氣，分隔不同的內容區塊。

05

表面 (圓角 / 陰影 / 邊線)

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

版面

標準的 12 欄置中網格，帶有寬邊距，提供開闊、寬敞的畫布用於產品展示。

07

動效與互動

標準介面互動（如顏色、透明度、變形）採用流暢的 150ms 過渡效果。 · 標題文字「fast」帶有細微的水平 glitch/回音效果，動態地表現速度與突破性。

互動元素的顏色與透明度變化採用標準的 150ms 過渡效果，維持流暢感而不分散內容注意力。 · 透過標準按鈕狀態提供即時視覺回饋，依賴細微的透明度或陰影變化。

08

組件

• button 高度差異化的按鈕系統，主要採用大膽、藥丸狀的橘色按鈕用於「取得展示」，對比的深色或描邊次要按鈕用於「開始免費試用」。
• card 簡潔、圓角的卡片（通常為 12px 圓角），搭配細微陰影或細邊框，常用於框住產品介面截圖或客戶引言。
• chip 小型、藥丸狀的標籤（通常帶有彩色圓點），用於內容分類，例如「AI SRE」功能標籤。
• input 極簡的輸入欄位，採用細邊框，依賴標準系統樣式但維持整體的幾何美學。
• hero 大尺寸、置中的佈局，以大型襯線標題、簡潔副標題、顯眼的雙重號召按鈕，以及重疊的產品介面模型為核心。

09

文案語氣與禁用清單

• 語氣 自信、直接且具技術權威性，同時平易近人，明顯為節奏快速的工程團隊所設計。
• 標題風格 強而有力、以行動為導向的標題，有時會使用富有表現力的排版（如「fast」的 glitch 效果）來強調核心價值主張。
• 按鈕文案 高度對比且以行動為導向。「取得展示」是主要的、高飽和度的號召行動，而「開始免費試用」則是較為含蓄的次要選項。

• 不要使用通用的無襯線體標題 —— 截圖顯示展示文字使用了顯著的過渡襯線體。
• 不要使用柔和、低飽和度的強調色 —— 截圖顯示使用大膽、高飽和度的橘色作為主要操作色彩。
• 不要在互動元素上使用尖銳的 0px border-radius —— 截圖顯示混用了 8px、12px 與藥丸狀造型。
• 不要使用擁擠、密集的佈局 —— 截圖顯示寬裕的留白與編輯設計的節奏。
• 不要使用多個相互競爭的高飽和度色彩 —— 截圖顯示以單一主導的橘色強調色搭配單色系調色盤。
• 不要僅依賴靜態文字來強調 —— 截圖顯示使用了富有表現力的排版效果（glitch）來傳達意義。
• 避免: 企業行話
• 避免: 過於複雜的技術術語
• 避免: 被動或猶豫的語言
• 避免: 用於展示文字之外的裝飾性字體

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko