큐레이션 · 오픈 · 무료

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 또는 유사한 전환형 세리프를 사용합니다. · 모든 UI 요소, 내비게이션, 본문 텍스트에는 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

색상, 불투명도, 변환과 같은 표준 UI 상호작용을 위한 매끄러운 150ms 전환. · 헤드라인 단어 'fast'에는 속도와 파괴적 혁신을 역동적으로 표현하기 위한 미세한 수평 글리치/에코 효과가 적용됩니다.

인터랙티브 요소의 색상과 불투명도 변화를 위한 표준 150ms 전환으로, 콘텐츠에서 주의를 분산시키지 않으면서 유동적인 느낌을 유지합니다. · 미세한 불투명도나 그림자 변화에 의존하는 표준 버튼 상태를 통한 즉각적인 시각적 피드백입니다.

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 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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