厳選・オープン・無料

incident.io

インシデント管理とオンコールのための、最新のオールインワンAIプラットフォーム。スピードの速いエンジニアリングチームのために設計されています。

devops
incident.io のスクリーンショット
↓ デザインシステムをダウンロード (14 MB)OpenDesign で開く

オリジナル: https://incident.io

📦 パックの中身を見る →

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

STKBureauSerifまたは類似のトランジショナルセリフを、大きなディスプレイ用やエディトリアルな見出しに使用します。 · STKBureauSansまたは類似のジオメトリックサンセリフを、すべてのUI要素、ナビゲーション、および本文に使用します。 · 暖かい背景に対して最大限の可読性を確保するため、文字間隔をタイトにし、コントラストを高くします。

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

色、不透明度、トランスフォームなどの標準的なUIインタラクションのための、滑らかな150ミリ秒のトランジション。 · 見出しの単語「fast」には、速度や破壊的な変化を動的に表現するための、繊細な水平グリッチ/エコー効果が施されています。

インタラクティブ要素の色や不透明度の変更のための標準的な150ミリ秒のトランジション。コンテンツから注意をそらさずに、流れるような感覚を維持します。 · 標準的なボタン状態による即座の視覚フィードバック。繊細な不透明度やシャドウの変化に依存します。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

incident.io — 桌面首屏（hero）
桌面首屏（hero）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
incident.io — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

incident.ioはインシデント管理のための開発者向けSaaSプラットフォームで、最新のオールインワンソリューションとしてポジショニングされています。デザインのDNAは、プライマリホワイト（#FFFFFF）と暖かいオフホワイト（#F8F5F0）の背景、テキスト用のインクの深い色（#161618）で定義され、プライマリアクションと重要なハイライトにのみ使用される、大胆で高彩度のオレンジ（#F25533）でアクセントを加えています。タイポグラフィは洗練されたミックスで、大きなディスプレイ/見出しテキストにトランジショナルセリフ、本文コピーとすべてのUI要素にクリーンなジオメトリックサンセリフを使用しています。重要なデザインルールには、たっぷりとした余白とエディトリアルなリズムの維持、厳密なカラーディシプリン（モノクロベース＋単一アクセント）の確保、そして独自のコンポーネント形状システムの使用が含まれます。一般的なサンセリフ見出しの使用、複数の競合する高彩度アクセントカラーの使用、密度の高くぎゅうぎゅう詰めのレイアウトの作成は絶対に避けてください。常に、自信があり技術的に権威がありながらも親しみやすい声で製品をフレーミングしてください。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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