精选 · 开放 · 免费

incident.io

面向快速迭代工程团队的现代化、一体化AI事件管理与值班平台。

01

设计气质 DNA

为工程团队打造的精致控制室，将严肃的运维焦点与亲切的清晰度融为一体。

02

色彩

以深墨色和温暖米白色为基础的单色系，以单一的高饱和度品牌橙色作为锚点，严格用于主要操作和关键强调。

03

字体

transitional-serif · geometric-sans · monospace

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

对于大号展示和编辑类标题，使用STKBureauSerif或类似的过渡衬线体。 · 对于所有UI元素、导航和正文，使用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

动效与交互

标准UI交互（如颜色、透明度和变换）使用平滑的150毫秒过渡。 · 标题中的‘fast’一词带有微妙的水平故障/回声效果，动态地表现其速度感和突破性。

交互元素在颜色和透明度变化时采用标准的150毫秒过渡，保持流畅感而不分散对内容的注意力。 · 通过标准按钮状态提供即时视觉反馈，依赖于细微的透明度或阴影变化。

08

组件

• button 一个高度差异化的系统，采用大胆的药丸形橙色主按钮用于‘获取演示’，以及对比强烈的深色或描边次级按钮用于‘开始免费试用’。
• card 简洁、圆角的卡片（通常为12px圆角），带有细微阴影或细边框，常用于展示产品界面截图或客户引言。
• chip 小型的药丸形徽章（常带有一个彩色圆点），用于对内容进行分类，例如‘AI SRE’功能标签。
• input 极简的输入框，带有细边框，遵循标准系统样式，但保持整体的几何美学。
• hero 一个巨大的、居中的布局，以一个大号衬线体标题、简洁的副标题、突出的双CTA按钮以及重叠的产品界面模型图为核心。

09

文案语气与禁用清单

• 语气 自信、直接且技术权威，同时亲切易懂，专为快速迭代的工程团队设计。
• 标题风格 有力、行动导向的标题，有时采用富有表现力的排版（如‘fast’的故障效果）来强调核心价值主张。
• 按钮文案 高对比度且行动导向。‘获取演示’是主要的、高饱和度的行动号召，而‘开始免费试用’则是更克制的次级选项。

• 不要使用通用的无衬线体标题——截图显示展示文本使用了醒目的过渡衬线字体。
• 不要使用柔和、低饱和度的强调色——截图显示使用了大胆、高饱和度的橙色作为主要操作色。
• 不要在交互元素上使用尖锐的0px边框圆角——截图显示了8px、12px和药丸形的混合使用。
• 不要使用密集、拥挤的布局——截图显示了宽裕的留白和编辑感节奏。
• 不要使用多个相互竞争的高饱和度颜色——截图显示了以单色为主的设计体系，仅有一个主导的橙色强调色。
• 不要仅依靠静态文本进行强调——截图显示使用了富有表现力的排版效果（故障动画）来传达含义。
• 避免: 企业套话
• 避免: 过于复杂的技术术语
• 避免: 被动或犹豫的语言
• 避免: 装饰性字体（仅限展示文本）

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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